当前位置：首页 > Web开发 > 正文

JS 轮播图

2024-03-31 Web开发

标签：

JS轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS轮播图</title> </head> <style> * { margin: 0; padding: 0; } li { list-style: none; } #center { width: 800px; height: 600px; margin: auto; background-color: black; background-image: url(""); } /*左右箭头*/ #ul1 { position: relative; top: 40%; } #ul1 li { font-size: 80px; color: white; } /*四个点*/ #ul2 { position: relative; top: 92%; } #ul2 li { width: 20px; height: 20px; border: 3px slateblue solid; /*透明度*/ opacity: 0.7; /*将li的边框设置为圆*/ border-radius: 50%; float: left; margin-left: 10px; position: relative; left: 30%; } #ul1 li:hover { color: aqua; } #ul2 li:hover { background-color: darkseagreen; } </style> <body> <div id="center"> <ul id="ul1">  <li><span style="float:left" onclick="previous()"><</span></li> <li><span style="float: right" onclick="next()">></span></li> </ul> <ul id="ul2"> <li class="li_dot" style="background-color: darkseagreen;"></li> <li class="li_dot"></li> <li class="li_dot"></li> <li class="li_dot"></li> </ul> </div> <script type="text/javascript"> img1 = "url('')"; img2 = "url('')"; img3 = "url('=1563165482,1097507544&fm=214&gp=0.jpg')"; img4 = "url('%D4%C6%C8%B8%B5%C4%B3%E7%B0%DD%D5%DF/pic/item/c6ba270b9a23e670e9248891.jpg')"; // 定时器，，每两秒播放一次 setInterval(next,2000); // 计算图片索引 var count = 1; //获取圆点 var li_dot = document.getElementsByClassName("li_dot"); //鼠标悬停在对应圆点时，显示对应的图片 li_dot[0].onmouseenter = function () {count=1;show(count)}; li_dot[1].onmouseenter = function () {count=2;show(count)}; li_dot[2].onmouseenter = function () {count=3;show(count)}; li_dot[3].onmouseenter = function () {count=4;show(count)}; //获取图片div var div_img = document.getElementById("center"); //下一张 function next() { count += 1; if (count > 4) { count = 1; } show(count); } // 上一张 function previous() { count -= 1; if (count < 1) { count = 4 } show(count); } //清除所有圆点的背景颜色 function clearLiBC() { for(i=0;i<=3;i++){ //背景颜色透明 li_dot[i].style.backgroundColor="transparent"; } } // 显示对应索引的图 function show(index) { switch (index) { case 1: div_img.style.backgroundImage = img1; // 清除所有圆点的背景色 clearLiBC(); // 只给当前图片对应的圆点设置背景色 li_dot[0].style.backgroundColor = "darkseagreen"; break; case 2: div_img.style.backgroundImage = img2; clearLiBC(); li_dot[1].style.backgroundColor = "darkseagreen"; break; case 3: div_img.style.backgroundImage = img3; clearLiBC(); li_dot[2].style.backgroundColor = "darkseagreen"; break; case 4: div_img.style.backgroundImage = img4; clearLiBC(); li_dot[3].style.backgroundColor = "darkseagreen"; break; } } </script> </body> </html>

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/40287.html

JS 轮播图

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢