javascript焦点图之缓冲滚动无缝切换

Posted 2020-08-19 rookieM的小黑屋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript焦点图之缓冲滚动无缝切换相关的知识，希望对你有一定的参考价值。

在用于实现无缝切换四张图，所以设置了6个图片就是 4，0，1，2，3，4，0

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        
        #ptoDiv {
            width: 400px;
            height: 200px;
            margin: 50px auto 0;
            position: relative;
            overflow: hidden;
        }
        
        #ptoBox {
            width: 2400px;
            height: 200px;
            position: absolute;
            left: -400px;
        }
        
        #pto {
            list-style-type: none;
        }
        
        .base {
            width: 400px;
            height: 200px;
            float: left;
        }
        
        .base1 {
            background: red;
        }
        
        .base2 {
            background: blue;
        }
        
        .base3 {
            background: pink;
        }
        
        .base4 {
            background: green;
        }
        
        #btn1 {
            position: absolute;
            width: 30px;
            height: 30px;
            background: yellow;
            top: 85px;
            left: 0;
            opacity: 0.5;
            filter: alpha(opacity=50);
            cursor: pointer;
        }
        
        #btn2 {
            position: absolute;
            width: 30px;
            height: 30px;
            background: yellow;
            top: 85px;
            right: 0;
            opacity: 0.5;
            filter: alpha(opacity=50);
            cursor: pointer;
        }
        
        #cirBox {
            width: 80px;
            height: 16px;
            position: absolute;
            top: 160px;
            left: 160px;
        }
        /*16*4+4*4*/
        
        #cir {
            list-style-type: none;
            position: relative;
        }
        
        #cir li {
            float: left;
            width: 16px;
            height: 16px;
            margin: 0 2px;
            background: white;
        }
        
        #cir .on {
            width: 16px;
            height: 16px;
            background: yellow;
        }
    </style>
    
</head>

<body>
    <div id="ptoDiv">
        <div id="ptoBox">
            <ul id="pto">
                <li class="base base4">four</li>
                <li class="base base1">one</li>
                <li class="base base2">two</li>
                <li class="base base3">three</li>
                <li class="base base4">four</li>
                <li class="base base1">one</li>
            </ul>
        </div>

        <span id="btn1"></span>
        <span id="btn2"></span>

        <div id="cirBox">
            <ul id="cir">
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>

            </ul>
        </div>
    </div>
</body>

</html>

  1 <script src="changfunction.js"></script>
  2 <script>
  3 function $(id) {
  4     return typeof id === "string" ? document.getElementById(id) : id;
  5 }
  6 window.onload = function() {
  7         var btnLeft = $("btn1");
  8         var btnRight = $("btn2");
  9         var pto = $("pto").getElementsByTagName("li");
 10         var ptoBox = $("ptoBox");
 11         var cir = $("cir").getElementsByTagName("li");
 12         var timer = null;
 13         var Div = $("ptoDiv");
 14         var index = 1;
 15         var length = 400;
 16 
 17         /*for (var i = 0; i < cir.length; i++) {
 18             cir[i].id = i;
 19             cir[i].onmouseenter = function() {
 20                 clearOn();
 21                 showOn(this.id);
 22                 changeBtn(ptoBox, {
 23                     left: (-400 * this.id)
 24                 });
 25             }
 26         }*/
 27 
 28         //两个btnLeft绑定事件，改变透明度
 29         btnLeft.onmouseenter = function() {
 30             changeBtn(btnLeft, {
 31                 opacity: 100
 32             });
 33         }
 34 
 35         btnLeft.onmouseleave = function() {
 36                 changeBtn(btnLeft, {
 37                     opacity: 50
 38                 });
 39             }
 40             //两个btnRight绑定事件，改变透明度
 41         btnRight.onmouseenter = function() {
 42             changeBtn(btnRight, {
 43                 opacity: 100
 44             });
 45         }
 46 
 47         btnRight.onmouseleave = function() {
 48             changeBtn(btnRight, {
 49                 opacity: 50
 50             });
 51         }
 52 
 53         //btnRight鼠标点击绑定事件
 54         btnRight.onclick = function() {
 55             console.log(index);
 56             //全局变量index为当前图片的序号
 57             if (index < pto.length - 1) {
 58                 //index不大于4时，则自增1
 59                 index++;
 60             } else {
 61                 //大于4，则index从第三张图片开始
 62                 index = 2;
 63                 ptoBox.style[‘left‘] = -400 + ‘px‘;
 64             }
 65             //调用函数(通过缓冲显示图片)
 66             changeBtn(ptoBox, {
 67                 left: (-400 * index)
 68             });
 69             //清除函数
 70             clearOn();
 71             //显示图片函数
 72             showOn(index);
 73         }
 74 
 75         //鼠标左键绑定事件，同理
 76         btnLeft.onclick = function() {
 77             if (index == 0) {
 78                 index = pto.length - 3;
 79                 ptoBox.style[‘left‘] = -1600 + ‘px‘;
 80             } else {
 81                 index--;
 82             }
 83             changeBtn(ptoBox, {
 84                 left: (-400 * index)
 85             });
 86             clearOn();
 87             showOn(index);
 88 
 89         }
 90 
 91         //清楚已经显示的小框
 92         function clearOn() {
 93             for (var i = 0; i < cir.length; i++) {
 94                 cir[i].className = "";
 95             }
 96         }
 97 
 98         //显示当前的小框
 99         function showOn(x) {
100             //因为框只有四个，所以需要做一个强制转换
101             //当x的值到达0和5的时候，重新给x赋值
102             if (x == 0) {
103                 x = 4;
104             }
105             if (x == 5) {
106                 x = 1;
107             }
108             for (var i = 0; i < cir.length; i++) {
109                 if (i == (x - 1)) {
110                     cir[i].className = "on";
111                 }
112 
113                 // index = x;
114             }
115         }
116 
117         //自动循环函数
118         function start() {
119             timer = setInterval(function() {
120                 btnRight.onclick();
121             }, 3000);
122 
123         }
124         //停止函数
125         function stop() {
126             clearInterval(timer);
127         }
128 
129         //当鼠标移动至div则停止
130         Div.onmouseenter = stop;
131         //当鼠标移出则开始
132         Div.onmouseleave = start;
133         //进入页面，则开始自动循环
134         start();
135     }
136     </script>

以上是关于javascript焦点图之缓冲滚动无缝切换的主要内容，如果未能解决你的问题，请参考以下文章

01.轮播图之四：imageViews（2 或者 3 个imageview）轮播

求javascript大神帮忙，怎么实现一个DIV连续滚动滚动的过程中定时停止?

焦点轮播图效果实现

轮播图采用jsjquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

vue无缝滚动插件左右切换按钮不显示

javascript实例学习之八——无缝切换效果