<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css" /> <script type="text/javascript" src="js/index.js" ></script> </head> <body> <div id="container"> <div class="indicators"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="list" style="left: -440px"> <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/7.jpg" alt="1"> <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/3.jpg" alt="1"> <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/4.jpg" alt="2"> <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/5.jpg" alt="3"> <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/6.jpg" alt="4"> <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/7.jpg" alt="5"> <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/3.jpg" alt="5"> </div> <a href="javascript:;" class="arrow arrow_left"></a> <a href="javascript:;" class="arrow arrow_right"></a> </div> <div id="content"> <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/3.jpg" class="on"> <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/4.jpg" > <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/5.jpg" > <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/6.jpg" > <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/7.jpg" > </div> </body> </html>
/* css/index.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #00BCD4 no-repeat 0 100px; background-size: 1366px 768px; } #container { position: relative; width: 440px; height: 220px; margin: 50px auto 0 auto; overflow: hidden; border: 5px solid white; border-radius: 5px; } a { text-decoration: none; } .list img { float: left; width: 440px; height: 220px; } .list { position: absolute; width: 3080px; height: 220px; z-index: 1; } .indicators { position: absolute; left: 110px; width: 220px; height: auto; z-index: 2; } .indicators span { display: inline-block; width: 24px; height: 2px; margin: 0 5px; text-indent: -999px; cursor: pointer; /*光标呈现为指示链接的指针（一只手）*/ background-color: white; border: 1px solid #fff; } .indicators .active { border: 0; background-color: deepskyblue; } .arrow { position: absolute; top: 35%; color: green; z-index: 2; display: none; width: 22.5px; height: 33px; } .arrow_left { left: 10px; background-image: url(../img/prev.png); background-size: cover; } .arrow_right { right: 10px; background-image: url(../img/next.png); background-size: cover; } #container:hover .arrow { display: block; } .arrow:hover { background-color: rgba(255, 255, 255, 0.2); } #content { position: relative; margin: 50px auto 0 auto; width: 600px; height: 110px; } #content img { width: 110px; height: 55px; margin-top: 27.5px; opacity: 0.6; border: 3px solid white; } #content img:nth-of-type(1) { transform: rotateZ(-30deg); } #content img:nth-of-type(2) { transform: rotateZ(-15deg); } #content img:nth-of-type(3) { transform: rotateZ(30deg); } #content img:nth-of-type(4) { transform: rotateZ(-30deg); } #content img:nth-of-type(5) { transform: rotateZ(-15deg); } #content .on { opacity: 1; }
// js/index.js window.onload = function() { var timer = setInterval(function() { next_pic(); }, 1000); function autoPlay() { timer = setInterval(function() { next_pic(); }, 1000); } var index = 0; var dots = document.getElementsByTagName("span"); var imgs = document.getElementById("content").getElementsByTagName("img"); function showCurrentDot() { for(var i = 0, len = dots.length; i < len; i++) { dots[i].className = ""; imgs[i].className = ""; } dots[index].className = "active"; imgs[index].className = "on"; } var wrap = document.getElementsByClassName("list")[0]; var next = document.getElementsByClassName("arrow_right")[0]; var prev = document.getElementsByClassName("arrow_left")[0]; var container = document.getElementById("container"); var content = document.getElementById("content"); content.onmouseenter = function() { clearInterval(timer); } content.onmouseleave = function() { autoPlay(); } container.onmouseenter = function() { clearInterval(timer); } container.onmouseleave = function() { autoPlay(); } next.onclick = function() { next_pic(); console.log("点击") } prev.onclick = function() { prev_pic(); } function next_pic() { var newLeft; if(wrap.style.left === "-2640px") { newLeft = -880; } else { newLeft = parseInt(wrap.style.left) - 440; } wrap.style.left = newLeft + "px"; index++; if(index > 4) { index = 0; } showCurrentDot(); } function prev_pic() { var newLeft; if(wrap.style.left === "0px") { newLeft = -1760; } else { newLeft = parseInt(wrap.style.left) + 440; } wrap.style.left = newLeft + "px"; index--; if(index < 0) { index = 4; } showCurrentDot(); } for(var i = 0, len = dots.length; i < len; i++) { (function(i) { dots[i].onmouseover = function() { var dis = index - i; if(index == 4 && parseInt(wrap.style.left) !== -2200) { dis = dis - 5; } //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可 if(index == 0 && parseInt(wrap.style.left) !== -440) { dis = 5 + dis; } wrap.style.left = (parseInt(wrap.style.left) + dis * 440) + "px"; index = i; showCurrentDot(); } imgs[i].onmouseover =function(){ var dis = index - i; if(index == 4 && parseInt(wrap.style.left) !== -2200) { dis = dis - 5; } //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可 if(index == 0 && parseInt(wrap.style.left) !== -440) { dis = 5 + dis; } wrap.style.left = (parseInt(wrap.style.left) + dis * 440) + "px"; index = i; showCurrentDot(); } })(i); } };