本人前端小白，近日遇見這個需求不分多個li，把圖片放在一個li里面操作(為后端哥們考慮，方便后端哥們操作O(∩_∩)O)，見效果圖
第一頁

點擊之后下一頁

可根據內容動態生成可點擊的頁數比如一頁6張圖，我這里只有11張所以不能點擊下一頁了，如果是13張圖的話還可以點擊的。
html代碼

<div class="slider"><ul class="clearfix"><li><a href="#"><img src="../test2/images/Ture-pic1.jpg" alt=""></a><a href="#"><img src="../test2/images/Ture-pic2.jpg" alt=""></a><a href="#"><img src="../test2/images/Ture-pic3.jpg" alt=""></a><a href="#"><img src="../test2/images/Ture-pic4.jpg" alt=""></a><a href="#"><img src="../test2/images/Ture-pic5.jpg" alt=""></a><a href="#"><img src="../test2/images/Ture-pic6.jpg" alt=""></a><a href="#"><img src="../test2/images/preduct1.jpg" alt=""></a><a href="#"><img src="../test2/images/preduct2.jpg" alt=""></a><a href="#"><img src="../test2/images/preduct3.jpg" alt=""></a><a href="#"><img src="../test2/images/preduct3.jpg" alt=""></a><a href="#"><img src="../test2/images/preduct3.jpg" alt=""></a></li></ul><!--箭頭--><div class="arrow"><span class="arrow-left">&lt;</span><span class="arrow-right">&gt;</span></div> </div>

css代碼

.slider{position: relative;}.slider ul{height: 500px;background:#FFFFFF;box-shadow: 3px 3px 24px 0px rgba(122,16,29,0.14);border-radius: 10px;margin-top:60px;overflow:hidden;}.slider ul li a{float:left;line-height: 500px;margin-left:55px;}.slider ul li a{margin-left:53px;}.slider ul li a img{width: 100px;height: 200px;display: inline-block;margin-left:42px;}.arrow .arrow-right {font-family: "SimSun", "宋體";width: 30px;height: 60px;background-color: rgba(0, 0, 0, 0.1);position: absolute;top: 50%;right:0px;margin-top: -30px;cursor: pointer;text-align: center;line-height: 60px;color: #fff;font-weight: 700;font-size: 30px;}.arrow .arrow-left{font-family: "SimSun", "宋體";width: 30px;height: 60px;background-color: rgba(0, 0, 0, 0.1);position: absolute;top: 50%;margin-top: -30px;cursor: pointer;text-align: center;line-height: 60px;color: #fff;font-weight: 700;font-size: 30px;}.arrow .arrow-left:hover,.arrow .arrow-right:hover {background-color: rgba(0, 0, 0, .5);}

js代碼

<script src="../lib/jquery/jquery.js"></script> <script>$(function () {var count = 6;var num =0;var length = $(".slider ul>li>a").length;//獲取長度var width =Math.ceil(length/6);//獲取需要的頁數$(".arrow-right").on("click",function(){console.log($('.slider ul >li>a').slice(num,count));if(count >= length){count = width*6-6;num = count - 6;}$('.slider ul >li>a').slice(num,count).css("display","none");count +=6;num += 6;console.log(num);console.log(count);});$(".arrow-left").on("click",function(){count -=6;num -= 6;$('.slider ul >li>a').slice(num,count).css("display","block");console.log(num);console.log(count);if(num <=0){num = 0;count =6;}})}); </script>

總結

以上是生活随笔為你收集整理的jquery中如何实现一个li里面一排6张图片进行切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。