可滑动切换的图片轮播——bootstrap中的carousel插件,hammer.js,jquery.hammer.js

页面代码：

<pre name="code" class="html"><!-- 切换导航 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
     <!-- Indicators -->
     <ol class="carousel-indicators">
	 <li data-target="#carousel-example-generic" data-slide-to="0" class="active" style="position:absolute;top:3px;left:100%;width:9px;height:9px;"></li>
	 <li data-target="#carousel-example-generic" data-slide-to="1" style="position:absolute;top:3px;left:110%;width:9px;height:9px;"></li>
	 <li data-target="#carousel-example-generic" data-slide-to="2" style="position:absolute;top:3px;left:120%;width:9px;height:9px;"></li>			  

     </ol>
					
     <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">
	  <div class="item active">
               <img src="<?php echo base_url().'public/images/baner.png'?>" alt="baner" style="height:155px;width:100%;">
	       <div class="carousel-caption">
	       </div>	
	  </div>
	  <div class="item">
	       <img src="<?php echo base_url().'public/images/baner1.png'?>" alt="baner1" style="height:155px;width:100%;">
	       <div class="carousel-caption">
	       </div>
	  </div>
	  <div class="item">
	       <img src="<?php echo base_url().'public/images/baner2.png'?>" alt="baner2" style="height:155px;width:100%;">
	       <div class="carousel-caption">
	       </div>
	  </div>
     </div>
					
     <!-- Controls -->
     <!-- 
	<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
	   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	   <span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
	   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	   <span class="sr-only">Next</span>
	</a>
      -->
					
</div>

引入js

<pre name="code" class="php"> <script src="<?php echo base_url('public/js/jquery.min.js'); ?>"></script>
 <script src="<?php echo base_url('public/js/bootstrap.min.js'); ?>"></script>
 <script src="<?php echo base_url('public/js/hammer.js'); ?>"></script>
 <script src="<?php echo base_url('public/js/jquery.hammer.js'); ?>"></script>

jquery代码：

<span style="font-family: Arial, Helvetica, sans-serif;">//boostrap中的carousel插件只能轮播和点击切换，不支持图片滑动切换，为此引入两个js：hammer.js和jquery.hammer.js，进行处理</span>

<pre name="code" class="javascript">$('#carousel-example-generic').hammer().on('swipeleft', function(){

   $(this).carousel('next');
});

$('#carousel-example-generic').hammer().on('swiperight', function(){

   $(this).carousel('prev');
});

参考的价值附录：

1.<a target=_blank href="http://www.tuicool/articles/7zu6Vj6" target="_blank">让Bootstrap轮播插件carousel支持左右滑动手势的三种方法</a>

2.<a target=_blank href="http://v3.bootcss/javascript/#carousel-events" target="_blank">bootstrap文档地址</a>

3.<a target=_blank href="http://www.jq22/jquery-info552" target="_blank">多点触控插件Hammer</a>

4.<a target=_blank href="http://hammerjs.github.io/#contribute" target="_blank">github效果hammer.js</a>

<h1 style="margin: 0px 0px 5px; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; font-weight: normal; line-height: 1.5em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 24px; widows: 1;">
</h1>