QQ截图20180825190050.png

效果图在上面
小demo的坑:

图一共是5张,但是如果用计时器往左偏移的话,偏移到一定程度的时候,偏移位会归零,归零的瞬间会变图,
突然切换的图片会显得很生硬,所以再图片末尾再加上前2张图片,让滚动更流畅。

用到的主要技巧就是,计时器的技巧,还有就是jq的siblings()获取非当前的这个方法在触摸图层会很重要。

fadeTo方法也是非常重要的,传递2个参数,第一个是时间,第二个就是透明度,透明度我们选择了0.5,然后
ul的背景是黑色的,所以呈现出来的就是类似于黑色蒙版的东西。

源码附带:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无限循环滚动轮播</title>
<script src="jquery-3.0.0.js"></script>
<style>
     *{
         margin: 0;
         padding: 0;
     }
     div{
         /* 图片一张是590 */
         width: 1180px;
         height: 470px;
         border: 1px solid black;
         margin: 100px auto;
         overflow: hidden;
     }
     ul{
        /* ul要存放7张图片,所以宽度要乘五 */
         width:4130px;
         height: 470px;
         list-style: none;
         background: black;
     }
     li{
         float: left;
     }
</style>

</head>
<body>

<!-- 思路 -->
<!-- 准备一个div -->
<div>
    <!-- div作为外面最大的容器 -->
    <!-- 图片放在ul中跟随移动 -->
    <ul>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
        <li><img src="5.jpg" alt=""></li>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
    </ul>
</div>
<script>
    var off=0;
    var timer;
        //jq代码让图片轮播
        $(function(){
            //设置变量获取偏移
            //调用自动播放的方法
            autoplay();
            //监听鼠标
            listen();
        });
        /*将计时器方法单独定义*/
        function autoplay(){
            timer=setInterval(function(){
                //进入定时器让off自减,向左走
                off+=-1;
                //判断,如果经过5张以后循环
                if(off<=-2950){
                    off=0;
                }
                 //获取ul
                 $('ul').css({
                     'marginLeft':off
                 });
            },10);
        }
        function listen(){
            $('li').hover(function(){
                //移入
                //移入之后给非当前选中的添加蒙版
                //移入停止滚动
                clearInterval(timer);
                //fadeto方法,设置动画透明度.ul背景是黑色的,li透明就是黑色朦胧感觉
                $(this).siblings().fadeTo(100,0.5);
                //选中当前要去除自身的蒙版
                $(this).fadeTo(100,1);
            },function(){
                //移出
                //继续滚动,调用方法
                autoplay();
                // 去除所有的蒙版
                $('li').fadeTo(100,1);
            })
        }
</script>

</body>
</html>

标签: none

添加新评论