javascript焦点图自动缓冲滚动

html中调用的js库，之前的随笔中有写，就不细说了，不明白的可以留言给我

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Document</title>
  7     <style type="text/css">
  8         * {
  9             margin: 0;
 10             padding: 0;
 11             font-size: 12px;
 12         }
 13         
 14         #ptoDiv {
 15             width: 400px;
 16             height: 200px;
 17             margin: 50px auto 0;
 18             position: relative;
 19             overflow: hidden;
 20         }
 21         
 22         #ptoBox {
 23             width: 1600px;
 24             height: 200px;
 25             position: absolute;
 26             left: 0;
 27         }
 28         
 29         #pto {
 30             list-style-type: none;
 31         }
 32         
 33         .base {
 34             width: 400px;
 35             height: 200px;
 36             float: left;
 37         }
 38         
 39         .base1 {
 40             background: red;
 41         }
 42         
 43         .base2 {
 44             background: blue;
 45         }
 46         
 47         .base3 {
 48             background: pink;
 49         }
 50         
 51         .base4 {
 52             background: green;
 53         }
 54         
 55         #btn1 {
 56             position: absolute;
 57             width: 30px;
 58             height: 30px;
 59             background: yellow;
 60             top: 85px;
 61             left: 0;
 62             opacity: 0.5;
 63             filter: alpha(opacity=50);
 64             cursor: pointer;
 65         }
 66         
 67         #btn2 {
 68             position: absolute;
 69             width: 30px;
 70             height: 30px;
 71             background: yellow;
 72             top: 85px;
 73             right: 0;
 74             opacity: 0.5;
 75             filter: alpha(opacity=50);
 76             cursor: pointer;
 77         }
 78         
 79         #cirBox {
 80             width: 80px;
 81             height: 16px;
 82             position: absolute;
 83             top: 160px;
 84             left: 160px;
 85         }
 86         /*16*4+4*4*/
 87         
 88         #cir {
 89             list-style-type: none;
 90             position: relative;
 91         }
 92         
 93         #cir li {
 94             float: left;
 95             width: 16px;
 96             height: 16px;
 97             margin: 0 2px;
 98             background: white;
 99         }
100         
101         #cir .on {
102             width: 16px;
103             height: 16px;
104             background: yellow;
105         }
106     </style>
107     <script src="changfunction.js"></script>
108     //这里是引用之前写的js库,方便一些
109 </head>
110 
111 <body>
112     <div id="ptoDiv">
113         <div id="ptoBox">
114             <ul id="pto">
115                 <li class="base base1">one</li>
116                 <li class="base base2">two</li>
117                 <li class="base base3">three</li>
118                 <li class="base base4">four</li>
119             </ul>
120         </div>
121 
122         <span id="btn1"></span>
123         <span id="btn2"></span>
124 
125         <div id="cirBox">
126             <ul id="cir">
127                 <li class="on"></li>
128                 <li></li>
129                 <li></li>
130                 <li></li>
131 
132             </ul>
133         </div>
134     </div>
135 </body>
136 
137 </html>

下面是js代码

<script>
        function $(id) {
            return typeof id === "string" ? document.getElementById(id) : id;
        }
        window.onload = function() {
            //定义两个按钮
            var btnLeft = $("btn1");
            var btnRight = $("btn2");
            //pto为定义的图片集和
            var pto = $("pto").getElementsByTagName("li");
            //ptoBox为定义图片所在的div
            var ptoBox = $("ptoBox");
            //cir为小框对应的集合
            var cir = $("cir").getElementsByTagName("li");
            //定义一个定时器
            var timer = null;
            //Div为定义最外层的div
            var Div = $("ptoDiv");
            //设置一个全局变量用来控制图片和小框的移动
            var index = 0;


            //这个for循环是为了控制当鼠标移动至小框后，显示和隐藏图片
            for (var i = 0; i < cir.length; i++) {
                //定义id为小框排序0~3
                cir[i].id = i;
                //鼠标移动至小框触发事件
                cir[i].onmouseenter = function() {
                    //隐藏小框
                    clearOn();
                    //显示小框
                    showOn(this.id);
                    //滚动至小框对应的图片
                    changeBtn(ptoBox, {
                        left: (-400 * this.id)
                    });
                }
            }

            //这两队onmouseenter和onmouseleave为按钮的透明度变化
            btnLeft.onmouseenter = function() {
                changeBtn(btnLeft, {
                    opacity: 100
                });
            }

            btnLeft.onmouseleave = function() {
                changeBtn(btnLeft, {
                    opacity: 50
                });
            }

            btnRight.onmouseenter = function() {
                changeBtn(btnRight, {
                    opacity: 100
                });
            }

            btnRight.onmouseleave = function() {
                changeBtn(btnRight, {
                    opacity: 50
                });
            }

            //右按钮绑定鼠标点击事件
            btnRight.onclick = function() {
                    //设置图片右滚循环
                    //原理就不细说了，以前的随笔里有解释
                    if (index < pto.length - 1) {
                        index++;
                    } else {
                        index = 0;
                    }
                    //调用函数，用于每一张图片的滚动
                    changeBtn(ptoBox, {
                        left: (-400 * index)
                    });
                    //隐藏小框
                    clearOn();
                    //显示小框
                    showOn(index);
                }
                //左按钮绑定鼠标点击事件
            btnLeft.onclick = function() {
                //图片左移判定，原理不多说看以前的随笔
                if (index == 0) {
                    index = pto.length - 1;
                } else {
                    index--;
                }
                changeBtn(ptoBox, {
                    left: (-400 * index)
                });
                clearOn();
                showOn(index);

            }

            //隐藏函数
            function clearOn() {
                for (var i = 0; i < cir.length; i++) {
                    cir[i].className = "";
                }
            }

            //显示函数
            function showOn(x) {
                for (var i = 0; i < cir.length; i++) {
                    if (i == x) {
                        cir[i].className = "on";
                    }
                    index = x;
                }
            }

            //定义函数用于设置定时器
            function start() {
                timer = setInterval(function() {
                    btnRight.onclick();
                }, 3000);

            }

            //定义函数用于清除定时器
            function stop() {
                clearInterval(timer);
            }

            //当鼠标进入，则停止
            Div.onmouseenter = stop;
            //当鼠标离开，则开始
            Div.onmouseleave = start;

            //当进入页面就开始执行循环
            start();
        }
    </script>

 

posted @ 2016-11-10 14:52  rookieM  阅读(514)  评论(0)  编辑  收藏  举报