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>