jQuery点击后一组图片左右滑动的实现代码

2024-09-28 03:37:19

代码如下:

$(function () {
var page = 1;//初始化page变量
var i = 2;//每版放两组图片
var $pictureShow = $(".pictures4");
var downwidth = $pictureShow.width();//获取框架内容的宽度，既每次移动的大小
var len = $(".picturescontent4").find('ul').length;//找到一共有几组图片
var page_number = Math.ceil(len / i);//找到一共有多少个版面
$("#symbol4b").click(function () {
if (!$(".picturescontent4").is(":animated")) {//判断是否正在执行动画效果
if (page == page_number) {//已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
$(".picturescontent4").animate({ left: '0px' }, "slow");//通过改变left值，跳转到第一个版面
page = 1;
} else {
$(".picturescontent4").animate({ left: '-=' + downwidth }, "slow");//通过改变left值，达到每次换一个版面
page++;
}
}
return false;
});
$("#symbol4a").click(function () {
if (!$(".picturescontent4").is(":animated")) {
if (page == 1) {//已经到第一个版面了,如果再向前，必须跳转到最后一个版面
$(".picturescontent4").animate({ left: '-=' + downwidth * (page_number - 1) }, "slow");//通过改变left值，跳转到最后一个版面
page = page_number;
} else {
$(".picturescontent4").animate({ left: '+=' + downwidth }, "slow");//通过改变left值，达到每次换一个版面
page--;
}
}
return false;
});
});

代码如下:

代码如下:

.pictures2ul1,.pictures2ul2 ,.pictures2ul3,.pictures2ul4,.pictures2ul5,.pictures2ul6
{
margin-top:0px;
margin-right:17px;
padding:0px;
width: 122px;
float:left;
list-style-type:none;}
.pictures4
{
height:111px;
position:absolute;
overflow:hidden;
width:278px;
}
.picturescontent4 //其中设置position了，才能在JavaScript用left控制。
{
position:absolute;
float:left;
width:834px;
}

jQuery实现图片与文字描述左右滑动自动切换的方法

本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法.分享给大家供大家参考.具体如下: 这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效.一边飞出一边变淡的效果非常漂亮,带小按钮. 效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
jQuery实现图片滑动效果

思路:当鼠标进入元素时,触发hover中的第一个函数,离开时触发hover中的第二个函数. 如图所示: 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul{ width: 1000px; m
jquery实现滑动图片自己测试的例子

最近正在回顾之前的一些基础知识,用jquery写了一个图片滑动的插件,虽然还是有些问题存在,用法很简单,只要在对目标元素绑定slideW()函数即可,该函数最多支持两个输入,分别是图片变化之后的宽度,以及动画的速度,如果不输入,则采用默认的宽度以及默认的速度. 下面是我自己测试的例子: 复制代码代码如下: //html代码 <div class = "content"> <ul class = "list"> <li class =
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n
jQuery插件Slider Revolution实现响应动画滑动图片切换效果

这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution. HTML Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件. <script src="js/jque
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一

以其语法简单灵活而大受Web designer欢迎.所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果.从这篇文章开始到接下来的几篇文章我们将向大家分享40多种非常有用,又有创意的jQuery图片滑动插件,及其演示和下载地址.你可以按你网页风格找到合适的jQuery图片滑动插件,然后点击演示链接查看具体效果,然后下载此jQuery滑动插件.希望你能在这40个jQuery
JQuery实现简单的图片滑动切换特效

JQuery实现简单的图片滑动切换特效 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>t图片的滑动</title> <meta charset="utf-8" /> <style type="text/css" > *{ margin:0
jquery animate图片模向滑动示例代码

这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity"). 注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就会从当前的值渐变到指定的值.如果使用的是"hide"."show"或"toggle"这样的字符串值,则会为该属性调用默认
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二

在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最优秀的Javascript框架之一.以其语法简单灵活而大受Web designer欢迎.所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果.在这是jQuery滑动切换插件系列的第二篇,我们将向大家分享40多种非常有用,又有创意的jQ
jQuery点击后一组图片左右滑动的实现代码

复制代码代码如下: $(function () { var page = 1;//初始化page变量 var i = 2;//每版放两组图片 var $pictureShow = $(".pictures4"); var downwidth = $pictureShow.width();//获取框架内容的宽度,既每次移动的大小 var len = $(".picturescontent4").find('ul').length;//找到一共有几组图片 var pa
jQuery实现一组图片循环滚动

本文实例为大家分享了jQuery实现一组图片循环滚动的具体代码,供大家参考,具体内容如下效果: 代码: <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>实现一组图片的循环滚动</title> <style type="text/cs
jquery实现最简单的滑动菜单效果代码

本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/
jQuery bxCarousel实现图片滚动切换效果示例代码

BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数 ◆ 自动播放模式 ◆ 前一张/后一张按钮控制图片流动参数含义: display_num:显示元素的数量,几张图片 move:单击左右控制键时,移动的元素个数,此处为移动2张图片 prev_image:上一元素按钮图片 next_image:下一元素按钮图片 margin:图片之间的间隙,一般设为10px auto:自动滚动效果 controls:是否
用jquery实现自定义风格的滑动条实现代码

前些天我们学生在线首页改版,要做一个工具栏,由于版面的限制,原先策划的很多工具只好安排在一个小区域里面,具体效果如下: 当然,这样的效果,用html自带的控件也可以实现.不过自定义的话就可以自己设置滑动条的样式啦,比如说设为红色.蓝色等,按钮形状也可以自己做啦. 需要实现的效果是,这些工具一次最多在可见区域显示9个(这里假设工具项总数多于9个,不满9个的话,将来也很有可能扩展到9个),点击上下的按钮即可将可见区域内的工具区域上下移动. 但是这样做好后,运营人员给我提意见了:要是移动滑动条就可以实
jQuery超精致图片轮播幻灯片特效代码分享

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单. 运行效果图: -------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="styles/97zzw.css"
jQuery+ThinkPHP实现图片上传

本文实例为大家分享了jQuery+ThinkPHP实现图片上传的具体代码,供大家参考,具体内容如下一,利用js实现上传图片时,实时预览相关代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>预览选择的图片</title> <script src="http://libs.baidu.com/jquery/2.1.4/jque
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果.分享给大家供大家参考,具体如下: 这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在"上一页""下一页"上,立即浮现出所对应的图片,有点提前预览的味道,让用户知道下一页或下一页的大致内容,很好的提升了用户体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-link-pic-show-
用jQuery实现圆点图片轮播效果

图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签; 整体思路 : -------------------------------------------------------------------------------- 自动轮播: 将一个用于放置图片素材的与显示框同高度的大div放入显示框,将图片素材放入大的div中,通过jquery的animate()方法改变大div相对
struts2+jsp+jquery+Jcrop实现图片裁剪并上传实例

今天有业务需要制作用户头像的需求,在网上找了个可以裁剪大图制作自己希望大小的图片的方法(基于Struts2).特此记录一下. 不废话,具体的步骤如下: <1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发送数据给Action,在服务器端使用 Java API 对大图进行裁剪. <4> 保存大图裁剪好的头像到指定目录,完成业务. 下面一步一步做: 第

jQuery点击后一组图片左右滑动的实现代码

相关推荐

随机推荐