html左右箭头实现图片滚动,jquery控制左右箭头滚动图片列表的实例
*{ margin:0; padding:0;font-size: 12px;}
ul{ list-style:none;}
.slider{ width:760px;border: 1px #708090 solid; padding:10px 20px;height: 130px;margin: 100px auto;position: relative;cursor: pointer;}
#slider_pic{ width: 630px;margin:0 auto;overflow: hidden;height: 130px;position: relative;}
.prev,.next{position: absolute;width: 20px;height: 20px;cursor: pointer;top:60px;background-color: #daa520; text-align: center;line-height: 20px;font-weight: bold;color: #fff;}
.next{right: 20px;}
.no_click{background-color: #808080;}
#slider_pic li{float: left;margin-right: 10px;}
#slider_pic ul{position: absolute;left: 0;}
$(function(){
var oPic=$('#slider_pic').find('ul');
var oImg=oPic.find('li');
var oLen=oImg.length;
var oLi=oImg.width();
var prev=$("#prev");
var next=$("#next");
oPic.width(oLen*210);//计算总长度
var iNow=0;
var iTimer=null;
prev.click(function(){
if(iNow>0){
iNow--;
}
ClickScroll();
})
next.click(function(){
if(iNow
iNow++
}
ClickScroll();
})
function ClickScroll(){
iNow==0? prev.addClass('no_click'): prev.removeClass('no_click');
iNow==oLen-3?next.addClass("no_click"):next.removeClass("no_click");
oPic.animate({left:-iNow*210})
}
})
<<
>>
html左右箭头实现图片滚动,jquery控制左右箭头滚动图片列表的实例相关推荐
- jquery控制左右箭头滚动图片列表
jquery控制左右箭头滚动图片列表 jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- 带左右箭头的图片滚动html,jquery控制左右箭头滚动图片列表的实例
jq控制左右箭头滚动图片列表 *{ margin:0; padding:0;font-size: 12px;} ul{ list-style:none;} .slider{ width:760px;b ...
- jq加css制作图片切换,jQuery+css实现的切换图片功能代码
本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo body { margin:0; padding:0; } . ...
- html简单图片放大镜,jQuery轻量级简单实用的图片放大镜特效
zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件.这个图片放大镜特效在鼠标滑过骨牌的时候,在原来图片区域内部将图片放大.鼠标进入和离开图片区域时都带有淡入淡出的效果.该图片放大镜插 ...
- h3c使用acl控制ftp访问_H3C访问控制列表(ACL)实例精华
4.访问控制列表(ACL) (1)标准 RouterA [H3C]interface e0/0 [H3C-ethernet e0/0]ip address 192.168.1.1 255.255.25 ...
- 图片轮播php代码下载,jQuery带进度条滚动图片轮播代码
jQuery带进度条滚动图片轮播代码 jQuery带进度条滚动图片轮播代码是一款带左右箭头按钮控制图片滚动轮播,标题和进度条显示效果. $(document).ready(function(e) { ...
- Jquery控制div滚动,但不显示滚动条
Jquery控制div滚动,但不显示滚动条 Html代码: <div class="dv_phone_pic"> <div class="prew_bo ...
- 仿造小红书页面代码html,jQuery仿小红书登录页,背景图垂直循环滚动登录页,向上循环滚动的动画,实现一张背景图片的无缝向上循环js滚动...
jQuery仿小红书登录页,背景图垂直循环滚动登录页,向上循环滚动的动画,实现一张背景图片的无缝向上循环js滚动 先看效果图: 图片是gif看着有点卡顿,网页里面其实很流畅的 此代码使用CSS3动画实 ...
- html5圆形头像滚动效果,基于jQuery实现响应式圆形图片轮播特效
本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,misl ...
- 文字图片滚动 jquery 实现代码
文字图片滚动 jquery 实现代码 http://www.jq22.com/webqd134
最新文章
- 改进粒子群优化算法(IWAPSO)的MATLAB源程序
- linux记录用户命令的日志是,用日志记录Linux用户执行的每一条命令
- 【Network Security!】搭建文件分享服务器,其实也可以很简单-HFS
- 【控制】传递函数零极点解析
- java的自动装配是什么意思_java – 什么时候在Spring中使用自动装配
- 使用hessian+protocol buffer+easyUI综合案例--登陆
- python基础知识培训价格_Python基础知识的学习
- 01 Python基础
- google chrome浏览器崩溃修复
- 7个黑科技搜索网站,啥都能搜到!
- 【学员问答】中国人民大学与加拿大女王大学中外合作办学金融硕士项目
- 关于如何配置bable
- 房子要室内设计了,先从讲装修的施工工艺开始!
- Db2 insert got DSNISGRT:500A abend
- 将多个csv文件合并成一个
- Mamba Blog 博客小程序版
- Linux 快照 (snapshot) 原理与实践(二) 快照功能实践
- 用计算机弹奏的菊次郎的夏天,“你是钢琴家”“菊次郎的夏天”
- svchost|dllhost系统进程与系统安全——“其实我们很无辜”
- 数字化转型风口,渠道商服务的转型与升级
热门文章
- 论文周报 | 推荐系统领域最新研究进展
- zkteco iface702 中控考勤机java开发步骤一---连接考勤机
- python分位数回归模型_分位数回归及其Python源码导读
- wpf 鼠标拖动绘制几何图形
- 移动站seo优化-怎么做好移动网站的SEO优化-移动seo优化方法软件免费
- [LeetCode 1360~1363][周赛]周赛177题解
- 16. M601 低功耗测试
- 【原创】LabView制作实时读取Excel正态分布图
- latch详解——转自itpub精华帖(引)
- 三星堆的青铜机器人_三星堆“青铜纵目人像”到底是谁?专家终于讲出了真相...