?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 ??4 <head> ?5 ????<meta charset="UTF-8"> ?6 ????<title>banner</title> ?7 </head> ?8 <style> ?9 .banner { 10 ????min-width: 1200px; 11 ????min-height: 350px; 12 ????position: relative; 13 } 14 ?15 .banner-img { 16 ????position: relative; 17 } 18 ?19 .banner img { 20 ????width: 100%; 21 ????height: auto; 22 ????position: absolute; 23 } 24 ?25 .banner-ul { 26 ????list-style: none; 27 ????display: flex; 28 ????z-index: 5; 29 ????position: absolute; 30 ????bottom: 21px; 31 ????left: 50%; 32 ????transform: translateX(-50%); 33 } 34 ?35 .banner-ul li { 36 ????width: 80px; 37 ????height: 11px; 38 ????background-color: #fff; 39 ????margin-right: 15px; 40 } 41 .banner .banner-active{ 42 ????background-color: red; 43 } 44 ?45 .banner1,.banner2{ 46 ????display:none; 47 } 48 </style> 49 <body> 50 ????<div class="banner"> 51 ????????<div class="banner-img"> 52 ????????????<img src="img/banner0.png" alt="轮播图"> 53 ????????????<img class="banner1" src="img/banner1.png" alt="轮播图"> 54 ????????????<img class="banner2" src="img/banner2.png" alt="轮播图"> 55 ????????</div> 56 ????????<ul class="banner-ul"> 57 ????????????<li class="banner-active"></li> 58 ????????????<li></li> 59 ????????????<li></li> 60 ????????</ul> 61 ????</div> 62 </body> 63 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 64 <script> 65 ????$(function(){ 66 ?????????// 轮播图 67 ????var i = 0; 68 ????function autoPlay() { //自动播放暂停 69 ?????????70 ????????function play() {//play函数-begin 71 ????????????i++; 72 ????????????if (i > 2) { 73 ????????????????i = 0; 74 ????????????} 75 ????????????$(‘.banner-img img‘).eq(i).fadeIn(1000).siblings().fadeOut(1000); 76 ????????????//改变下面三条横杠状态 77 ????????????$(".banner-ul li").eq(i).css( 78 ????????????????"background", "red" 79 ????????????).siblings().css( 80 ????????????????"background", "#fff" 81 ????????????) 82 ????????} //play函数-end 83 ????????setplay = setInterval(play, 3000); 84 ????} 85 ????autoPlay(); 86 ?87 ????//鼠标移进移出轮播暂停和启动 88 ????$(".banner").hover(function() { 89 ????????clearInterval(setplay); 90 ????}, autoPlay); 91 ?92 ?93 ????//点击小长条方框 图片切换 94 ????$(".banner-ul li").click(function() { 95 ????????$(this).css( 96 ????????????"background", "red" 97 ????????).siblings().css( 98 ????????????"background", "#fff" 99 ????????)100 ????????var index = $(this).index();101 ????????$(".banner-img img").eq(index).fadeIn(1000).siblings().fadeOut(1000);102 ????});103 ????})104 105 ????// 监听浏览器窗口大小发生变化时，改变banner的高度106 ????//用来处理banner下的ul定位用107 ????window.onresize = function() {108 ????????var bannerImgHeight = $(‘.banner-img img‘).css(‘height‘);109 ????????var y = $(‘.banner‘).css("height", bannerImgHeight);110 ????}111 ????//f5刷新页面后定位112 ????var bannerImgHeight = $(‘.banner-img img‘).css(‘height‘);113 ????var y = $(‘.banner‘).css("height", bannerImgHeight);114 </script>115 </html>jQuery轮播图鼠标移入停止，移出播放，点击小横条切换图片
原文地址：https://www.cnblogs.com/jddk/p/8278469.html