标签：tag cti rap border 图片轮播 click wrap lin bottom
秃头警告！！终于图片轮播用原生的JS又写出了一遍，真的麻烦
很多都没有封装，后续再说吧
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片轮播</title> <style type="text/css"> .wrap{width:1000px; margin:0 auto; height: 480px; overflow: hidden; position: relative;text-align: center;} li{list-style: none; display: inline-block; width:30px; height: 30px; border:1px solid red; text-align: center; line-height: 30px; background-color: orange; margin-left: 5px;} .num_list{position: absolute; bottom: 20px; left: 10%;} .img_continer img{display: none;} .img_continer .img_dis{display: inline-block;} .le, .ri{font-size: 100px; font-weight: bold; color:red; position: absolute;} .le{top:30%; left: 0;} .ri{top:30%; right:0;} </style> </head> <body> <div class="wrap"> <div class="img_continer"> <img src="imgs/big_5.jpg"> <img src="imgs/big_7.jpg"> <img src="imgs/big_8.jpg"> </div> <div class="num_list"> <ul></ul> </div> <div class="le_ri"> <span class="le"><</span> <span class="ri">></span> </div> </div> <script type="text/javascript"> //获取图片 img_num = document.getElementsByClassName(‘img_continer‘)[0]; img_list = img_num.getElementsByTagName("img"); img_len = img_list.length; var str =""; for(var i=0; i<img_len;i++){ str += "<li>"+ (i+1) +"</li>" }; //获取数字，根据图片的个数增数字 ul_list = document.getElementsByClassName(‘num_list‘)[0].getElementsByTagName(‘ul‘)[0]; ul_list.innerHTML = str; //获取数字的列表 li_list = ul_list.getElementsByTagName("li"); var current =0; img_list[current].setAttribute("class",‘img_dis‘); for(let i=0; i<li_list.length;i++){ // console.log(li_list[i].innerHTML); li_list[i].onclick = function(){ current = i; for(let j=0;j<li_list.length;j++){ if(i!=j){img_list[j].setAttribute("class",‘‘);}; }; img_list[current].setAttribute("class",‘img_dis‘); }; }; //图片自动轮播 //为了方便，后期可以封装成一个函数 function lets(){ for(let i=0; i<li_list.length;i++){ if(i != current){img_list[i].setAttribute("class",‘‘);}; }; if(current>2){ current = 0; } }; se = setInterval(function(){ current ++; lets(); img_list[current].setAttribute("class",‘img_dis‘); },2000); for(let s = 0;s<li_list.length;s++){ img_list[s].onmouseover = function(){ clearInterval(se); }; img_list[s].onmouseout = function(){ se = setInterval(function(){ current ++; for(let i=0; i<li_list.length;i++){ if(i != current){img_list[i].setAttribute("class",‘‘);}; }; if(current>2){ current = 0; } img_list[current].setAttribute("class",‘img_dis‘); },5000); } } //左右两边的控制按钮 var leControl = document.getElementsByClassName("le")[0]; var riControl = document.getElementsByClassName("ri")[0]; leControl.onclick = function(){ current ++; lets(); img_list[current].setAttribute("class",‘img_dis‘); }; riControl.onclick = function(){ current ++; lets(); img_list[current].setAttribute("class",‘img_dis‘); }; </script> </body> </html>
标签：tag cti rap border 图片轮播 click wrap lin bottom
原文地址：https://www.cnblogs.com/0422hao/p/11795860.html
