jQuery手机端触屏滑动图片切换特效代码

简要教程

这是一款手机端jQuery触屏滑动图片切换代码是一款触屏滑动图片左右滚动展示代码。

使用方法

在页面引入以下jquery.min.js、leftScroll.js文件

<script src="js/jquery.min.js"></script> 
<script src="js/leftScroll.js"></script>

<script>
    $(".leftScroll").leftScroll();
</script>

HTML结构

<div class="m">
  <div class="leftScroll">
    <ul class="leftScroll_container">
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/1.jpg" alt=""> </a> </li>
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/2.jpg" alt=""> </a> </li>
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/3.jpg" alt=""> </a> </li>
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/4.jpg" alt=""> </a> </li>
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/5.jpg" alt=""> </a> </li>
    </ul>
  </div>
  <div class="leftScroll">
    <ul class="leftScroll_container">
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/2.jpg" alt=""> </a> </li>
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/3.jpg" alt=""> </a> </li>
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/4.jpg" alt=""> </a> </li>
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/1.jpg" alt=""> </a> </li>
    </ul>
  </div>
  <div class="leftScroll">
    <ul class="leftScroll_container">
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/4.jpg" alt=""> </a> </li>
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/5.jpg" alt=""> </a> </li>
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/1.jpg" alt=""> </a> </li>
      <li class="leftScroll_picBox"> <a href=""> <img class="leftScroll_picBox_img" src="img/2.jpg" alt=""> </a> </li>
    </ul>
  </div>
</div>