JS 轮播图
程序员文章站
2022-04-11 18:17:50
JS轮播图 ......
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("http://imgsrc.baidu.com/forum/pic/item/9e3df8dcd100baa1436c441e4710b912c9fc2ed6.jpg"); } /*左右箭头*/ #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('http://imgsrc.baidu.com/forum/pic/item/9e3df8dcd100baa1436c441e4710b912c9fc2ed6.jpg')"; img2 = "url('http://www.datongchun.com/upload/image/20150817101824_89175.jpg')"; img3 = "url('http://img2.imgtn.bdimg.com/it/u=1563165482,1097507544&fm=214&gp=0.jpg')"; img4 = "url('http://hiphotos.baidu.com/%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) { // 清除所有圆点的背景色 clearlibc(); switch (index) { case 1: div_img.style.backgroundimage = img1; // 只给当前图片对应的圆点设置背景色 li_dot[0].style.backgroundcolor = "darkseagreen"; break; case 2: div_img.style.backgroundimage = img2; li_dot[1].style.backgroundcolor = "darkseagreen"; break; case 3: div_img.style.backgroundimage = img3; li_dot[2].style.backgroundcolor = "darkseagreen"; break; case 4: div_img.style.backgroundimage = img4; li_dot[3].style.backgroundcolor = "darkseagreen"; break; } } </script> </body> </html>