图片循环切换播放

最新推荐文章于 2020-07-09 15:16:21 发布

想成为一只喵

最新推荐文章于 2020-07-09 15:16:21 发布

阅读量705

点赞数 1

分类专栏：技术类文章标签：图片轮播-jquery

本文链接：https://blog.csdn.net/qq_35741728/article/details/70802505

版权

技术类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

焦点轮播图效果

序言：写网页的时候会遇到很多需要轮播图的效果，不难，引用个插件就好了吗，简单方便，但是看到人家写出来的循环切换效果就想自己也琢磨琢磨是否能实现，参考学习了一些思路，功能实现了，在这贴出来代码，有需要的朋友可以参考参考。

我的代码，基于jquery.

我先放一下我的结构代码：

<body>
    <div class="box">
        <div class="main">
            <ul>
                <li><img src="images/lunbo/4.jpg"/></li>
                <li><img src="images/lunbo/1.jpg"/></li>
                <li><img src="images/lunbo/2.jpg"/></li>
                <li><img src="images/lunbo/3.jpg"/></li>
                <li><img src="images/lunbo/4.jpg"/></li>
                <li><img src="images/lunbo/1.jpg"/></li>

            </ul>
        </div>
        <div class="buttons">
            <span class="on"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <a class="prev"><</a>
        <a class="next">></a>
    </div>
</body>

应该很容易明白的哈，那我也要解说一下：box是最外容器，里边包含两个a是左右滑动点击按钮, buttons是下边原点，都给定位好了，main就是图片显示部分了，我用的是改变它的定位left;

实现原理：第一张图片和最后一张图片分别复制在最后和最前，当动画到这两张图片时，改变left使ul显示相应同样的图片，给人以错觉没发生改变，继续动画，造成循环的效果。

现在放一下css代码：

      *{
            margin:0;
            padding:0;
        }
        ul li{
            list-style: none;
        }
        .box{
            width:500px;
            height:400px;
            position: relative;
            overflow: hidden;
            margin:100px auto;
        }
        .main ul{
            position: absolute;
            top:0;
            left:0;
            width:3000px;
            height:400px;
            overflow: hidden;
        }
        .main ul li{
            width:500px;
            height:400px;
            float:left;
        }
        .main ul li img{
            display: block;
            width:100%;
            height:100%;
        }
        .buttons{
            position: absolute;
            bottom:20px;
            left:50%;
            transform: translateX(-50%);
        }
        .buttons span{
            display: inline-block;
            width:15px;
            height:15px;
            background-color: #ccc;
            border-radius: 50%;
            margin-right:10px;
            border:2px solid #fff;
            cursor: pointer;
        }
        .buttons span:last-child{
            margin-right:0;
        }
        .box:hover a{
            display: block;
        }
        .box a{
            width:50px;
            height:50px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            color:#fff;
            cursor: pointer;
            background-color: rgba(0,0,0,0.5);
            position: absolute;
            top:50%;
            margin-top:-25px;
            display: none;
        }
        .box a:hover{
            background-color: rgba(0,0,0,0.8);
        }
        .prev{
            left:20px;
        }
        .next{
            right:20px;
        }
        span.on{
            background-color: #ff9933;
        }

最重要的还是js:

        $(function(){
        var main = $('.main ul');//ul元素
        var itemw = $('.main ul li').width();//单张图片宽度
        var index=0;//第几张图片
        var timer;//定时器
        main.css('left','-500px');//ul的初始left;

        function change(offset){//图片切换函数
            var left = parseInt($('.main ul').position().left+offset);
            main.animate({'left':left+'px'},500,function(){
                if(left>-itemw){
                    main.css('left',-itemw*4+'px');
                }
                if(left<-itemw*4){
                    main.css('left',-itemw+'px');
                }
            });

        }

        function button(index){//原点切换函数
            $('.buttons span').eq(index).addClass('on').siblings().removeClass('on');
        }

        function play(){//自动轮播函数
            timer = setInterval(function(){
                        index++;
                        if(index==4){
                            index=0;
                        }
                        button(index);
                        change(-itemw);
                    },2000)
        }

        //右按钮
        $('.next').click(function(){
            if(!$('ul').is(":animated")){
                index++;
                if(index==4){
                    index=0;
                }
                button(index);
                change(-itemw);
            }
        })

        //左按钮
        $('.prev').click(function(){
            if(!$('ul').is(":animated")){
                index--;
                if(index==-1){
                    index=3;
                }
                button(index);
                change(itemw);
            }
        })

        //点击原点切换
        $('.buttons span').click(function(){
            if(!$(this).hasClass('on')){
                var index_btn = $(this).index();
                button(index_btn);
                var offset = (index_btn-index)*-itemw;
                change(offset);
                index=index_btn;
            }
        })

        //鼠标移入定时器停止
        $('.box').mouseenter(function(){
            clearInterval(timer);
        })

        //鼠标移出自动轮播继续
        $('.box').mouseleave(function(){
            play();
        })

        play();//初始自动轮播；

    })

OK,这就是全部代码了，有兴趣的朋友可以试试，最后有其他更好办法的也要告诉我啊，大家要共同进步！！！

想成为一只喵

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片循环切换播放

轮播图片效果序言：写网页的时候会遇到很多需要轮播图的效果，不难，引用个插件就好了吗，简单方便，但是看到人家写出来的循环切换效果就想自己也琢磨琢磨是否能实现，那现在既然在这写了这篇文章，那肯定是实现了呀，虽然距离插件的效果还有一定距离，但是功能都实现了，也只是给大家提供个思路。我用的是面向过程的方式写的，基于jquery.我先放一下我的结构代码：<body> <div class="box">
复制链接

扫一扫