特效描述:利用jQuery实现 手机触屏 滑动图片 切换代码,利用jQuery实现手机触屏滑动图片切换代码
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/leftScroll.css">
2. 引入JS
<script src="js/jquery.min.js"></script> <script src="js/leftScroll.js"></script>
3. 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> <script src="js/jquery.min.js"></script> <script src="js/leftScroll.js"></script> <script> $(".leftScroll").leftScroll(); </script> <div style="text-align:center;margin:50px 0;"> </div>