html图片点击左右滑动效果,基于jquery实现点击左右按钮图片横向滚动
点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面:
效果图如下:
点击左右按钮图片横向滚动
* { margin:0; padding:0;}
body { font-size:12px;}
.box {height:66px; float:left; width:440px; overflow: hidden; position:relative; }
.box li { display:block; float:left; margin-left:5px; margin-right:5px; width:100px; height:70px;background:#BBB;font-size:50px;color:#ccc;line-height:66px;text-decoration:none;text-align:center; cursor:pointer;}
.box li:hover { color:#999; }
.box li.active { background-position:-174px 0; color:#555;cursor:default;}
a.prev, a.next {background:url(http://www.shengyijie.net/images/left_02.png) no-repeat 0 0; display:block;width:23px;height:43px; float:left; margin:15px 0 0 0; cursor:pointer;}
a.next { background-image:url(http://www.shengyijie.net/images/right_02.png)}
.scroll_list{ width:10000em; position:absolute; }
$(function(){
var page= 1;
var i = 4;//每版四个图片
//向右滚动
$(".next").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的视频图片个数
var page_count = Math.ceil(len/i); //只要不是整数,就往大的方向取最小的整数
if(!v_show.is(":animated")){
if(page == page_count){
v_show.animate({left:'0px'},"slow");
page =1;
}else{
v_show.animate({left:'-='+v_width},"slow");
page++;
}
}
});
//向左滚动
$(".prev").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的视频图片个数
var page_count = Math.ceil(len/i); //只要不是整数,就往大的方向取最小的整数
if(!v_show.is(":animated")){
if(page == 1){
v_show.animate({left:'-='+ v_width*(page_count-1)},"slow");
page =page_count;
}else{
v_show.animate({left:'+='+ v_width},"slow");
page--;
}
}
});
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
html图片点击左右滑动效果,基于jquery实现点击左右按钮图片横向滚动相关推荐
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=&quo ...
- 基于jQuery向下弹出遮罩图片相册
今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...
- html图片点击左右滑动效果,jQuery点击左右滚动产品图片展示代码
基于jQuery的产品图文展示代码,可实现点击左右滚动,自动滚动.动态效果还不错.基于jQuery的产品图文展示jQuery插件stepcarousel.js. 配置注意下面几处的ID,要与HTML结 ...
- 通过触摸屏幕/鼠标 图片跟随手指 加滑动效果
<领导关怀版本 需求3> 一:图片本地加载,打字效果,循环播放 二:通过触摸屏幕/鼠标 滑动 三:跟随手指,滑动效果 版本系列(一):实现了读取本地图片,循环播放功能 版本系列(二):原来 ...
- html5圆形头像滚动效果,基于jQuery实现响应式圆形图片轮播特效
本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,misl ...
- 基于jQuery的鼠标悬停时放大图片的效果制作
这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...
- html5 手机导航栏左右滑动效果,js实现移动端导航点击自动滑动效果
本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下 移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于i ...
- html实现平面地图效果,基于Jquery和html5的7款个性化地图插件
1.HTML5世界地图 划分世界区域并显示国家名 这是一款基于HTML5的世界地图应用,它的特点是可以将地图中的各个国家区域进行划分,鼠标滑过时即可显示该区域对应的国家名称,你也可以对弹出的标签进行自 ...
最新文章
- 华为鸿蒙系统源码_鸿蒙系统 IO 栈分析 | 解读鸿蒙源码
- CentOS中怎样安装mysql并修改密码、设置开机启动、配置远程连接
- Dijkstra和动态规划
- .NET Core容器化开发系列(一)——Docker里面跑个.NET Core
- 如何下载python安装包的所有依赖_如何将包含所有依赖项的python包安装到Docker镜像中?...
- 高并发中,那些不得不说的线程池与ThreadPoolExecutor类
- 通过反射获取私有方法
- C#调用新浪微博API生成RSS资源文件
- (十八)其他数据库对象,视图,序列
- TCPUDP测试工具的使用
- SAP VA01 消息 没有用于售达方 XXXXXX 的客户主记录存在
- 计算机无法启动printspooler,打印服务PrintSpooler无法启动解决方法
- js 单击、双击、连续多次点击
- 如何给word文档添加注释
- Feescale K60开发笔记3: Tftpd32的使用
- win10无限重启服务器,win10系统更新kb4284835补丁失败无限重启的解决方法
- Conflux 联合创始人、CTO伍鸣博士出席杭州钱江世纪城重点发展企业座谈会
- mysql数据库导出数据乱码问题_Mysql数据库导出来的是乱码如何解决
- android调用相机分辨率,Android菜鸟笔记-获取摄像头像素值
- 苹果开发者账号/AppleID如何更改绑定的手机号