<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> ul, ol { list-style: none;} a {border: none;text-decoration: none;color: inherit;} * {margin: 0;padding: 0;} .banner{ position: relative; width: 800px; height: 450px; margin: 100px auto; box-shadow: 0 0 10px 0 #000; } .banner .pic a img{ position: absolute; left: 0; top: 0; width: 800px; height: 450px; opacity: 0; transition: 0.5s; } .banner .pic a img.on{ opacity: 1; } .banner .btn p{ position: absolute; top: calc(50% - 27px); width: 55px; height: 55px; cursor: pointer; } .banner .btn p:hover{ opacity: 0.7; } .banner .btn p:nth-child(1){ left: 10px; background: url("images/btnL.png"); } .banner .btn p:nth-child(2){ right: 10px; background: url("images/btnR.png"); } .banner ol{ position: absolute; bottom: 10px; left: calc(50% - 100px); } .banner ol li{ float: left; width: 30px; height: 30px; font: bold 20px/30px ""; color: #fff; text-align: center; background: #ccc; margin: 0 5px; border-radius: 50%; cursor: pointer; } .banner ol li.on{ background: orangered; } </style> <title>Document</title> </head> <body> <div class="banner"> <div class="pic"> <a href=""><img src="images/0.jpg" alt="" class="on"></a> <a href=""><img src="images/1.jpg" alt=""></a> <a href=""><img src="images/2.jpg" alt=""></a> <a href=""><img src="images/3.jpg" alt=""></a> <a href=""><img src="images/4.jpg" alt=""></a> </div> <div class="btn"> <p></p> <p></p> </div> <ol class="dot"> <li class="on">0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> </div> <script> var aBtn = document.querySelectorAll(".banner .btn p"); var aImg = document.querySelectorAll(".banner .pic img"); var aDot = document.querySelectorAll(".banner .dot li"); var length = aImg.length; var idx = 0; //索引 /*给按钮添加点击事件*/ aBtn[1].onclick = function () { aImg[idx].className = ""; idx++; if(idx > length-1) idx = 0; aImg[idx].className = "on"; change(idx); } aBtn[0].onclick = function () { aImg[idx].className = ""; idx--; if(idx < 0) idx = length - 1; aImg[idx].className = "on"; change(idx); } /*给小圆点注册点击事件*/ for( var i=0; i<length; i++ ){ (function (m) { aDot[m].onclick = function () { aImg[idx].className = ""; idx = m; aImg[idx].className = "on"; change(idx); } })(i); } /*将变化的封装到函数里面*/ function change(index) { for( var i=0; i<length; i++ ){ aDot[i].className = ""; } aDot[index].className = "on"; } </script> </body> </html>
javascript淡入淡出效果的轮播图
猜你喜欢
转载自blog.csdn.net/chang_jie_518/article/details/80099786
今日推荐
周排行