當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
javascript焦点图(根据图片下方的小框自动播放)
生活随笔
收集整理的這篇文章主要介紹了
javascript焦点图(根据图片下方的小框自动播放)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
html和css就不詳細(xì)說(shuō)明了,也是簡(jiǎn)單布局,通過(guò)定位把跟隨圖片的小框,定位到圖片下方
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>下面是javacript部分
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 //定義一個(gè)span標(biāo)簽的集合cirBtn 8 var cirBtn = $("circleBtn").getElementsByTagName("span"); 9 //定義一個(gè)全局變量 10 var index = 0; 11 //定義一個(gè)setInterval方法cirTimer 12 var cirTimer = null; 13 14 for (var i = 0; i < cirBtn.length; i++) { 15 //給圖片加上id=0,1,2 16 cirBtn[i].id = i; 17 //鼠標(biāo)移動(dòng)邦定觸發(fā)事件:顯示當(dāng)前id對(duì)應(yīng)的圖片 18 cirBtn[i].onmouseenter = function() { 19 //先停止自動(dòng)循環(huán) 20 clearInterval(cirTimer); 21 //隱藏圖片和小框 22 clearBtn(); 23 //顯示當(dāng)前id對(duì)應(yīng)的圖片和小框 24 showBtn(this.id); 25 } 26 //鼠標(biāo)離開(kāi)觸發(fā)事件:自動(dòng)循環(huán) 27 cirBtn[i].onmouseout = function() { 28 cirTimer = setInterval(autoPlay, 2000); 29 } 30 } 31 //設(shè)置當(dāng)前只有一個(gè)定時(shí)器cirTimer 32 if (cirTimer) { 33 clearInterval(cirTimer); 34 cirTimer = null; 35 } 36 37 cirTimer = setInterval(autoPlay, 2000); 38 39 //自動(dòng)循環(huán)函數(shù) 40 function autoPlay() { 41 //當(dāng)index小于2則++,否則就是超過(guò)長(zhǎng)度,則歸0即index=0 42 if (index < cirBtn.length - 1) { 43 index++; 44 } else { 45 index = 0; 46 } 47 //console.log(index); 48 //清除函數(shù) 49 clearBtn(); 50 //顯示函數(shù) 51 showBtn(index); 52 } 53 54 //定義一個(gè)隱藏圖片和小框的函數(shù) 55 function clearBtn() { 56 for (var i = 0; i < cirBtn.length; i++) { 57 58 cirBtn[i].className = ""; 59 pto[i].style.display = "none"; 60 } 61 } 62 //定義一個(gè)顯示當(dāng)前id對(duì)應(yīng)的圖片和小框的函數(shù) 63 function showBtn(x) { 64 for (var i = 0; i < cirBtn.length; i++) { 65 console.log(x); 66 if (i == x) { 67 cirBtn[i].className = "light"; 68 pto[i].style.display = "block"; 69 } 70 //這里重要了.這里把x賦值給index是為了讓循環(huán)從停止的id重新開(kāi)始循環(huán) 71 index = x; 72 } 73 } 74 75 }?
轉(zhuǎn)載于:https://www.cnblogs.com/WhiteM/p/6003946.html
總結(jié)
以上是生活随笔為你收集整理的javascript焦点图(根据图片下方的小框自动播放)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： [ZPG TEST 109] 兔子跳跃【
- 下一篇： 圣杯布局简单结构代码!