<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .swiper{ width: 1000px; height: 500px; margin: 0 auto; position: relative; } .imgList,.imgList img{ width: 100%; height: 100%; opacity: 0; transition: all 0.5s; } .imgList{ position: relative; } .imgList img{ position: absolute; left: 0; top: 0; } .leftbtn:hover,.rightbtn:hover{ background: rgba(0,0,0,0.7); color: #fff; } .leftbtn{ width: 100px; height: 70px; line-height: 70px; text-align: center; position: absolute; top: 50%; margin-top: -35px; left: 0%; background: rgba(0,0,0,0); font-size: 20px; color: #999; z-index: 100; } .rightbtn{ width: 100px; height: 70px; line-height: 70px; text-align: center; position: absolute; top: 50%; margin-top: -35px; right: 0%; background: rgba(0,0,0,0); font-size: 20px; color: #999; z-index: 100; } .circleList{ position: absolute; width: 200px; height: 100px; display: flex; right: 0px; bottom: 0px; justify-content: center; align-items: center; z-index: 100; } .circle{ display: inline-block; width: 20px; height: 20px; border-radius: 10px; border: 5px solid #333; background: #999; } .imgList,.imgList img.active{ z-index: 10; opacity: 1; } .swiper .circle.active{ background: #fff; } </style> </head> <body> <h1>helloworld</h1> <div class="swiper"> <div class="imgList"> <img src="img/swiper1.jpg" class="active" alt="" /> <img src="img/swiper2.jpg" alt="" /> <img src="img/swiper3.jpg" alt="" /> <img src="img/swiper4.jpg" alt="" /> <img src="img/swiper5.jpg" alt="" /> </div> <div class="btn"> <div class="leftbtn"><</div> <div class="rightbtn">></div> </div> <div class="circleList"> <span class="circle active"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> </div> </div> <script type="text/javascript"> // $('h1').bgPink() // $.lunbo() ////两个方法加入$ //$.fn.extend() //$.extend(true, target object, object1); $.fn.extend({ bgPink:function(){ console.log(this) this.css({ color:'red', }) console.log('调用bgPink') } }) $('h1').bgPink() $.extend({ lunbo:function(){ //获取图片到底有多少张，有多少张生成多少个小圆点 var imgList = document.querySelectorAll('.imgList img') //获取swiper元素对象，方便后面追加circleList对象 var swiper = document.querySelector('.swiper') //创建circleList对象 var circleList = document.createElement('div'); //给定circleList对象的类名 circleList.className = 'circleList' for(var i=0;i<imgList.length;i++){ //生成相对应个数的span小圆点 var itemCircle = document.createElement('span') itemCircle.className = 'circle' circleList.appendChild(itemCircle) } swiper.appendChild(circleList) var leftBtn = document.querySelector('.leftbtn') var rightBtn = document.querySelector('.rightbtn') //currentPage保存当前是第几张图的数据 var currentPage = 0 // console.log([circleList]) circleList.children[currentPage].className = 'circle active' rightBtn.onclick = function(){ //先还原当前的类名 imgList[currentPage].className = '' circleList.children[currentPage].className = 'circle' currentPage = currentPage + 1; //根据是否超出范围判断，当前轮播具体的第几张图 if(currentPage<imgList.length){ imgList[currentPage].className = 'active' circleList.children[currentPage].className = 'circle active' }else{ currentPage = 0 imgList[currentPage].className = 'active' circleList.children[currentPage].className = 'circle active' } } leftBtn.onclick = function(){ imgList[currentPage].className = '' circleList.children[currentPage].className = 'circle' currentPage = currentPage - 1; if(currentPage>=0){ imgList[currentPage].className = 'active' circleList.children[currentPage].className = 'circle active' }else{ currentPage = imgList.length-1 imgList[currentPage].className = 'active' circleList.children[currentPage].className = 'circle active' } } console.log('这是个轮播') } }); // $.lunbo() </script> </body> </html>