javascript焦点图左右按钮简单自动轮播
Posted rookieM的小黑屋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript焦点图左右按钮简单自动轮播相关的知识，希望对你有一定的参考价值。
这里把css和html合在一块写了，这块代码只是布局和样式不是重点
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 .photo { 15 width: 400px; 16 height: 200px; 17 margin: 50px; 18 position: relative; 19 } 20 21 .main { 22 width: 400px; 23 height: 200px; 24 position: relative; 25 } 26 27 .main1 li { 28 width: 400px; 29 height: 200px; 30 list-style-type: none; 31 } 32 33 .pto { 34 position: absolute; 35 left: 0; 36 top: 0; 37 } 38 39 .pto1 { 40 width: 400px; 41 height: 200px; 42 background: red; 43 } 44 45 .pto2 { 46 width: 400px; 47 height: 200px; 48 background: pink; 49 display: none; 50 } 51 52 .pto3 { 53 width: 400px; 54 height: 200px; 55 background: blue; 56 display: none; 57 } 58 59 .btn { 60 width: 30px; 61 height: 30px; 62 position: absolute; 63 } 64 65 .btn1 { 66 left: 0; 67 top: 85px; 68 background: url("img/left.png"); 69 } 70 71 .btn2 { 72 right: 0; 73 top: 85px; 74 background: url("img/right.png"); 75 } 76 77 .circleBtn { 78 position: absolute; 79 top: 170px; 80 right: 182px; 81 width: 42px; 82 height: 10px; 83 zoom: 1; 84 } 85 86 .circleBtn span { 87 width: 10px; 88 height: 10px; 89 margin: 0 2px; 90 float: left; 91 cursor: pointer; 92 background: url("img/cir.png"); 93 } 94 95 .circleBtn .light { 96 background: url("img/oncir.gif"); 97 } 98 </style> 99 <script type="text/javascript" src="jiaodiantujs.js"> 100 </script> 101 102 </head> 103 104 <body> 105 <div class="photo" id="main"> 106 <div class="main"> 107 <ul class="main1" id="amain"> 108 <li class="pto pto1">one</li> 109 <li class="pto pto2">two</li> 110 <li class="pto pto3">three</li> 111 </ul> 112 </div> 113 114 <span class="btn btn1" id="btn1"></span> 115 <span class="btn btn2" id="btn2"></span> 116 <!-- 117 <div class="circleBtn" id="circleBtn"> 118 <span class="light"></span> 119 <span></span> 120 <span></span> 121 </div> 122 --> 123 </div> 124 </body> 125 126 </html>
下面是Javascript代码，主要是通过左右两个按钮来控制图片左右切换
1 function $(id) { 2 return typeof id === "string" ? document.getElementById(id) : id; 3 } 4 window.onload = function() { 5 //pto变量为所展示的图片集和 6 var pto = $("amain").getElementsByTagName("li"); 7 //btnleft和right为两个按钮 8 var btnleft = $("btn1"); 9 var btnright = $("btn2"); 10 //div变量为设置停止图片显示所需 11 var div = $("main"); 12 //idBtn为当前图片的id 13 var idBtn = 0; 14 //setInterval函数所需的函数名timer 15 var timer = null; 16 17 //自定义一个函数用于按钮变换 18 function changeBtn(one, two) { 19 one.style.background = two; 20 } 21 //鼠标移动至左按钮时，套用自定义函数 22 btnleft.onmouseenter = function() { 23 //this表示当前btnleft的背景 24 changeBtn(this, "url(img/onleft.gif) no-repeat"); 25 } 26 //鼠标离开至左按钮时，套用自定义函数 27 btnleft.onmouseout = function() { 28 //this同理 29 changeBtn(this, "url(img/left.png) no-repeat"); 30 } 31 //鼠标移动至右按钮时，套用自定义函数 32 btnright.onmouseenter = function() { 33 changeBtn(this, "url(img/onright.gif) no-repeat"); 34 } 35 //同理 36 btnright.onmouseout = function() { 37 changeBtn(this, "url(img/right.png) no-repeat"); 38 } 39 40 //clearPto函数表示隐藏图片 41 function clearPto() { 42 for (var i = 0; i < pto.length; i++) { 43 pto[i].style.display = "none"; 44 45 } 46 } 47 //showPto函数表示显示当前图片 48 function showPto(y) { 49 //局部变量y，为当前鼠标点击的id 50 for (var i = 0; i < pto.length; i++) { 51 //console.log(y); 52 //当点击的id和图片id，也就是y相等时候，显示图片 53 if (i == y) { 54 pto[i].style.display = "block"; 55 } 56 57 } 58 } 59 60 //鼠标左击绑定函数 61 btnleft.onclick = function() { 62 //当idBtn为0 ，左击则，下一张为2，所以把长度2 赋值给idBtn 63 if (idBtn == 0) { 64 idBtn = pto.length - 1; 65 } else { 66 //同理，当不为0时，所显示的为小于当前所以要-- 67 idBtn--; 68 } 69 //套用函数 70 clearPto(); 71 //if语句结束，把idBtn代入函数中 72 showPto(idBtn); 73 } 74 75 btnright.onclick = function() { 76 //当idBtn小于长度，则左右为下一张，所以idBtn++ 77 if (idBtn < pto.length - 1) { 78 idBtn++; 79 } else { 80 //超出长度，则下一张为0，所以把0赋值 81 idBtn = 0; 82 } 83 clearPto(); 84 showPto(idBtn); 85 } 86 //判断语句，设置当前只有一个timer函数执行 87 if (timer) { 88 clearInterval(timer); 89 timer = null; 90 } 91 //鼠标离开div，则执行函数 92 div.onmouseout = start; 93 //鼠标移到div，则停止自动轮播 94 div.onmouseover = stop; 95 start(); 96 97 //setInterval函数详情可以自行百度，不多解释 98 function start() { 99 timer = setInterval(function() { 100 btnright.onclick(); 101 }, 2000); 102 } 103 104 function stop() { 105 clearInterval(timer); 106 } 107 }
以上是关于javascript焦点图左右按钮简单自动轮播的主要内容，如果未能解决你的问题，请参考以下文章