轮展图

雨点打透心脏的1/2处 2022-08-18 12:22 170阅读 0赞

用bootstrap实现轮展图和用Jquery自定义轮展图两种

1.使用bootstrap插件

效果图：

![Center][]

用一个超简单的方法，那就是用bootstrap的插件，什么？不懂bootstrap？没关系，只要会换图片就可以了。

第一步：准备好bootstrap.min.css和bootstrap.min.js（不能是bootstrap.js，因为没有集成其插件），最后还有jquery.js。如果没有可以在[http://download.csdn.net/detail/qq\_19558705/9273389][http_download.csdn.net_detail_qq_19558705_9273389]下载

第二步：开始干活，data-slide-to来设置图片底部滑动索引，data-slide设置是下一页还是上一页，最后是设置图片。

第三步：处理细节问题。

<!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 轮播插件</title>
       <link href="css/bootstrap.min.css" rel="stylesheet">
       <script src="js/jquery.js"></script>
       <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
    <div id="myCarousel" class="carousel slide" style="width:500px;height:313px;margin:50px auto;">
       
       <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
       </ol>   
       
       <div class="carousel-inner">
          <div class="item active">
             <img src="image/1.jpg" width="500" height="313" alt="">
          </div>
          <div class="item">
             <img src="image/2.jpg" width="500" height="313" alt="">
          </div>
          <div class="item">
             <img src="image/3.jpg" width="500" height="313" alt="">
          </div>
       </div>
       
       <a class="carousel-control left" href="#myCarousel" 
          data-slide="prev" style="width:10%">‹</a>
       <a class="carousel-control right" href="#myCarousel" 
          data-slide="next" style="width:10%">›</a>
    </div> 
    <script type="text/javascript">
    	$(function(){
    		$('#myCarousel').carousel({
    		  interval: 3000 // 默认5s
    		});
    	});
    </script>
    </body>
    </html>

资源下载路径：[http://download.csdn.net/detail/qq\_19558705/9273389][http_download.csdn.net_detail_qq_19558705_9273389]

这样轮展图就做完了，需要修改的就只有图片路径了。就是样式比较单一

如果你比较任性，就想做出属于自己的轮展图，没问题，下面就交你怎么做

##     ##

2.自定义轮展图

因为比较复杂点，所以我把步骤写到了代码中，就麻烦大家睁大你们的眯眯眼，辛苦的看一下吧![大笑][laugh.gif]

下面的代码是学习腾讯课堂轮展图做的（在培训机构学的时候做的笔记，只供学习使用），所以在样式上比较复杂，大家重点看jquery内容

效果图：

![SouthEast][]

具体内容看代码，有详细的注释：

实现了点击切换，底部圆点切换，左右侧按钮切换

<!doctype html>
    <html>
    	<head>
    		
    		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
    		
    		<title>图片切换</title>
    		<meta name="Keywords" content="关键词,关键词">
    		<meta name="Description" content="">
    		
    		<style type="text/css">
    			*{margin:0;padding:0;}
    			img{border:none;}
    			ul li{list-style:none;}
    			/*背景 start*/
    			.bg{width:100%;height:300px;background:#a534d6;position:relative;}
    			/*背景图片 start*/
    			.b_img{width:760px;height:300px;overflow:hidden;margin:50px auto;}
    			/*背景图片 end*/
    			/*图片下方的按钮 start*/
    			.bg .nav{position:absolute;bottom:10px;left:46%;background:#000;opacity:0.5;filter:alpha(opacity=50);border-radius:25px;}
    			.bg .nav ul{display:inline-block;padding:5px 9px;}
    			.bg .nav ul li{float:left;width:10px;height:10px;border:1px solid #fff;border-radius:10px;margin:0 5px;}
    			.bg .nav ul .select{background:#fff;}
    			.bg .btn{width:46px;height:70px;background:url("images/icon.png");position:absolute;display:none;}
    			.bg .show{display:block;}
    			.bg .b_pre{top:40%;left:300px;background-position:49px 0px;}
    			.bg .b_next{top:40%;left:1014px;background-position:0px 309px;}
    			/*图片下方的按钮 end*/
    			/*背景 end*/
    		</style>
    	</head>
    	<body>
    		<div class="bg">
    			<ul class="b_img">
    				<li>
    					<a href="#">
    						<img src="images/banner-1.jpg" width="760" height="300" alt=""/>
    					</a>
    				</li>
    				<li>
    					<a href="#">
    						<img src="images/banner-2.jpg" width="760" height="300" alt=""/>
    					</a>
    				</li>
    				<li>
    					<a href="#">
    						<img src="images/banner-3.jpg" width="760" height="300" alt=""/>
    					</a>
    				</li>
    				<li>
    					<a href="#">
    						<img src="images/banner-4.jpg" width="760" height="300" alt=""/>
    					</a>
    				</li>
    				<li>
    					<a href="#">
    						<img src="images/banner-5.jpg" width="760" height="300" alt=""/>
    					</a>
    				</li>
    			</ul>
    			// 为了使过渡更和谐
    			<div class="nav">
    				<ul>
    					<li class="select" data-color="#a534d6"></li>
    					<li data-color="#6365ce"></li>
    					<li data-color="#4a4d9c"></li>
    					<li data-color="#523484"></li>
    					<li data-color="#009ee7"></li>
    				</ul>
    			</div>
    			<a href="#" class="btn b_pre"></a>
    			<a href="#" class="btn b_next"></a>
    		</div>
    	<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
    	<script type="text/javascript">
    		$(function(){
    			// 定义一个按钮的索引
    			var index = 0;
    			// 定义一个是否播放的属性，因为要判断鼠标停留在图片上的时候停止播放
    			var play_setInterval = null;
    			// 开始自动切换
    			auto_banner();
    			// 按钮的显与隐
    			$(".bg").mouseover(function(){
    				$(".btn").addClass("show");
                    // 鼠标划在上面时候停止播放
    				clearInterval(play_setInterval);
    			}).mouseout(function(){
    				$(".btn").removeClass("show");
    				auto_banner();
    			});
    			// 第一种：下标与图片联动
    			// 先是做下标动
    			$(".nav").find("li").mouseover(function(){
    				// this 表示当前的li；siblings是他的兄弟元素，没有select就add；有就remove
    				$(this).addClass("select").siblings().removeClass("select");
    				// 图片的下标的联动的
    				// 第一条件就是获取图片的下标
    				var _index = $(this).index();
    				// 因为要下标和按钮对应
    				index = _index;
    				// 第二条件就是让图片根据下标消失
    				$(".b_img").find("li").eq(_index).fadeIn(1000).siblings().hide();
    				// 如果背景图片是白色；在切换过程中会有刺眼的感觉，所以要在切换过程中更改背景颜色
    				// 获取背景颜色
    				var _background = $(this).data("color");
    				// 通过css样式更改背景颜色
    				$(this).parents(".bg").fadeIn(1000).css("background",_background);
    			});
    			// 第二种：按钮与图片联动
    			// 既然是按钮；就是需要点击(前进按钮)
    			$(".b_next").click(function(){
    				// 每点击一次，索引值加一
    				index ++;
    				// 索引长度 注意是length而不是length()
    				var _length = $(".nav").find("li").length;
    				// 当索引值大于索引长度的时候归零
    				if (index >= _length){index = 0;}
    				// 点击按钮图片切换
    				$(".b_img").find("li").eq(index).fadeIn(1000).siblings().hide();
    				// 点击按钮图片背景切换
    				var _background = $(".nav").find("li").eq(index).data("color");
    				$(this).parents(".bg").fadeIn(1000).css("background",_background);
    				// 点击按钮下标切换
    				$(".nav").find("li").eq(index).addClass("select").siblings().removeClass("select");
    			});
    			// 后退按钮
    			$(".b_pre").click(function(){
    				index --;
    				var _length = $(".nav").find("li").length;
    				if (index <0){index = _length - 1;}
    				$(".b_img").find("li").eq(index).fadeIn(1000).siblings().hide();
    				var _background = $(".nav").find("li").eq(index).data("color");
    				$(this).parents(".bg").fadeIn(1000).css("background",_background);
    				$(".nav").find("li").eq(index).addClass("select").siblings().removeClass("select");
    			});	
    			// 自动切换
    			function auto_banner(){
    				var _length = $(".nav").find("li").length;
    				play_setInterval = setInterval(function(){
    				if(index > _length){index = _length; }
    				$(".b_img").find("li").eq(index).fadeIn(1000).siblings().hide();
    				var _background = $(".nav").find("li").eq(index).data("color");
    				$(".bg").fadeIn(1000).css("background",_background);
    				$(".nav").find("li").eq(index).addClass("select").siblings().removeClass("select");
    				if(index == _length){index = 0;} 
    				else{index ++; }
    				},2000);
    			};
    		});	
    	</script>
    	</body>
    </html>

资源下载地址：[http://download.csdn.net/detail/qq\_19558705/9273479][http_download.csdn.net_detail_qq_19558705_9273479]

转载注明来源：[http://blog.csdn.net/qq\_19558705/article/details/49851879][http_blog.csdn.net_qq_19558705_article_details_49851879]

更多干货等你来拿  [http://www.itit123.cn/][http_www.itit123.cn]

[Center]: /images/20220731/2514ce5bfe8443fca91d8cd4e978d83f.png
[http_download.csdn.net_detail_qq_19558705_9273389]: http://download.csdn.net/detail/qq_19558705/9273389
[laugh.gif]: /images/20220731/76381acc331c4fae93a31a8ecb154170.png
[SouthEast]: /images/20220731/3044bf37e14b4515abcc549ab14a4d3c.png
[http_download.csdn.net_detail_qq_19558705_9273479]: http://download.csdn.net/detail/qq_19558705/9273479
[http_blog.csdn.net_qq_19558705_article_details_49851879]: http://blog.csdn.net/qq_19558705/article/details/49851879
[http_www.itit123.cn]: http://www.itit123.cn/