|
|
当前位置: 站长天下 / 图片相册背景 / jQuery手机端触屏滑动图片切换特效代码
jQuery手机端触屏滑动图片切换特效代码
标签:

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-16
    阅读:

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>


网友评论

网友评论