jQuery轮播图之上一张下一张

如图实例：

html代码：

   <div class="global_module prolist"><h3>新款上市</h3><div class="prolist_content"><ul><li><a href="detail.html"><img src="data:images/img_1.jpg" title="免烫高支棉衬衣" alt="假装有图片" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span></li><li><a href="detail.html"><img src="data:images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span></li><li><a href="detail.html"><img src="data:images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span></li><li><a href="detail.html"><img src="data:images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span></li><li><a href="detail.html"><img src="data:images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span></li><li><a href="detail.html"><img src="data:images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span></li><li><a href="detail.html"><img src="data:images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span></li><li><a href="detail.html"><img src="data:images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span></li><li><a href="detail.html"><img src="data:images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span></li><li><a href="detail.html"><img src="data:images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span></li><li><a href="detail.html"><img src="data:images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span></li><li><a href="detail.html"><img src="data:images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span></li></ul></div><p class="module_left_right"><img class="goLeft" src="data:images/left.gif" alt="" /><img class="goRight" src="data:images/right.gif" alt="" /></p></div>

jQuery代码

//衬衫左右移动$(function () {var page = 1;//定义第一页var ice = 4;//定义个4var lenq = $('.prolist_content ul li').length;//获取li标签的个数var page_count = Math.ceil(lenq / ice);//分成页数，向上取整var none_unit_width = $('.prolist').width();//获取整个div的宽度var $parent = $('.prolist_content');//对这个图片div进行挪动$('.goRight').click(function () {if (page == page_count) {//总页数=1$parent.animate({ left: 0 }, 800);//不移动page = 1;} else {$parent.animate({ left: '-=' + none_unit_width }, 1000);//移动特效left=left-none_unit_widthpage++;}});$('.goLeft').click(function () {if (!$parent.is(':animated')) {//匹配这个div没有执行动画效果的所有元素if (page == 1) {//没有点击过右键，page=1$parent.animate({ left: '-=' + none_unit_width * (page_count - 1) }, 800);//让它移动到了最后一页page = page_count;//更新page=页数} else {$parent.animate({ left: "+=" + none_unit_width }, 800)page--;}}})})

jQuery轮播图之上一张下一张相关推荐

手写jQuery轮播图（无缝回到第一张）
前言轮播图是学习前端必须会的,面试的时候经常会面试到.轮播图的难点在于最后一张到第一张怎么实现无缝滚动,这是一种思维方式的转变. 原理我们以3张的轮播图为例讲解. 如下图,制作三张轮播图时需要放4 ...
android 图片轮播带缩略图,超酷响应式带缩略图的jQuery轮播图插件
PgwSlideshow是一款非常实用的响应式.支持触摸屏的jQuery轮播图插件.该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度.你也可以自定义轮播图的高度,图片宽度会根据高度等 ...
html 轮播怎么用jq设置,jQuery轮播图功能实现方法
本文实例为大家分享了jQuery轮播图功能的实现代码,供大家参考,具体内容如下 jQuery轮播(无animation) html布局 5 1 2 3 4 5 1 < > CSS /* 轮 ...
html轮播图兼容ie8,兼容IE8的高级jQuery轮播图插件
jSlider是一款兼容IE8的高级jQuery轮播图插件.jSlider轮播图插件的特点是轻量级,使用简单,跨平台.通过jSlider你可以非常容易的而在网页中实现任何轮播图效果.它的特点还有: 速 ...
JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); ...
html图片轮播种类,支持4种类型的jQuery轮播图插件EasySlides
EasySlides是一款支持4种类型的jQuery轮播图插件.该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择. 使用方法在页面 ...
html5slider轮播,jQuery轮播图插件slider-pro
slider-pro是一款模块化.响应式.支持移动设备的jQuery轮播图插件.该jQuery轮播图插件提供各种配置参数和方法,可以快速的创建多种模式的轮播图特效.它的主要特点有: 支持模块化. 响应 ...
简单的手写jquery轮播图（包含切换按钮、小圆点）
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
响应式html轮播图,最简单的响应式jQuery轮播图插件
easySlider.js是一款轻量级.简单易用的响应式jQuery轮播图插件.easySlider.js可以根据视口的大小来动态修改轮播图的尺寸.它压缩后的版本仅5K大小,简单实用. 使用方法在页 ...

jQuery轮播图之上一张下一张

jQuery轮播图之上一张下一张相关推荐

最新文章

热门文章