首页 > 代码库 > javascript焦点图左右按钮简单自动轮播

javascript焦点图左右按钮简单自动轮播

2024-08-17 22:36:52   221人阅读

这里把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焦点图左右按钮简单自动轮播


联系
我们