图片自动轮播及点击图标切换图片
Posted 黑土白云
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片自动轮播及点击图标切换图片相关的知识，希望对你有一定的参考价值。
本案例两个功能: 第一,默认是自动图片轮播; 第二,hover到图片下面的不同数字,切换到数字对应的图片, 鼠标移出数字,动画从当前位置开始继续循环播放
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #d{position: relative;top: -30px;} label{margin: -5px;} .one{width: 10px;height: 10px;border: 1px solid black; background-color: red;} </style> <script> var n =0;//图片下标 label下标 var t=0;// 清除动画用 function init(){ //1.默认进来自动播放轮播图 switchImgs(); //2. 当鼠标移入移出不同的label切换不同的图片. var img = document.getElementById("img"); var labels =document.getElementsByTagName("label");//拿到所有的label标签对象 for(var i=0;i<labels.length;i++){//给每个label标签注册一个hover事件 labels[i].onmouseover=function(){ clearTimeout(t);//停止动画 var b= this.innerText*1;//拿到标签上的数字 img.src="images/photo_0"+b+".jpg";//显示对应的图片 clearStyle();//清除label上的样式 this.className="one";//让当前的label的样式变化 } labels[i].onmouseout=function(){//鼠标移出动画开始,动画从当前的图片开始动画 n=this.innerText*1;//获取当前label上的数字并转换成整型 switchImgs(); } } } //默认动画,图片轮播,每个1秒切换 function switchImgs(){ n++; if(n==7){n=1;}//到达末尾的时候跳转到第一张 var img = document.getElementById("img"); img.src="images/photo_0"+n+".jpg"; clearStyle();//当图片到第二张的时候,要把label1的样式清除, document.getElementById("i"+n).className="one"; t=setTimeout("switchImgs()",1000); } //清除label的所有的样式 function clearStyle(){ var labels= document.getElementsByTagName("label"); for(var i=0;i<labels.length;i++){ labels[i].className="";//让label表的classname置为空 } } </script> </head> <body onload="init()"> <div align="center"> <img src="images/photo_01.jpg" width="400" height="500" id="img"> <div id="d"> <label id="i1"> 1 </label> <label id="i2"> 2 </label> <label id="i3"> 3 </label> <label id="i4"> 4 </label> <label id="i5"> 5 </label> <label id="i6"> 6 </label> </div> </div> </body> </html>
以上是关于图片自动轮播及点击图标切换图片的主要内容，如果未能解决你的问题，请参考以下文章