<!doctype html><html><head> <meta charset="utf-8"> <title>jquery 轮播图</title> <style type="text/css"> *{ margin: 0;padding: 0;list-style: none; } /*设置轮播区域样式*/ #main{ width: 660px; height: 260px; margin:0 auto; background-color: #ccc; margin-top: 50px; position: relative; } /*设置轮播图片的大小*/ #main .img img{ width: 100%; height: 100%; position: absolute; } /*设置需要改变图片的运用的类*/ .display-img{ display: none; } .display-block{ display: block; } /*设置button 区域的位置*/ .button{ position: absolute; bottom:10px; right: 20px; } /*设置button的原始样式*/ button{ margin-right: 10px; height: 10px; width: 10px; border-radius: 100%; background-color: transparent; border: 1px white solid; outline: none;/* 取消外边框*/ } /*改变button 样式的类*/ .achive{ background-color: white; } /*设置下一张/上一张的位置样式*/ #pre{ width: 100%; position: absolute; top: 105px; left: 0; } /*设置pre图片的占位大小*/ #pre img{ width: 50px; height: 50px; } /*定位上一张的控制的位置*/ #pre img:first-child{ float: left; } /*定位下一张 控制的位置*/ #pre img:last-child{ float: right; } </style></head><body> <div id="main"> <div class="img"> <img src="images/1.jpg" alt="" class="display-img display-block"> <img src="images/2.jpg" alt="" class="display-img"> <img src="images/3.jpg" alt="" class="display-img"> <img src="images/4.jpg" alt="" class="display-img"> <img src="images/5.jpg" alt="" class="display-img"> </div> <div class="button"> <button></button> <button></button> <button></button> <button></button> <button></button> </div> <div id="pre"> <img src="images/pre2.png" alt="" class="pre1"> <img src="images/pre.png" alt="" > </div> </div> <script src="jquery.js"></script> <!-- 引用jquery 3.x.x 文件 --> <script>// 用改变索引的方式改变图片 var index = 0; //用于改变图片的索引基数 var btn = $('button');//获取 button 句柄 var img = $('.img img'); //img句柄 var pre = $('#pre img'); //上一张下一张 控制句柄 var timer = null; //用于setInterval存储 // 改变图片的函数 // 在外部封装函数 注意在jquery 函数的调用方式 function changeImg(index){ btn.removeClass('achive');//清除图片的achive 的类 achive de 类样式 img.removeClass('display-block');//清除img 的类样式 btn.eq(index).addClass('achive'); //添加相应的类样式 img.eq(index).addClass('display-block'); //添加相应的类样式 } $(function(){ // var index = 0; // var btn = $('button'); // var img = $('.img img'); // var pre = $('#pre img'); // var main = $('#main'); // var timer = null; $('#main').hover( // mouseover 图片停止 index 停止加法 // mouseover函数开始 function(){ clearInterval(timer); }, // mouseout index 做加法 N 秒的加法 // //mouseout函数开始 function(){ timer = setInterval(function(){ index = index + 1; if (index > img.length-1) { index = 0; } changeImg(index);//调用改变图片函数 },3000) //每n秒调用一次函数 }) // 调用 mouseout 让index 加法 $('#main').mouseout();//自身调用 当页面加载完成 可以自行启动 // btn 索引 对应img元素的索引 btn.click(function(event){ var target = $(event.target); var btn1 = document.querySelectorAll('button'); for (var i = 0; i < btn1.length; i++) { btn1[i].id = i; index = this.id; } changeImg(index);//调用改变图片函数 }) // 箭头改变索引 改变图片 // 点击一次 index -1 pre.eq(0).click(function(){ index =index - 1; if (index < 0) { index = img.length -1; } changeImg(index);//调用改变图片函数 }) // 点击一次 index+ 1 pre.eq(1).click(function(){ index = index + 1; if (index > img.length-1) { index = 0; } changeImg(index);//调用改变图片函数 }) }) </script> </body></html>
添加回答
举报
0/150
提交
取消