css样式:
<style> *{ margin: 0; padding: 0; list-style: none; text-decoration: none; } .banner{ width: 1263px; height: 460px; position: relative; overflow: hidden; margin: 0 auto; } .banner ul { width: 3500px; height: 460px; position: absolute; left: 0; top: 0; } .banner ul li{ float: left; width: 1263px; height: 460px; } .banner ul li a img{ width: 100%; height: 100%; } .banner ol{ width: 100px; height: 20px; background: rgba(255, 255, 255, 0.6); position: absolute; right: 10px; bottom:10px; transform: translateX(-50%); border-radius:10px; display: flex; justify-content: space-evenly; align-items: center; } .banner ol li{ width: 10px; height: 10px; background-color: rgb(10, 143, 252); border-radius:50%; } .banner>a{ width: 20px; height: 40px; position: absolute; top:50%; transform: translateY(-50%); background-color: rgba(50,50,50,.5); color:#fff; text-align: center; line-height: 2; font-size:20px; } .banner>a.left{ left: 0; } .banner>a.right{ right: 0; } </style>
html内容:
<body> <div class="banner"> <ul> <li><a href="#"><img src="./images/1.jpg" alt=""></a></li> <li><a href="#"><img src="./images/2.jpg" alt=""></a></li> <li><a href="#"><img src="./images/3.jpg" alt=""></a></li> <li><a href="#"><img src="./images/4.jpg" alt=""></a></li> <li><a href="#"><img src="./images/5.jpg" alt=""></a></li> </ul> <ol> </ol> <a href="javascript:;" class="left"><</a> <a href="javascript:;" class="right">></a> </div> </body>
js内容:
<script> var box = document.querySelector(‘.banner‘); var ul = box.querySelector(‘ul‘); var ol = box.querySelector(‘ol‘); var left = box.querySelector(‘.banner>a.left‘); var right = box.querySelector(‘.banner>a.right‘); var index = 1; var flag = true; var timeId; var that; var firstLi; handleOL() handleUL() right.onclick = function(){ if(!flag){ return false; } flag = false; index++; carouser(); } left.onclick = function(){ if(!flag){ return false; } flag = false; index--; carouser(); } for(let i=0;i<ol.children.length;i++){ ol.children[i].onclick = function(){ if(!flag){ return false; } flag = false; index = i+1; carouser() } } auto(); function handleUL(){ firstLi = ul.firstElementChild.cloneNode(true); var lastLi = ul.lastElementChild.cloneNode(true); ul.appendChild(firstLi); ul.insertBefore(lastLi,ul.children[0]); ul.style.width = firstLi.offsetWidth * ul.children.length + "px"; ul.style.left = -index * firstLi.offsetWidth + "px"; } function handleOL(){ for(var i=0;i<ul.children.length;i++){ var li = document.createElement("li"); ol.appendChild(li) } that = ol.children[index-1]; ol.style.width = ol.children.length * ol.firstElementChild.offsetWidth * 2 + "px"; that.style.backgroundColor = ‘red‘; } function auto(){ timeId = setInterval(function(){ if(!flag){ return false; } flag = false; index++; carouser() },2000); } box.onmouseover = function(){ clearTimeout(timeId); } box.onmouseout = function(){ auto() } function carouser(){ move(ul,{left:-index*firstLi.offsetWidth},function(){ if(index==ul.children.length-1){ index = 1; ul.style.left = -index * firstLi.offsetWidth + ‘px‘ } if(index==0){ index = ul.children.length-2; ul.style.left = -index * firstLi.offsetWidth + "px" } that.style.backgroundColor = ‘skyblue‘ ol.children[index-1].style.backgroundColor = ‘red‘; that = ol.children[index-1] flag = true }); } function move(ele,obj,cb){ var timerObj = {}; for(let attr in obj){ timerObj[attr] = setInterval(function(){ let target = obj[attr]; let l = getStyle(ele,attr); l = parseFloat(l) if(attr === "opacity"){ target = target * 100; l = l * 100; } let percent; percent = (target - l)/10; if(percent>0){ percent = Math.ceil(percent); }else{ percent = Math.floor(percent); } l += percent; if(attr === "opacity"){ ele.style[attr] = l/100 }else{ ele.style[attr] = l+ "px" } if(l==target){ clearInterval(timerObj[attr]); delete timerObj[attr]; let k = 0; for(let i in timerObj){ k++ } if(k==0){ cb() } } },10); } } function getStyle(ele,attr){ if(window.getComputedStyle){ return window.getComputedStyle(ele)[attr]; }else{ return ele.currentStyle[attr]; } } </script>
效果图: