css与js实现轮播图效果 梦里梦外; 2021-07-26 20:12 374阅读 0赞 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Njk5MTc0_size_16_color_FFFFFF_t_70] HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.1.1.js"></script> <link rel="stylesheet" href="css/轮播样式.css"> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="img/1.jpg"></a> </li> <li><a href=""><img src="img/2.jpg"></a> </li> <li><a href=""><img src="img/3.jpg"></a> </li> <li><a href=""><img src="img/4.jpg"></a> </li> <li><a href=""><img src="img/5.jpg"></a> </li> <li><a href=""><img src="img/6.jpg"></a> </li> </ul> <ul class="num"> <!-- <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> --> </ul> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> <script> //通过jQuery 根据图片的数量创建下面的按钮 //获取图片数量 var img_num = $(".img li").length; var i=0; for (var j=0;j<img_num;j++){ $(".num").append("<li></li>") } // 为第一个小点加成active $(".num li").eq(0).addClass('active') //手动轮播 $(" .num li").mouseover(function () { var i = $(this).index(); //siblings 找到该元素的同胞元素 // 小按钮变红 $(this).addClass('active').siblings().removeClass("active"); //显示图片 stop 去掉其他图片的的特效 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut() }) //自动轮播 //设置定时器 1.5秒 var c=setInterval(GO_RUN,1500) var i=0; function GO_RUN() { if (i==img_num-1){ i=-1 } i++; $(".num li").eq(i).addClass('active').siblings().removeClass("active"); //显示图片 stop 去掉其他图片的的特效 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut() } function GO_lift() { if (i==0){ i=img_num-1 } i--; $(".num li").eq(i).addClass('active').siblings().removeClass("active"); //显示图片 stop 去掉其他图片的的特效 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut() } //鼠标停在上面,停止轮播,鼠标拿开,开始轮播 $(".outer").hover(function () { clearInterval(c) },function () { c=setInterval(GO_RUN,1500) }) // button 加定播 ,对右边走 $(".right").click(GO_RUN) // button 加定播 ,对左边走 $(".left").click(GO_lift) </script> </body> </html> 引入了一个js文件和一个css文件 css: .outer{ width: 790px; height: 340px; margin: 80px auto; position: relative; } .img li{ position: absolute; list-style: none; top: 0; left: 0; } .num{ position: absolute; bottom: 20px; left: 270px; list-style: none; } .num li{ display: inline-block; /*行内块元素*/ width: 15px; height: 15px; background-color: white; border-radius: 50%; text-align: center; line-height: 28px; margin-left: 4px; } .btn{ position: absolute; top: 50%; background-color: lightgray; width: 30px; height: 60px; color: white; text-align: center; line-height: 60px; font-size: 30px; opacity: 0.7; margin-top:-30px; display: none; } .right{ right: 0; } .outer:hover .btn{ display: block; } /* 为第一个轮播图为红色点*/ .num .active{ background-color: red; } 还有一个jquery-3.1.1.js文件,经常会用到的,太多了所以放个链接 https://download.csdn.net/download/qq\_44699174/12440245 我设置成零积分下载了,可还是需要消耗积分,也可以去网上搜一下这个文件。 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Njk5MTc0_size_16_color_FFFFFF_t_70]: /images/20210726/5c831cfc9f734f87930d75442693ffc8.png
还没有评论,来说两句吧...