jQuery无缝轮播，左右按钮滑入显示滑出隐藏

最新推荐文章于 2021-11-22 22:25:46 发布

自律并放纵者

最新推荐文章于 2021-11-22 22:25:46 发布

阅读量291

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_45689637/article/details/109690600

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

案例：

在这里插入图片描述

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2190750_08paqwohkjrl.css">
    <link rel="stylesheet" href="">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
            <ul class="imgbox">
                <li><img src="images/01.png"></li>
                <li><img src="images/02.jpg"></li>
                <li><img src="images/03.jpg"></li>
                <li><img src="images/04.png"></li>
                <li><img src="images/01.png"></li>//实现无缝轮播的关键
            </ul>
        <div class="leftButton"><i class="icon iconfont icon-jiantou"></i></div>
        <div class="rightButton"><i class="icon iconfont icon-jiantou1"></i></div>
        <div class="points">
            <ul class="lis">
                <li class="active item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
            </ul>
        </div>
    </div>
    <script src="jquery-3.5.1的副本.js"></script>
    <script src="jquery.js"></script>
</body>
</html>

css代码

*{
    margin:0;
    padding:0;
    list-style:none;
    font-size:0;
}
.wrapper{
    position:relative;
    height:202px;
    width:459px;
    margin:100px auto;
    overflow:hidden;
}
.wrapper .imgbox{
    height:100%;
    width:2295px;
    position: absolute;
    top:0;
    left:0;
}
.wrapper .imgbox li,.wrapper .imgbox img{
    height:100%;
    width:459px;
}
.wrapper .imgbox li{
    float:left;
}
.leftButton,.rightButton{
    display:none;
    position:absolute;
    top:50%;
    margin-top:-20px;
    height:40px;
    width:40px;
    background-color:rgba(0,0,0,0.5);
    line-height:40px;
    text-align: center;
    cursor:pointer;
}
.leftButton{
    border-radius: 0 25px 25px 0;
    left:0;
}
.rightButton{
    right:0;
    border-radius:25px 0 0 25px;
}
i{
    color:#fff;
    font-size:14px;

}
.points{
    height:20px;
    width:100%;
    position: absolute;
    bottom:20px;
    text-align: center;
}
.points ul{
    height:20px;
    display:inline-block;
    line-height: 20px;
    background-color: rgba(100,100,100,0.5);
    border-radius: 10px;
    line-height: 20px;
    cursor:pointer;
}
.points ul li{
    height:15px;
    width:15px;
    margin:0 10px;
    border-radius: 50%;
    background-color: #fff;
    display:inline-block;
    vertical-align: middle;
}
.points ul li.active{
    background-color: #faa;
}

jquery代码

var index=0,//实时监听
len=$('.item').length-1,//3
owidth=$('.wrapper').width(),
flag=true,
timer=null;
function init(){
    allEvent();//添加点击和滑入滑出事件
    autoMove();//自由轮播
}
function allEvent(){
    $('.leftButton').add($('.rightButton')).add($('.item')).click(function(){
        if($(this).attr('class')=='leftButton'){
            move('left');
        }else if($(this).attr('class')=='rightButton'){
            move('right');
        }else{
            index=$(this).index()
            move(index);
        }
        changeOrderStyle(index);//只要点击轮播了就要改变圆点的样式
        
    });
     //不能使用$('.wrapper')否则当鼠标在左右按钮处也停止自由轮播，则需要在其后加
    // $('.leftButton').add($('.rightButton')).add($('.lis li')) .mouseenter
    //但此时又会发现一个问题，那就是当你用鼠标从外面直接滑到左右按钮处时，在进入里面图片处
    //则会发现按钮又不显示,因此改为$('.wrapper').add($('.imgbox')).add($('.points'))
    $('.wrapper').add($('.imgbox')).add($('.points'))
        .mouseenter(function(){
            $('.leftButton').add($('.rightButton')).css({display:'block'});
            clearTimeout(timer);
        })
        .mouseleave(function(){
            $('.leftButton').add($('.rightButton')).css({display:'none'});
            clearTimeout(timer);//每次设置定时器之前都清一次，以防万一。
            autoMove();
        })
        //当鼠标在左右按钮和小圆点处不停止自由轮播
        $('.leftButton').add($('.rightButton')).add($('.lis li'))
        .mouseenter(function(){
            $('.leftButton').add($('.rightButton')).css({display:'block'});
            clearTimeout(timer);//每次设置定时器之前都清一次，以防万一。
            autoMove();
        })
        //使用mouseenter,mouseleave防止事件冒泡；不能使用mouseover,mouse
}
//无缝运动
function move(direction){
    clearTimeout(timer);//防止定时器的叠加
    if(flag){//加一个锁，防止疯狂点击
        flag=false;
        if(direction=='left'){
        //当处于第一个图片时向右移，此时用css函数瞬间改变left值将第一个图片潜移默化的换成最后一张图片，此时再往右移。
            if(index==0){
                $('.imgbox').css({left:-(len+1)*owidth});
                index=len;
            }else{
                index--;
            }
            $('.imgbox').animate({left:-index*owidth},function(){
                autoMove();
                flag=true;
            });
        }else if(direction=='right'){
             //当处于倒数第二张图片时先让其轮播到最后一张，此时用css函数瞬间改变left值将最后一张潜移默化的换成第一张图片，此时再往左移。
            if(index==len){
                $('.imgbox').animate({left:-(len+1)*owidth},function(){
                    $('.imgbox').css({left:0});
                    autoMove();
                    flag=true;
                });
                // $('.imgbox').stop(true,true).css({left:0});写在animate之后，不写在回调函数里面，会不执行，
                // 因为animate有一个动画延迟，即会出现定时器多定住一个时间差，来不及执行.css方法，可以使用一个
                // .stop（）.css()来停掉动画
                index=0;
             }else{
                index++;
                $('.imgbox').animate({left:-index*owidth},function(){
                    autoMove();
                    flag=true;
                });       
                
            }
            
        }else{
            $('.imgbox').animate({left:-direction*owidth},function(){
                index=direction;//不要忘记
                autoMove();
                flag=true;
            })
        }
    }
}
//不触发事件时自由轮播
function autoMove(){
    timer=setTimeout(function(){
        move('right');  
        changeOrderStyle(index); 
    },2000)
}
//改变轮播图导航圆点样式
function changeOrderStyle(index){
    $('.active').removeClass('active');//移除原来的圆点样式
    $('.item').eq(index).addClass('active');//实时添加新的圆点样式
}
init();

自律并放纵者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery无缝轮播，左右按钮滑入显示滑出隐藏

案例：html 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> <link rel="st
复制链接

扫一扫