轮播图（3）——基于JQ的左右滑动轮播金装版

最新推荐文章于 2022-08-02 08:09:26 发布

铅笔芯的ta

最新推荐文章于 2022-08-02 08:09:26 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/qq_18144239/article/details/88889736

版权

上回埋下的伏笔今天来补上，前两个轮播图显然不太好用（但是在一些场景下还是可以用的，比如不需要焦点的左右轮播，可以用轮播图（2），嗨淘的轮播图，是淡入淡出的轮播图（1），网上还是有很多同款轮播图的），今天这个轮播还是左右滑动的轮播图，但是在体验上相对最为优秀，尤其是对焦点点击效果的处理，绝对好用。

1、思路

我知道没有图你不会来的，嘿嘿

1.1 css样式布局

介绍一下上图的布局思路
容器banner当然有个相对固定的宽高（说相对固定是针对响应式布局），ul的大小和最大的容器一致，不过有个相对定位属性，里面的每个盛放img的li宽高当然都和ul相同（按照自己需要设定），所有的li都绝对定位，第一个li放在ul中，其余的li都用相对定位定于容器外部的正右边，

1.2 js的大致思路

自动循环轮播的图片，当前图片向左滑动，下一张图片就紧接着向左滑动进入可视区域banner，以此类推，用全局索引实现循环来回播放，当然需要借助animate()方法和css()方法。
大致流程如下：
①自动轮播和点击下一张流程
当前图片(index)滑向左边，移出可视区域->下一张图片(index+1)用css()方法回到最右边，做滑动准备->下一张图片(index+1)滑向容器，移入可视区域
②点击上一张流程
当前图片(index)滑向右边，移出可视区域->下一张图片(index-1)用css()方法回到最左边，做滑动准备->下一张图片(index-1)滑向容器，移入可视区域
当然，自动轮播和点击下一张流程，点击上一张流程都需要判断索引号是否过大或者过小，做出相应的重新赋值准备
③点击焦点时
当点击的焦点索引大于当前在可视区域图片（li）的索引
当前图片(index)滑向左边，移出可视区域->下一张图片(焦点索引对应的图片)用css()方法回到最右边，做滑动准备->下一张图片(焦点索引对应的图片）滑向容器，移入可视区域
当点击的焦点索引小于当前在可视区域图片（li）的索引
当前图片(index)滑向右边，移出可视区域->下一张图片(焦点索引对应的图片)用css()方法回到最左边，做滑动准备->下一张图片(焦点索引对应的图片）滑向容器，移入可视区域
注意：注意animate()方法和css()方法的使用，animate()方法有过渡的效果，用来做滑动效果最合适，css()没有任何过渡效果，用来做不动声色的li转移

2、开搞

2.1 html代码

<div class="lunbo" id="banner">
    <ul>
        <li><a href="#">[站外图片上传中……(2)]</a></li>
        <li><a href="#">[站外图片上传中……(3)]</a></li>
        <li><a href="#">[站外图片上传中……(4)]</a></li>
        <li><a href="#">[站外图片上传中……(5)]</a></li>
        <li><a href="#">[站外图片上传中……(6)]</a></li>
        <li><a href="#">[站外图片上传中……(7)]</a></li>
        <li><a href="#">[站外图片上传中……(8)]</a></li>
    </ul>
    <div>
        <span class="contr">
            <!-- <i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i> -->   
        </span>
    </div>
    <div>
        <button title="上一张" class="prev"><</button>
        <button title="下一张" class="next">></button>
    </div>
</div>

2.2 css代码

*{padding:0;margin:0;list-style: none;}
    .lunbo{
        width:500px;
        height:312px;
        overflow: hidden;
        margin:0 auto;
        position:relative;
    }
    .lunbo>ul{
        height:312px;
        position: relative;
    }
    .lunbo>ul li{
        float:left;
        position: absolute;
        left:500px;
        top:0;
    }
    .lunbo>ul li:nth-child(1){
        left:0px;
    }
    .lunbo div:nth-child(2){
        width:100%;
        height:20px;
        position: absolute;
        margin:0 auto;
        top:280px;
    }
    .lunbo div span{
        display: block;
        height:30px;
        width:210px;
        padding: 0px 10px;
        margin: 0 auto;
    }
    .lunbo>div>span i{
        display:block;
        width:16px;
        height:16px;
        border-radius: 50%;
        background:chocolate;
        border:2px solid chocolate;
        margin-right:10px;
        float:left;
        cursor:pointer;
    }
    .lunbo div span i:last-child{
        margin-right: 0;
    }
    .lunbo>div>span .on{
        background:white;
    }
    .lunbo div:nth-child(3){
        width:100%;
        position: absolute;
        top:110px;
        left:0;
    }
    .lunbo div:nth-child(3) button{
        width:40px;
        height:60px;
        background: #ccc;
        color:#FFF;
        border:0;
        outline:none;
        opacity: 0.5;
        font-size: 30px;
        cursor:pointer;
    }
    .lunbo div:nth-child(3) button:first-child{
        float:left;
        margin-left:10px;
    }
    .lunbo div:nth-child(3) button:last-child{
        float:right;
        margin-right:10px;
    }

2.3 js代码

$(function(){
        //创建控制小圆点
        var is=$('#banner>ul li').length;
        for(i=0;i<is;i++){
            $('<i order='+i+'></i>').appendTo('.contr');
        }
        //给予第一个小圆点class属性
        $('#banner .contr i').first().addClass('on');
        //定义一个全局索引
        var index = 0;
        //封装一个函数，使当前索引对应的焦点（小圆点）显示不同于其他焦点的状态，方便下边的一次次调用
        function focus(){
            $('#banner .contr i').removeClass('on');
            $('#banner .contr i').eq(index).addClass('on');
        }
        //给每个焦点添加点击事件
        $('#banner .contr i').click(function(){
            //获取当前点击的焦点的索引值
            var thisIndex = $(this).index();
            //判断当前点击的焦点索引与现在显示图片的索引关系
            //当点击的焦点索引 大于 现在显示图片的索引时
            if(thisIndex > index){
                $('#banner>ul li').eq(index).animate({left:'-500px'});
                $('#banner>ul li').eq(thisIndex).css({left:'500px'});
                $('#banner>ul li').eq(thisIndex).animate({left:'0px'});
                index = thisIndex;
                focus();
                
                //当点击的焦点索引 小于 现在显示图片的索引时
            }else if(thisIndex < index){
                $('#banner>ul li').eq(index).animate({left:'500px'});
                $('#banner>ul li').eq(thisIndex).css({left:'-500px'});
                $('#banner>ul li').eq(thisIndex).animate({left:'0px'});
                index = thisIndex;
                focus();
            }
        });
        //播放函数，主要是为了自动播放的调用
        function play(){
            $('#banner>ul li').eq(index).animate({left:'-500px'});
            index++;
            if(index == $('#banner>ul li').length){
                index = 0;
                $('#banner>ul li').eq(index).css({left:'500px'});
            }
            $('#banner>ul li').eq(index).css({left:'500px'});
            $('#banner>ul li').eq(index).animate({left:'0px'});
            focus();
            
        }
        //定义一个值为null的全局变量
        var timer = null;
        //自动播放函数
        function autoPlay(){
            timer = setInterval(play,1000);
        }
        //添加鼠标移入轮播图容器时，自动播放停止
        $('#banner').bind('mouseover',function(){
            clearInterval(timer);
            timer = null;
        });
        //添加鼠标移出轮播图容器时，自动播放继续
        $('#banner').bind('mouseout',function(){
            autoPlay();
        });
        //添加一个状态当为true时，可以点击，false时点击无效，这样可以防止多次点击按钮获得更好的客户体验，
        var statu = true;
        $('#banner .prev').click(function(){
            if(statu == true){
                //  给状态值改为false
                statu = false;
                //当前图片滑向右边，全局索引index减1
                $('#banner>ul li').eq(index).animate({left:'500px'});
                index--;
                //判断此时全局索引是否为或者小于最小索引值，是，则使全局索引值改为最大索引值，
                if(index < 0){
                    index = $('#banner>ul li').length-1;
                }
                //将改变后的全局索引所对应的图片用css()方法将其“拉”回，最左边。然后用animate()方法滑向当前可视区域(容器区域内)
                $('#banner>ul li').eq(index).css({left:'-500px'});
                                                                //动画完成后将状态值改为true，以便下一次的点击
                $('#banner>ul li').eq(index).animate({left:'0px'},function(){statu = true;});
                focus();
            }
        });
        $('#banner .next').click(function(){
            if(statu == true){
                //  给状态值改为false
                statu = false;
                //当前图片滑向左边，全局索引index加1
                $('#banner>ul li').eq(index).animate({left:'-500px'});
                index++;
                //判断此时全局索引是否大于最大索引值（最大索引值是$('#banner>ul li').length-1 ），是，则使全局索引值改为最大索引值，
                if(index == $('#banner>ul li').length){
                    index = 0;
                    
                }
                //将改变后的全局索引所对应的图片用css()方法将其“拉”回最右边。然后用animate()方法滑向当前可视区域(容器区域内)
                $('#banner>ul li').eq(index).css({left:'500px'});
                                                                //动画完成后将状态值改为true，以便下一次的点击
                $('#banner>ul li').eq(index).animate({left:'0px'},function(){statu = true;});
                focus();
            }
        })
        //页面打开时，默认调用自动轮播函数
        autoPlay();
        
    });

3、注意

记得要引入jq，否则无法运行

4、在线演示

在线演示

铅笔芯的ta

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
轮播图（3）——基于JQ的左右滑动轮播金装版

上回埋下的伏笔今天来补上，前两个轮播图显然不太好用（但是在一些场景下还是可以用的，比如不需要焦点的左右轮播，可以用轮播图（2），嗨淘的轮播图，是淡入淡出的轮播图（1），网上还是有很多同款轮播图的），今天这个轮播还是左右滑动的轮播图，但是在体验上相对最为优秀，尤其是对焦点点击效果的处理，绝对好用。1、思路我知道没有图你不会来的，嘿嘿1....
复制链接

扫一扫