<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .pic{ width: 300px; height: 400px; background-color: #f1ffd6; margin: 0px auto; position: relative; } .pic span,.pic p{ position: absolute; background-color: #fffc9b; text-align: center; width: 100%; height: 20px; line-height: 20px; } .pic span{ top: 0px; } .pic p{ margin: 0px; padding: 0px; bottom: 0px; } .pic img{ position: absolute; width: 100%; height: 400px; } .pic ul{ list-style: none; position: absolute; left: 300px; } .pic ul li{ width: 20px; height: 20px; background-color: gray; margin-bottom: 10px; } .as{ background-color: orange!important; } </style> </head> <body> <div class="pic"> <img src="lunbo/image/1.jpg" alt=""/> <span>图片的数量</span> <p>图片的描述</p> <ul> </ul> </div> <script> var odiv = document.getElementsByClassName("pic")[0]; var oimg = odiv.getElementsByTagName("img")[0]; var ospan = odiv.getElementsByTagName("span")[0]; var op = odiv.getElementsByTagName("p")[0]; var oul = odiv.getElementsByTagName("ul")[0]; var liArr = oul.getElementsByTagName("li"); /*模拟数据库取出数据*/ var imgarr = ["lunbo/image/1.jpg","lunbo/image/2.jpg","lunbo/image/3.jpg","lunbo/image/4.jpg"]; var textArr =["图片1","图片2","图片3","图片4"]; /*根据图片动态生成按钮*/ var str=""; for(var i=0;i<imgarr.length;i++){ str+="<li></li>"; } oul.innerHTML = str; /*初始化*/ var num=0; function show(){ ospan.innerHTML = num+1+"/"+imgarr.length; op.innerHTML = textArr[num]; oimg.src=imgarr[num]; /*不知道上次点的那个按钮,所以就一次性把所有的样式都去掉。在选中某一个li增加样式*/ for(var k=0;k<imgarr.length;k++){ liArr[k].className = ""; } liArr[num].className = "as"; } show(); var time; function setint(){ time = setInterval(function(){ ++num; if(num==imgarr.length){ num=0; } show(); },2000) } setint(); /*动态给li绑定事件,控制num下标*/ for(var j=0;j<imgarr.length;j++){ liArr[j].setAttribute("index",j); liArr[j].onclick = function(){ num = parseInt(this.getAttribute("index")); clearInterval(time); show(); setint(); } } </script> </body> </html>
模拟简易图片轮播以及效果图
最新推荐文章于 2022-07-18 10:16:48 发布