jquery中如何实现一个li里面一排6张图片进行切换

本人前端小白，近日遇见这个需求不分多个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张图片进行切换相关推荐

html多个ul时怎么选择某个li,选中多个ul中的第一个li方法
获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background"," ...
php判断第一个插入css,织梦dedecms的arclist循环中判断第一个li,则添加固定的css否则不加...
dedecms的arclist循环中,判断如果是第一个li,则添加固定的css,否则不加经过测试,同样在channel标签里也适用. 写法如下: 复制代码代码如下:{dede:arclist row ...
jQuery中animate的一个隐藏很深的坑
最近在做一个类似于幻灯片的网页电子简历,主要使用的是jQuery的animate函数,碰到了一个坑,跳坑花了两小时. jQuery对象才能使用它的函数,如果用选择器同时选中2个元素的话,animate ...
jQuery中鲜为人知的的几个方法
转来学习一下 jQuery中鲜为人知的的几个方法 jQuery近些年来仍旧是web开发中最受欢迎的类库,虽然大家褒贬不一,但是仍旧不失为一款最流行的Javascript,在今天这篇文章中,我们将介绍几 ...
jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
深入jQuery中的data()
引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...
深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
当我们用javascript写ajax程序写得很"开心"的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼 ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
大白话讲解Promise（三）搞懂jquery中的Promise
前两篇我们讲了ES6中的Promise以及Promise/A+规范,在Promise的知识体系中,jquery当然是必不可少的一环,所以本篇就来讲讲jquery中的Promise,也就是我们所知道的D ...

jquery中如何实现一个li里面一排6张图片进行切换

jquery中如何实现一个li里面一排6张图片进行切换相关推荐

最新文章

热门文章