轮播图更新版

xiaoxiao2022-07-13 133

<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>轮播图</title> <style type="text/css"> *{ padding:0; margin:0; list-style:none; border:0;} .all{ width:500px; height:200px; padding:7px; border:1px solid #ccc; margin:100px auto; position:relative; } .screen{ width:500px; height:200px; overflow:hidden; position:relative; } .screen li{ width:500px; height:200px; overflow:hidden; float:left;} .screen ul{ position:absolute; left:0; top:0px; width:3000px;} .all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;} .all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;} .all ol li.current{ background:yellow;} #arr {display: none;} #arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;} #arr #right{right:5px; left:auto;} </style> <script> window.onload = function () { //需求：无缝滚动。 //思路：赋值第一张图片放到ul的最后，然后当图片切换到第五张的时候 // 直接切换第六章，再次从第一张切换到第二张的时候先瞬间切换到 // 第一张图片，然后滑动到第二张 //步骤： //1.获取事件源及相关元素。（老三步） //2.复制第一张图片所在的li,添加到ul的最后面。 //3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。 //4.鼠标放到ol的li上切换图片 //5.添加定时器 //6.左右切换图片（鼠标放上去隐藏，移开显示） var screen = document.getElementById("screen"); var ul = screen.children[0]; var ol = screen.children[1]; var div = screen.children[2]; var imgWidth = screen.offsetWidth; //2 var tempLi = ul.children[0].cloneNode(true); ul.appendChild(tempLi); //3 for(var i = 0; i < ul.children.length - 1; i++) { var newOlLi = document.createElement("li"); newOlLi.innerHTML = i + 1; ol.appendChild(newOlLi); } var olLiArr = ol.children; olLiArr[0].className = "current"; //4 for(var i = 0, len = olLiArr.length; i < len; i++) { olLiArr[i].index = i; olLiArr[i].onmouseover = function (ev) { for(var j = 0; j < len; j++) { olLiArr[j].className = ""; } this.className = "current"; key = square = this.index; animate(ul, -this.index * imgWidth); } } //5 var key = 0; var square = 0; var timer = setInterval(autoPlay, 1000); screen.onmouseover = function (ev) { clearInterval(timer); div.style.display = "block"; } screen.onmouseout = function (ev) { timer = setInterval(autoPlay, 1000); div.style.display = "none"; } //6 var divArr = div.children; divArr[0].onclick = function (ev) { key--; if(key < 0) { ul.style.left = -(ul.children.length-1) * imgWidth + "px"; key = 4; } animate(ul, -key * imgWidth); square--; if(square < 0) { square = 4; } for(var k = 0; k < len; k++) { olLiArr[k].className = ""; } olLiArr[square].className = "current"; } divArr[1].onclick = autoPlay; function autoPlay() { key++; //当不满足下面的条件是时候，轮播图到了最后一个孩子，进入条件中后，瞬移到 //第一张，继续滚动。 if(key > ul.children.length - 1) { ul.style.left = 0; key = 1; } animate(ul, -key * imgWidth); square++; if(square > 4) { square = 0; } for(var k = 0; k < len; k++) { olLiArr[k].className = ""; } olLiArr[square].className = "current"; } function animate(ele,target){ clearInterval(ele.timer); var speed = target>ele.offsetLeft?10:-10; ele.timer = setInterval(function () { var val = target - ele.offsetLeft; ele.style.left = ele.offsetLeft + speed + "px"; if(Math.abs(val)<Math.abs(speed)){ ele.style.left = target + "px"; clearInterval(ele.timer); } },10) } } </script> </head> <body> <div class="all" id='all'> <div class="screen" id="screen"> <ul id="ul"> <li><img src="images1.jpg" width="500" height="200" /></li> <li><img src="images2.jpg" width="500" height="200" /></li> <li><img src="images3.jpg" width="500" height="200" /></li> <li><img src="images4.jpg" width="500" height="200" /></li> <li><img src="images5.jpg" width="500" height="200" /></li> </ul> <ol> </ol> <div id="arr"> <span id="left"><</span> <span id="right">></span> </div> </div> </div> </body> </html>

另一种风格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="gb2312"> <title>轮播图</title> <style> * { margin:0; padding:0; } a{ text-decoration: none; } .container { position: relative; width: 600px; height: 400px; margin:100px auto 0 auto; box-shadow: 0 0 5px green; overflow: hidden; } .container .wrap { position: absolute; width: 4200px; height: 400px; z-index: 1; } .container .wrap img { float: left; width: 600px; height: 400px; } .container .buttons { position: absolute; right: 5px; bottom:40px; width: 150px; height: 10px; z-index: 2; } .container .buttons span { margin-left: 5px; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: green; text-align: center; color:white; cursor: pointer; } .container .buttons span.on{ background-color: red; } .container .arrow { position: absolute; top: 35%; color: green; padding:0px 14px; border-radius: 50%; font-size: 50px; z-index: 2; display: none; } .container .arrow_left { left: 10px; } .container .arrow_right { right: 10px; } .container:hover .arrow { display: block; } .container .arrow:hover { background-color: rgba(0,0,0,0.2); } </style> </head> <body> <div class="container"> <div class="wrap" style="left: -600px;"> <img src="images/5.jpg"> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> <img src="images/4.jpg"> <img src="images/5.jpg"> <img src="images/1.jpg"> </div> <div class="buttons"> <span class="on">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> <a href="javascript:;" class="arrow arrow_left"><</a> <a href="javascript:;" class="arrow arrow_right">></a> </div> <script> var wrap = document.querySelector(".wrap"); var next = document.querySelector(".arrow_right"); var prev = document.querySelector(".arrow_left"); next.onclick = function () { next_pic(); } prev.onclick = function () { prev_pic(); } function next_pic () { index++; if(index > 4){ index = 0; } showCurrentDot(); var newLeft; if(wrap.style.left === "-3600px"){ newLeft = -1200; }else{ newLeft = parseInt(wrap.style.left)-600; } wrap.style.left = newLeft + "px"; } function prev_pic () { index--; if(index < 0){ index = 4; } showCurrentDot(); var newLeft; if(wrap.style.left === "0px"){ newLeft = -2400; }else{ newLeft = parseInt(wrap.style.left)+600; } wrap.style.left = newLeft + "px"; } var timer = null; function autoPlay () { timer = setInterval(function () { next_pic(); },2000); } autoPlay(); var container = document.querySelector(".container"); container.onmouseenter = function () { clearInterval(timer); } container.onmouseleave = function () { autoPlay(); } var index = 0; var dots = document.getElementsByTagName("span"); function showCurrentDot () { for(var i = 0, len = dots.length; i < len; i++){ dots[i].className = ""; } dots[index].className = "on"; } for (var i = 0, len = dots.length; i < len; i++){ (function(i){ dots[i].onclick = function () { var dis = index - i; if(index == 4 && parseInt(wrap.style.left)!==-3000){ dis = dis - 5; } //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可 if(index == 0 && parseInt(wrap.style.left)!== -600){ dis = 5 + dis; } wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px"; index = i; showCurrentDot(); } })(i); } </script> </body> </html>

此代码外链式写法：

HTML：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <div class="container"> <div class="wrap" style="left: -600px;"> <img src="images/5.jpg"> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> <img src="images/4.jpg"> <img src="images/5.jpg"> <img src="images/1.jpg"> </div> <div class="buttons"> <span class="on">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> <a href="javascript:;" class="arrow arrow_left"><</a> <a href="javascript:;" class="arrow arrow_right">></a> </div> </body> </html>

CSS：

Javascript：

最新回复(0)