首页 > 代码库 > 图片轮播(也可以通过点击下标播放对应的图片)
图片轮播(也可以通过点击下标播放对应的图片)
javaScript学习总结——图片轮播
示例代码:
<html> <head> <!--http://www.jb51.net/article/64662.htm --> <style type="text/css"> body{ margin:0px; <!--这两句必写,避免在不同浏览器中显示时发生错位--> padding:0px; } img{ width:320px;height:200px;} ul li{ list-style:none; float:left; padding:5px; margin-right:5px; border:1px solid gray; } ul{ position:relative; margin-right:10px; margin-top:20px; } .dq{ background-color:red; color:white; } </style> </head> <body> <div id="imglunbo"> <img id="imgDemo" src= "1.jpg"/> </div> <script> //把数字弄出来 var imgs = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]; //依据图片数组的数量,创建一个ul。里面包含数组数量的li function createImageNums(){ var myul = document.createElement("ul"); for(var i=1;i <= imgs.length;i++){ var myli = document.createElement("li"); var mynum = document.createTextNode(i); if(i==1){ myli.setAttribute("class","dq"); } myul.appendChild(myli); myli.appendChild(mynum); //因为要实现点击li时,理解切换 //所以这里给li添加了一个onclick单击事件 myli.onclick = qiehuan; } var imglunbo = document.getElementById("imglunbo"); imglunbo.appendChild(myul); } //createImageNums end createImageNums(); //自动切换图片 var currentIndex = 0;//当前的图片在数组中的索引值 function changeImg(){ var myimg = document.getElementById("imgDemo"); myimg.src = imgs[currentIndex]; changestyle(currentIndex); currentIndex++; //因为不断增加会导致索引越界,所以需要归0 if(currentIndex==imgs.length){ currentIndex = 0; } } function changestyle(num){ var allli=document.getElementsByTagName("li"); for(var i=0;i<allli.length;i++){ allli[i].setAttribute("class",""); } allli[num].setAttribute("class","dq"); } var autoChange = setInterval(changeImg,3000); //3.点击数字时,立即切换图片 // 切换成功之后,自动切换图片的功能还能生效 function qiehuan(){ //假定10秒自动,此时刚切换图片之后 //过了3秒,如果点击数字切换,不清掉定时器 //就会导致7秒之后又自动切换 clearInterval(autoChange); var clickedNum = parseInt(this.innerText); currentIndex = clickedNum-1; console.log(currentIndex); changeImg(); autoChange = setInterval(changeImg,3000); } </script> </body> </html>
运行结果:
图片轮播(也可以通过点击下标播放对应的图片)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。