h5手机浏览器左右滑动切换图片效果

<Html>
<Head>
     <pre name="code" class="html">      <script type="text/javascript" src="引入jquery"></script>

<--重点是引入hammer.min.js-->
<script type="text/javascript" src="http://cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js"></script>
<link rel="stylesheet" href="引入bootstrap" type="text/css"></link>
</head>

<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
        <ol class="carousel-indicators">
          <li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
          <li data-slide-to="1" data-target="#carousel-example-generic" class="active"></li>
          <li data-slide-to="2" data-target="#carousel-example-generic" class=""></li>
        </ol>
        <div role="listbox" class="carousel-inner">
          <div class="item">
            <img alt="First slide" src="static/image/adpicture/adpicture2.png" style="width:100%;height:150px;"  data-holder-rendered="true">
          </div>
          <div class="item active">
            <img alt="Second slide [1140x500]" src="static/image/adpicture/adpicture1.png" style="width:100%;height:150px;" data-holder-rendered="true">
          </div>
          <div class="item">
            <img alt="Third slide [1140x500]" src="static/image/adpicture/adpicture3.jpg" style="width:100%;height:150px;" data-holder-rendered="true">
          </div>
        </div>
        <a data-slide="prev" role="button" href="#carousel-example-generic" >
          
          <span class="sr-only">Previous</span>
        </a>
        <a data-slide="next" role="button" href="#carousel-example-generic">
          
          <span class="sr-only">Next</span>
        </a>
</div>
//重点js引入
<script>
          $(function(){
            var myElement= document.getElementById('carousel-example-generic');
            var hm=new Hammer(myElement);
            hm.on("swipeleft",function(){
                $('#carousel-example-generic').carousel('next');
            })
            hm.on("swiperight",function(){
                $('#carousel-example-generic').carousel('prev');
            })
        })
  </script>



 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值