首页手记【jQuery】淘宝banner轮播

【jQuery】淘宝banner轮播

标签：

JQuery

image.png

思路

通过banner下方的小圆点，控制图片的切换。
给左右箭头添加点击事件（点击时切换图片，并且下方的小圆点跟着切换）。
自动切换（2秒切换一次图片）。
当鼠标移动到banner上时，停止“自动切换”（停止第3步）。
当鼠标移开时，开始继续“自动切换”（继续开始第3步）。

原理

image.png

黑框是容器，要做无缝轮播，头和尾的图片需要一样。
所有图片都放在 ul 里面，通过移动 ul 实现图片的切换。

容器要设置 overflow: hidden，把溢出部分的图片隐藏掉。

HTML代码

<div class="banner">
    <ul class="bannerAllPic">
        <li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/bg1.jpg" alt=""></a></li>
        <li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/bg2.jpg" alt=""></a></li>
        <li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/bg3.jpg" alt=""></a></li>
        <li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/bg4.jpg" alt=""></a></li>
        <li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/bg5.jpg" alt=""></a></li>
        <li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/bg6.jpg" alt=""></a></li>
    </ul>
    <div class="arrow">
        <a href="javascript:void(0)" class="aLeft">&lt;</a>
        <a href="javascript:void(0)" class="aRight">&gt;</a>
    </div>
    <ol class="circleAll"></ol></div>

CSS代码

* {    margin: 0;    padding: 0;    list-style: none;
}a {    text-decoration: none;
}.banner {    width: 700px;    height: 314px;    margin: 50px auto;    overflow: hidden;    position: relative;
}.bannerAllPic {    position: relative;

}.bannerAllPic>li {    float: left;
}.arrow a{    width: 30px;    height: 50px;    background: rgba(0,0,0,.4);    position: absolute;    top: 50%;    transform: translateY(-50%);    text-align: center;    line-height: 50px;    color: #fff;    font-size: 20px;    font-family: '宋体';    display: none;
}.banner:hover .arrow a {    display: block;
}.aLeft {    left: 0;
}.aRight {    right: 0;
}.circleAll {    position: absolute;    background: rgba(0,0,0,.4);    bottom: 10px;    left: 50%;    transform: translateX(-50%);    border-radius: 20px;    padding: 0 5px;
}.circleAll li {    width: 12px;    height: 12px;    border-radius: 50%;    background: #fff;    float: left;    margin: 3px 5px;    cursor: pointer;
}.circleAll .now {    background: pink;
}

jQuery代码

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../scripts/jquery.min.js"></script><script>
    $(document).ready(function() {        var banner = $('.banner');  // 获取容器
        var bannerUl = $('.bannerAllPic');  // 获取ul（装了所有图片的ul）
        var aLeft = $('.aLeft');  // 获取左箭头
        var aRight = $('.aRight');  // 获取右箭头
        var circleAll = $('.circleAll');  // 获取小圆点的容器（ol）
        var width = parseInt($('.banner').css('width'));  // 获取容器的宽度
        var index = 0;    // 计数器

        /*
          根据上图所示，我们需要把第一张图复制到最后
        */
        // 获取第一张图，用clone()复制，并把值赋给变量 liFirst，把变量 liFirst 添加到 ul后面。
        var liFirst = $('.banner>.bannerAllPic>li:first').clone();
        bannerUl.append(liFirst);        /*
          根据图片的数量来控制ul的宽度
        */
        // 获得图片的数量，并赋给变量 imgNum
        var imgNum = $('.bannerAllPic > li').length;
        bannerUl.css('width' , imgNum * width);  // 设置ul的宽度

        // 根据图片的数量来生成小圆点的个数
        while(index < imgNum-1) {
            circleAll.append("<li></li>");
            index++;
        }        // 设置第一个圆点的默认样式
        var firstCircle = $('.circleAll>li:first');
        firstCircle.addClass('now');        // 通过小圆点控制图片切换
        var littleCircle = $('.circleAll>li');
        littleCircle.click(function() {
            $(this).addClass('now').siblings().removeClass('now');  // 被点击的小圆点添加“now”类，其他小圆点移除“now”类
            index = $(this).index();  // 获取当前被点击的小圆点的下标值
            bannerUl.animate({left: -index * width});  // 通过当前小圆点的下标值做参考，移动 ul
        });        // 点击右侧按钮
        /*
        显示倒数第二张（即展示的最后一张）时，再按一下，划到最后一张（即复制出来的那张，和第一张一    模一样）。再按一下，把index变为0，同时会瞬间切换到第一张，因为没做动画，所以用户看不出来切换效果。
        */

        /*
          如果计数器（index）变成所有图片的数量的值时（即已经指向了最后一张图），把计数器变回0（指向第一张图），并把ul的left设为0。
        */
        aRight.click(function() {            if(index == imgNum-1) {
                index = 0;
                bannerUl.css('left' , 0);
            }
            index++;
            bannerUl.stop().animate({left: -index * width});            // 每点击一次右箭头，小圆点就向后指示一次。
            if(index == imgNum-1){
                littleCircle.eq(0).addClass('now').siblings().removeClass('now');
            } else {
                littleCircle.eq(index).addClass('now').siblings().removeClass('now');
            }
        });        // 点击左箭头的原理和点击右箭头的原理差不多
        aLeft.click(function() {            if(index<=0) {
                index = imgNum-1;
                bannerUl.css('left' , -index * width);
            }
            index--;
            bannerUl.stop().animate({left: -index * width});
            littleCircle.eq(index).addClass('now').siblings().removeClass('now');
            });            // 自动切换
            var timeId = setInterval(function() {
                aRight.click();
            }, 2000);            // 鼠标经过事件
            banner.hover(function() {
                clearInterval(timeId);
            }, function() {
                timeId = setInterval(function() {
                aRight.click();
            }, 2000);
        });
    });</script>

作者：滑滑兔
链接：https://www.jianshu.com/p/f4ef636d06a9

点击查看更多内容