JS-京东首页轮播图的实现

由前端开发者 · 发布于 2018年11月6日12:45:52 · 更新于 2018年11月6日15:09:16

摘要：xml 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>京东首页</title> <style type="text/css">……

xml 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a>> <head> <meta charset="UTF-8"> <title>京东首页</title> <style type="text/<a href="https://www.rokub.com/category/css" title="css">css</a>"> * { margin: 0; padding: 0; } #wrap { width: 500px; height: 380px; border: 3px solid black; margin: 100px auto; /*po*/ position: relative; } #wrap img { width: 500px; height: 380px; position: absolute; /*o0*/ opacity: 0; /*过渡*/ -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } #wrap img:first-child { /*o1*/ opacity: 1; } #left,#right { width: 50px; height: 90px; background-color: gray; color: white; position: absolute; /*lh90*/ line-height: 90px; top: 50%; margin-top: -45px; } #left { left: 0; } #right { right: 0; } #ul1 { /*lstn*/ list-style-type: none; position: absolute; bottom: 30px; left: 50%; margin-left: -75px; } #ul1 li { background-color: gray; width: 20px; height: 20px; border-radius: 50%; /*fl*/ float: left; margin-left: 5px; line-height: 20px; /*tac*/ text-align: center; color: white; } #ul1 li:first-child { background-color: red; } </style> </head> <body> <div id="wrap"> <!–图片–> <img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=8c3abdbfc5bb011953ebab6e33484e2e" alt="" /> <img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=d9d4d51d2af370c53cb1d482a7f7589e" alt="" /> <img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=12af83edf2accc357141b6cb619c01b1" alt="" /> <img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=600dc5fd8c295f95d4d7f716f7ce2939" alt="" /> <img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=4907e4596459abe53be2103a029a2327" alt="" /> <img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=8f002abe18ea06df90dd14d91d82fef7" alt="" /> <!–分页–> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <!–上下翻页–> <div id="left">上一张</div> <div id="right">下一张</div> </div> <script type="text/javascript"> //获取对象 var wrap = document.getElementById("wrap"); var imgs = wrap.getElementsByTagName("img"); var left = document.getElementById("left"); var right = document.getElementById("right"); var ul1 = document.getElementById("ul1"); var lis = ul1.getElementsByTagName("li"); var index = 0;//记录图片所在的下标位置 //上一张按钮的点击事件 left.onclick = function () { //第一种方式: // index–; // if (index == -1) { // index = 5; // } // // //设置当前下标对应的图片,透明度为1,其它图片设置为0; // for (var i = 0;i < imgs.length;i++) { // if (index == i) { // imgs[i].style.opacity = 1; // } else{ // imgs[i].style.opacity = 0; // } // } //第二种方式: //将之前显示的图片隐藏 imgs[index].style.opacity = 0; index–; if (index == -1) { index = 5; } //将切换之后的图片显示 imgs[index].style.opacity = 1; //改变分页数圆点的位置 changePoint(); } // 下一张的点击事件 right.onclick = function () { //让上一张图片隐藏 imgs[index].style.opacity = 0; index++; if (index == 6) { index = 0; } //显示当前图片 imgs[index].style.opacity = 1; //改变分页数圆点的位置 changePoint(); } //切换界面(分页数) 圆点的位置 function changePoint () { for (var i = 0;i < lis.length;i++) { //找到图片下标对应的分页小圆点 if (index == i) { //图片对应的分页设置背景色红色 lis[i].style.backgroundColor = "red"; } else{ //其它为灰色 lis[i].style.backgroundColor = "gray"; } } } //为圆点添加鼠标移入事件 for (var i = 0;i < lis.length;i++) { //鼠标移入事件 lis[i].onmouseenter = function () { imgs[index].style.opacity = 0; for (var j = 0;j < lis.length;j++) { //找到移入当前圆点对应的下标 if (this == lis[j]) { index = j; //找到对应图片的下标 } } //显示圆点对应的图片 imgs[index].style.opacity = 1; //改变分页数圆点的位置 changePoint(); } } //定时器改变图片以及圆点位置 function changeImage () { imgs[index].style.opacity = 0;//隐藏之前的图片 index++; if (index == 6) { index = 0; } //显示切换之后的图片 imgs[index].style.opacity = 1; //改变分页数圆点的位置 changePoint() } //添加定时器 //var timer = setInterval(changeImage,1000); //或者 var timer = setInterval("changeImage()",1000); //鼠标移入图片时,清除定时器 wrap.onmouseenter = function () { //清除定时器 clearInterval(timer); } //鼠标移出,开启新的定时器 wrap.onmouseleave = function () { timer = setInterval("changeImage()",1000); } </script> </body> </html>

» 本文来自：前端开发者 » 《JS-京东首页轮播图的实现》

» 本文链接地址：https://www.rokub.com/8835.html

» 您也可以订阅本站：https://www.rokub.com