HTML+jq简单轮播图

番茄西红柿发布于2019-04-23 13:34 / 3273人阅读

摘要：图片，按钮，上下页必须是同级元素使用按钮变色，需要定义的样式推荐使用插件，手机端很好用，端貌似不太好用路标

.main{
    width: 100%;
    min-width: 1100px;
    display: table;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.pic {
    width: 100%;
    min-width: 1100px;
    height: 500px;
    z-index: 0;
}
.pic ul {
    width: 100%;
    height: 100%;
}
.pic ul li {
    width: 100%;
    height: 100%;
    list-style: none;    
    position: absolute;
    top: 0;
    right: 0;
}
.pic li img {
    width: 100%;
    height: 100%;
}
.btn{
    width: 300px;
    height: 1.5px;
    margin: 0 auto;
    z-index: 1;
    position: relative;
    top: -40px;
}
.btn ul {
    width: auto;
    height: 1.5px;
    display: table;
    margin: 0 auto;
}
.btn ul li {
    width: 37px;
    height: 1.5px;
    float: left;
    list-style: none;
    margin: 0 6px;
    background: #000;
}
.btn .btn-style{
     background-color: yellow;
}

图片，按钮，上下页必须是同级元素

<div class="main">
    <div class="pic">
        <ul>
            <li><img src="img/index/b1.jpg"/>li>
            <li style="display: none;"><img src="img/index/b2.jpg"/>li>    
            <li style="display: none;"><img src="img/index/b3.jpg"/>li>
            <li style="display: none;"><img src="img/index/b4.jpg"/>li>
        ul>                        
    div>
    <div class="btn">
        <ul>
            <li style="background: yellow;">li>
            <li>li>
            <li>li>
            <li>li>
        ul>
    div>  
　  <div class="btn-next">div>
    <div class="btn-pre">div>                  
div>

$(document).ready(function() {
    //使用按钮变色，需要定义.btn-style的样式
    Carousel(.pic);
});

function Carousel(car){
    var index = 0;
    var interval;
    var pic = $(car);
    var btn = pic.siblings(.btn);            
    var pre = pic.siblings(.btn-pre);
    var next = pic.siblings(.btn-next);
    var num = pic.find(li).length;
    
    btn.find(ul li).mouseover(function() {
        index = $(this).index();
        display(index);
    });
    
    pre.click(function(){
        index--;
        if(index < 0) {
            index = num;
        }
        display(index);
    });
    
    next.click(function(){
        index++;
        if(index > num) {
            index = 0;
        }
        display(index);
    });

    function display() {
        pic.find(ul li).eq(index).fadeIn(slow);
        pic.find(ul li).eq(index).siblings().fadeOut(fast);                
        btn.find(ul li).eq(index).addClass(btn-style);
        btn.find(ul li).eq(index).siblings().removeClass(btn-style);
    }

    interval = setInterval(function() {
        index++;
        if(index > num) {
            index = 0;
        }
        display(index);
    }, 2000);

    pic.parent().mouseenter(function() {
        clearInterval(interval);
    });

    pic.parent().mouseleave(function() {
        interval = setInterval(function() {
            index++;
            if(index > num) {
                index = 0;
            }
            display(index);
        }, 2000);
    });    
}

推荐使用swiper插件，手机端很好用，pc端貌似ie不太好用

路标： http://www.swiper.com.cn/

swiper4 api ：http://www.swiper.com.cn/api/index.html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2047.html

回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

DC_er 2019-08-21 17:42 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

Hwg 2019-08-05 12:25 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

spacewander 2019-08-29 13:50 评论0 收藏0
《第31天：JQuery - 轮播图》

摘要：源码下载地址链接提取码写这篇文章，当做是对自已这一天的一个总结写轮播图要准备的东西三张尺寸大小一样的图片分为三个模块模块，模块，模块模块轮播图引用本地固定的库引入你写的文件引入你写的文件为你本地的图片路径，为你图片的宽度，为类名左滑右滑 showImg(https://segmentfault.com/img/bVbi0YG?w=1408&h=363); 源码下载地址：链接：https...

fuyi501 2019-08-02 11:48 评论0 收藏0
《第31天：JQuery - 轮播图》

摘要：源码下载地址链接提取码写这篇文章，当做是对自已这一天的一个总结写轮播图要准备的东西三张尺寸大小一样的图片分为三个模块模块，模块，模块模块轮播图引用本地固定的库引入你写的文件引入你写的文件为你本地的图片路径，为你图片的宽度，为类名左滑右滑 showImg(https://segmentfault.com/img/bVbi0YG?w=1408&h=363); 源码下载地址：链接：https...

RiverLi 2019-08-23 12:29 评论0 收藏0