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

分类:WEB前端 浏览:7次
纯手写 JQ+CSS 实现轮播图功能代码

代码实现

HTML


<div class="baner_box"> <ul class="baner"> <li><img src="https://janecc.cdn.ixu.me/wp-content/uploads/2015/12/0b2397259b7580eaf4d5db98d3cd9386.jpg" /></li> <li><img src="https://janecc.cdn.ixu.me/wp-content/uploads/2015/12/2ea5cc3df71f7c1d1de200e1e8220638.jpeg" /></li> <li><img src="https://janecc.cdn.ixu.me/wp-content/uploads/2015/12/0b2397259b7580eaf4d5db98d3cd9386.jpg" /></li> <li><img src="https://janecc.cdn.ixu.me/wp-content/uploads/2015/12/2ea5cc3df71f7c1d1de200e1e8220638.jpeg" /></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();
});

作者: JaneCC最后编辑于:2017-08-16 14:15
坚持把简单的事情做好就是不简单,坚持把平凡的事情做好就是不平凡。所谓成功,就是在平凡中做出不平凡的坚持。

--JaneCC

众说纷纭Comments3条留言

  1. 沙发
    :

    😐 没有效果啊,我复制了你的代码,但是却没有效果

    来自Google Chrome 49.0.2623.75Windows 7的精彩回复 [回复]
    • :

      @哈哈 哪里报错了吗

      来自Google Chrome 60.0.3112.90Windows 7的精彩回复 [回复]
      • :

        @JaneCC 不报错。 但是点击不了

        来自Google Chrome 60.0.3112.113Windows 7的精彩回复 [回复]

发表感言