directory
introduce
style
code
introduce
- When you call
- You can embed this thing using iframe
- It is necessary to set small width and height
- ok
style
code
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #adv { position: relative; display: flex; align-items: center; /* margin: 0 auto; min-width: 1300px; max-width: 1366px; height: 400px; } .arrow { position: absolute; height: 60px; width: 60px; border-radius: 50%; color: #000; text-align: center; line-height: 60px; font-size: 50px; background: #e5e5e5; filter: alpha(opacity=70); /*ie*/ opacity: .7; border: 0; z-index: 2; transition: all .5s; -moz-transition: all .5s; /* Firefox 4 */ -webkit-transition: all .5s; /* Safari and Chrome */ -o-transition: all.5s; /* Opera */ } .arrow:hover { filter: alpha(opacity=40); /*ie*/ opacity: .4; } #left { left: 0; } #right { right: 0; } #adv-img { width: 100%; height: 100%; overflow: hidden; position: relative; } #adv-img-ul { position: absolute; left: -100%; top: 0; width: 1000%; transition: all 1s linear; } #adv-img-ul li { float: left; width: 10%; } .num { position: absolute; height: 50px; width: 100%; top: 400px; text-align: center; z-index: 99; } .num ul { display: inline-block; } #adv-img-num li { float: left; margin: 0 20px 0 20px; color: #e5e5e5; cursor: pointer; } #adv-img-num .on { float: left; margin: 0 20px 0 20px; color: #85ace0; </style> </head> <body> <div id="adv"> <div id="arr"> <button class="arrow" id="left"> Id = "right" > - < / button > < / div > < div id = "adv - img" > < ul id = "adv - img - ul" style = "left: 0;" > <li><img src="images/1.jpg" width="100%"></li> <li><img src="images/2.jpg" width="100%"></li> <li><img src="images/3.jpg" width="100%"></li> <li><img src="images/4.jpg" width="100%"></li> <li><img src="images/5.jpg" Width = "100%" > < / li > < / ul > < / div > < div class = "num" > < ul id = "adv - img - num" > < li index = "1" class = "on" > "< / li > < li The index = "2" > "< / li > < li index =" 3 ">" < / li > < li index = "4" > "< / li > < li index =" 5 ">" < / li > < / ul > < / div > < / div > < / body > < script > var adv = document.getElementById("adv"); var imgUl = document.getElementById("adv-img-ul"); var right = document.getElementById("right"); var left = document.getElementById("left"); var button = document.getElementById("adv-img-num").children; var index = 1; Function animate(offset) {var newLeft = parseInt(imgul.style.left) + offset; If (newLeft < -400) {// go to the right imgul.style. left = 0 + '%'; } else if (newLeft > 0) {// to the left imgul.style. left = -400 + '%'; } else { imgUl.style.left = newLeft + '%'; }} var timer = null; function startImg() { if (timer) clearInterval(timer); timer = setInterval(function () { right.onclick(); }, 2000); } adv.onmouseover = function stopImg() { clearInterval(timer); } adv.onmouseout = function startImg() { if (timer) clearInterval(timer); timer = setInterval(function () { right.onclick(); }, 2000); } // I have to write two original to start? What's wrong with it? Function buttonShow() {for (var I = 0; i < button.length; i++) { if (button[i].className == 'on') { button[i].className = ''; } } button[index - 1].className = 'on'; } left.onclick = function () { index -= 1; if (index < 1) { index = 5; } buttonShow(); animate(100); } right.onclick = function () { index += 1; if (index > 5) { index = 1; } buttonShow(); animate(-100); Var I = 0; i < button.length; Function (I) {button[I].onclick = function () {var clickIndex = function (I) {var clickIndex = function (I) {button[I].onclick = function () {var clickIndex = function () parseInt(this.getAttribute('index')); var offset = 100 * (index - clickIndex); animate(offset); index = clickIndex; buttonShow(); } })(i) } </script> </html>Copy the code
ok
Continuously updated