纯手写 JQ+CSS 实现轮播图功能代码

代码实现

HTML

 <div class="baner_box"> 
   <ul class="baner"> 
    <li><img src="https://img1.ixu.me/wp-content/uploads/2015/12/0b2397259b7580eaf4d5db98d3cd9386.jpg!800xauto" /></li> 
    <li><img src="https://img1.ixu.me/wp-content/uploads/2015/12/2ea5cc3df71f7c1d1de200e1e8220638.jpeg!800xauto" /></li> 
    <li><img src="https://img1.ixu.me/wp-content/uploads/2015/12/0b2397259b7580eaf4d5db98d3cd9386.jpg!800xauto" /></li> 
    <li><img src="https://img1.ixu.me/wp-content/uploads/2015/12/2ea5cc3df71f7c1d1de200e1e8220638.jpeg!800xauto" /></li> 
   </ul> 
   <ol></ol>
   <a class="left"><</a> 
   <a class="right">></a> 
  </div> 

CSS

*{padding:0;margin:0;list-style:none}
.baner_box{position:relative;width:1000px;height:300px;overflow:hidden;margin:200px auto 0}
.baner{height:300px;overflow:hidden;z-index:0;margin:0 auto 0;position:absolute}
.baner li{float:left;height:300px;z-index:0;text-align:center;position:relative;overflow:hidden}
.baner li img{width:100%;height:100%}
a{position:relative;top:120px;z-index:10;cursor:pointer;text-align:center;font-size:32px}
.left{float:left;width:30px;height:52px;line-height:52px;color:#fff;left:10px;background:rgba(0,0,0,.7)}
.right{float:right;width:30px;height:52px;line-height:52px;color:#fff;right:10px;background:rgba(0,0,0,.7)}
ol{position:relative;display:table;margin:0 auto 0;top:270px;z-index:10}
ol li{float:left;width:12px;height:12px;margin-left:5px;margin-right:5px;border-radius:50%;background:#ccc;cursor:pointer}
ol li.red{background:red}

JS

$(function() {
    var len = $(".baner li").index();
    var speed = 500; //animate time
    var setsed = 4300; //setInterval time
    var width = $(".baner_box").width(); //每次滚动距离
    var twidth = parseInt(width * (len + 1)); //baner总宽度设置              
    var set;

    //baner总宽度赋值            
    $(".baner").width(twidth);

    $(".baner li").width(width); //可以动态选择像li中添加宽度，根据父元素盒子的宽度
    //根据图片的index数，加载原点
    var olh = '<li></li>';

    for (var i = 0; i < (len + 1); i++) {
        $("ol").append(olh);
    }
    $("ol").find('li').first().addClass('red');

    //左滚动
    $(".left").on('click',
    function() {
        var pleft = parseInt($(".baner").css("left")) + width + 'px';
        var cpleft = '-' + parseInt(len * width) + 'px';
        var cleft = parseInt($(".baner").css("left"));
        var cindex = parseInt( - (cleft / width));

        if (cleft == 0) {
            $(".baner").stop().animate({
                left: cpleft
            },
            speed);
        } else {
            $(".baner").stop().animate({
                left: pleft
            },
            speed);
        }

        if (cindex == 0) {
            $("ol li").eq(len).addClass('red').siblings('li').removeClass('red');
        } else {
            $("ol li").eq(cindex - 1).addClass('red').siblings('li').removeClass('red');
        }
    });
    //右滚动
    $(".right").on('click',
    function() {

        var nleft = parseInt($(".baner").css("left")) - width + 'px';
        var npleft = parseInt( - width * len);
        var cleft = parseInt($(".baner").css("left"));
        var cindex = parseInt( - (cleft / width));

        if (cleft <= npleft) {
            $(".baner").stop().animate({
                left: 0
            },
            speed);
        } else {
            $(".baner").stop().animate({
                left: nleft
            },
            speed);
        }

        if (cindex == len) {
            $("ol li").eq(0).addClass('red').siblings('li').removeClass('red');
        } else {
            $("ol li").eq(cindex + 1).addClass('red').siblings('li').removeClass('red');
        }

    });
    //当前状态
    $("ol li").on('click',
    function() {
        var colindex = $(this).index();
        var collert = '-' + colindex * width;
        $(".baner").stop().animate({
            left: collert
        },
        speed);
        $(this).addClass('red').siblings('li').removeClass('red');
    });

    //定时器
    function seTime() {
        set = setInterval(function() {
            $(".right").click();
        },
        setsed);
    }
    //清除定时器
    $(".baner_box").hover(function() {
        clearInterval(set);
    },
    function() {
        seTime();
    });
    seTime();
});