jquery-轮播图
自己写轮播图，当超过最小设定宽度时，随浏览器宽度变化而变化，当小于最小设定宽度时，固定为最小设定宽度。
html部分
1 <div id="banner"> 2 <div class="slide"> 3 <a href=""><img src="xm1.jpg" alt=""></a> 4 <a href=""><img src="xm2.jpg" alt=""></a> 5 <a href=""><img src="xm3.jpg" alt=""></a> 6 <a href=""><img src="xm4.jpg" alt=""></a> 7 </div> 8 <ul class="slideBtn"></ul> 9 </div> 10 <script src="jquery.min.js"></script>
css部分
1 * {margin: 0;padding: 0;} 2 #banner{min-width:1200px;min-height: 450px;margin:0 auto;overflow: hidden;position: relative;} 3 .slide{position: absolute;top:0;} 4 .slide img{width:100%;float: left;} 5 .slideBtn{position: absolute;bottom: 0;width:100%;text-align: center;z-index: 10;} 6 .slideBtn li{display: inline-block;width:10px;height:10px;margin:5px;background: #000;opacity: .2;filter:Alpha(opacity=20);border-radius: 50%;cursor: pointer;} 7 .slideBtn li:hover,.slideBtn li.on{opacity: 1;filter:Alpha(opacity=100);background: #f00;}
js部分
1 var bannerW, 2 slideW, 3 slideLeft, 4 slideIndex = 0, 5 slide = $(".slide").find("img"), 6 oNum = slide.length,oLi = ""; 7 bannerW = $("#banner").width(); 8 slideW = oNum * bannerW; 9 $(".slide").width(slideW); 10 slide.width(bannerW); 11 $("#banner").height(slide.height()); 12 $(window).resize(function(){ 13 bannerW = $("#banner").width(); 14 slideW = oNum * bannerW; 15 $(".slide").width(slideW); 16 slide.width(bannerW); 17 $("#banner").height(slide.height()); 18 }) 19 for(var i=0;i<oNum;i++){ 20 oLi += "<li></li>"; 21 } 22 $(".slideBtn").append(oLi); 23 $(".slideBtn").find("li").eq(0).addClass("on"); 24 $(".slideBtn").find("li").click(function(){ 25 slideIndex = $(this).index(); 26 slideLeft = slideIndex * bannerW; 27 $(this).addClass("on").siblings().removeClass("on"); 28 $(".slide").animate({left:-slideLeft},"slow"); 29 }) 30 var timer = setInterval(function () { 31 slideIndex++; 32 if(slideIndex > oNum - 1){ 33 slideIndex = 0; 34 } 35 slideLeft = slideIndex * bannerW; 36 $(".slideBtn").find("li").eq(slideIndex).addClass("on").siblings().removeClass("on"); 37 $(".slide").animate({left:-slideLeft},"slow"); 38 }, 3000);
当轮播图的宽高固定时
html部分与上面一样，其余也大体一直，只是少了一个随浏览器宽度变化的事件
css部分
1 * {margin: 0;padding: 0;} 2 #banner{width:1200px;height: 450px;margin:0 auto;overflow: hidden;position: relative;} 3 .slide{position: absolute;top:0;} 4 .slide img{width:100%;float: left;} 5 .slideBtn{position: absolute;bottom: 0;width:100%;text-align: center;z-index: 10;} 6 .slideBtn li{display: inline-block;width:10px;height:10px;margin:5px;background: #000;opacity: .2;filter:Alpha(opacity=20);border-radius: 50%;cursor: pointer;} 7 .slideBtn li:hover,.slideBtn li.on{opacity: 1;filter:Alpha(opacity=100);background: #f00;}
jquery部分
1 var bannerW, 2 slideW, 3 slideLeft, 4 slideIndex = 0, 5 slide = $(".slide").find("img"), 6 oNum = slide.length,oLi = ""; 7 bannerW = $("#banner").width(); 8 slideW = oNum * bannerW; 9 $(".slide").width(slideW); 10 slide.width(bannerW); 11 for(var i=0;i<oNum;i++){ 12 oLi += "<li></li>"; 13 } 14 $(".slideBtn").append(oLi); 15 $(".slideBtn").find("li").eq(0).addClass("on"); 16 $(".slideBtn").find("li").click(function(){ 17 slideIndex = $(this).index(); 18 slideLeft = slideIndex * bannerW; 19 $(this).addClass("on").siblings().removeClass("on"); 20 $(".slide").animate({left:-slideLeft},"slow"); 21 }) 22 var timer = setInterval(function () { 23 slideIndex++; 24 if(slideIndex > oNum - 1){ 25 slideIndex = 0; 26 } 27 slideLeft = slideIndex * bannerW; 28 $(".slideBtn").find("li").eq(slideIndex).addClass("on").siblings().removeClass("on"); 29 $(".slide").animate({left:-slideLeft},"slow"); 30 }, 3000);
将上面两个js进行封装使用
1 // 轮播图方法 2 var bannerSlide = function(slideId,time,ifResize){ 3 // slideId:轮播图的id，字符串 4 // time：轮播的时间 5 // ifResize：如果为true值，则随浏览器变化而变化 6 var bannerW, //轮播图宽度 7 slideW, //轮播图所有图片的总宽度 8 slideLeft, //轮播图切换左移动位置 9 slideIndex = 0, //轮播图当前页 10 slide = $(slideId).children(".slide").find("img"), //轮播图图片对象 11 oNum = slide.length, //轮播图图片总张数 12 oLi = ""; //轮播图按钮 13 bannerW = $(slideId).width(); 14 slide = oNum * bannerW; 15 $(slideId).find(".slide").width(slideW); 16 slide.width(bannerW); 17 18 //是否随浏览器变化而变化，即是否固定宽高度 19 if(ifResize == true){ 20 $(slideId).height(slide.height()); 21 $(window).resize(function(){ 22 bannerW = $(slideId).width(); 23 slide = oNum * bannerW; 24 $(slideId).find(".slide").width(slideW); 25 slide.width(bannerW); 26 $(slideId).height(slide.height()); 27 }) 28 } 29 30 for(var i=0;i<oNum;i++){ 31 oLi += "<li></li>"; 32 } 33 $(slideId).find(".slideBtn").append(oLi); 34 $(slideId).children(".slideBtn").find("li").eq(0).addClass("on"); 35 //按钮切换 36 $(slideId).children(".slideBtn").find("li").click(function(){ 37 slideIndex = $(this).index(); 38 slideLeft = slideIndex * bannerW; 39 $(this).addClass("on").siblings().removeClass("on"); 40 $(slideId).find(".slide").animate({left:-slideLeft},"slow"); 41 }) 42 //计时器，定时轮播 43 var timer = setInterval(function(){ 44 slideIndex++; 45 if(slideIndex > oNum - 1){ 46 slideIndex = 0; 47 } 48 slideLeft = slideIndex * bannerW; 49 $(slideId).children(".slideBtn").find("li").eq(slideIndex).addClass("on").siblings().removeClass("on"); 50 $(slideId).find(".slide").animate({left:-slideLeft},"slow"); 51 },time); 52 }
参考文章：https://blog.csdn.net/jbj6568839z/article/details/81144870
