banner图无缝滑动

最新推荐文章于 2024-07-05 11:02:17 发布

luo15256533579

最新推荐文章于 2024-07-05 11:02:17 发布

阅读量1.4k

点赞数

分类专栏： banner 文章标签： banner无缝滑动

本文链接：https://blog.csdn.net/luo15256533579/article/details/78121078

版权

banner 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

模仿了一个实现banner的无缝滑动，只要改变html结构中的<li><img src="image/1.jpg"></li>就可以自由增加和减少图片，其余的都是自动运行的。

先上一张效果图：

把html，css，js写在一个页面上了，不是很规范，但是方便看~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .wrap{
            width: 500px;
            height: 300px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .wrap .banner{
            width: 4000px;
            height: 300px;
            position: absolute;
        }
        .wrap .banner li{
            float: left;
        }
        .wrap .banner img{
            width: 500px;
            height: 300px;
        }
        .dots{
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .dots li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #e2e2e2;
            display: inline-block;
            margin: 5px;
        }
        .dots .on{
            background: rgba(0,0,0,.6);
        }
        .bannerleft{
            width: 30px;
            height: 50px;
            background: url(image/l1.png) no-repeat center;
            background-size:30px 50px;
            position: absolute;
            left: 10px;
            top: 50%;
            margin-top:-25px;
        }
        .bannerright{
            width: 30px;
            height: 50px;
            background: url(image/l1.png) no-repeat center;
            background-size:30px 50px;
            transform: rotate(180deg);
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top:-25px;
        }
        .bannerleft:hover{
            background-color: rgba(0,0,0,0.6);
        }
        .bannerright:hover{
            background-color: rgba(0,0,0,0.6);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <ul class="banner">
            <li><img src="image/1.jpg"></li>
            <li><img src="image/2.jpg"></li>
            <li><img src="image/3.jpg"></li>
            <li><img src="image/4.jpg"></li>
        </ul>
        <ul class="dots">
        </ul>
        <div class="bannerleft"></div>
        <div class="bannerright"></div>
    </div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $('.wrap').slide();
    });
    $.fn.slide=function(){
        /*复制第一张图片，并放在最后*/
        var clone=$('.banner li').first().clone();
        var banner=$('.banner');
        banner.append(clone);
        /*检测有多少张图片*/
        var size=$('.banner li').length;
        var i=0;
        /*根据图片个数加原点*/
        for(var n=0;n<size-1;n++){
            $('.dots').append('<li></li>');
        }
        $('.dots li').first().addClass('on');
        /*自动播放，与清除自动播放*/
        var timer=setInterval(function(){i++;move();},2000);
        $('.wrap').hover(function(){
            clearInterval(timer);
        },function(){
            return timer=setInterval(function(){i++;move();},2000);
        })
        /*点击原点切换*/
        $('.dots li').click(function(){
            i=$(this).index();
            move();
        })
        /*前后切换*/
        $('.bannerleft').click(function(){
            console.log(i);
            i--;
            move();
        })
        $('.bannerright').click(function(){
            console.log(i);
            i++;
            move();
        })
        /*核心运动函数，实现无缝滑动*/
        function move(){
            if(i==size){
                banner.css({left:0});
                i=1;
            }
            if(i==-1){
                i=size-2;
            }
            console.log(i);
            banner.stop().animate({left:-i*500},500);
            if(i==size-1){
                $('.dots li').eq(0).addClass('on').siblings().removeClass('on');
            }else{
                $('.dots li').eq(i).addClass('on').siblings().removeClass('on');
            }
        }
    }
</script>
</body>
</html>

luo15256533579

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
banner图无缝滑动

模仿了一个实现banner的无缝滑动，只要改变html结构中的就可以自由增加和减少图片，其余的都是自动运行的。先上一张效果图：把html，css，js写在一个页面上了，不是很规范，但是方便看~~ Document *{ padding: 0; margin: 0;
复制链接

扫一扫

专栏目录