jquery控制左右箭头滚动图片列表
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<title>jq控制左右箭头滚动图片列表</title>
<style type="text/css">
*{ 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;}
</style>
<script type="text/javascript">
$(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<oLen-3){
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})
}
})
</script>
</head>
<body>
<div class="slider">
<span class="prev no_click" id="prev"><<</span>
<span class="next " id="next">>></span>
<div id="slider_pic">
<ul>
<li><img src="http://www.jbxue.com/cnblogs_com/hxh-hua/478335/o_01.jpg" width="200" height="130" /></li>
<li><img src="http://www.jbxue.com/cnblogs_com/hxh-hua/478335/o_02.jpg" width="200" height="130" /></li>
<li><img src="http://www.jbxue.com/cnblogs_com/hxh-hua/478335/o_03.jpg" width="200" height="130" /></li>
<li><img src="http://www.jbxue.com/cnblogs_com/hxh-hua/478335/o_04.jpg" width="200" height="130" /></li>
<li><img src="http://www.jbxue.com/cnblogs_com/hxh-hua/478335/o_05.jpg" width="200" height="130" /></li>
</ul>
</div>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/linuxnotes/p/3340079.html
jquery控制左右箭头滚动图片列表相关推荐
- 带左右箭头的图片滚动html,jquery控制左右箭头滚动图片列表的实例
jq控制左右箭头滚动图片列表 *{ margin:0; padding:0;font-size: 12px;} ul{ list-style:none;} .slider{ width:760px;b ...
- 图片轮播php代码下载,jQuery带进度条滚动图片轮播代码
jQuery带进度条滚动图片轮播代码 jQuery带进度条滚动图片轮播代码是一款带左右箭头按钮控制图片滚动轮播,标题和进度条显示效果. $(document).ready(function(e) { ...
- 《javaScript100例|01》超级经典一套鼠标控制左右滚动图片带自动翻滚
目录 HTML示例 图片示例 HTML示例 <html > <head> <meta http-equiv="Content-Type" conten ...
- php中加载图片淡入淡出,jQuery实现滚动图片淡入淡出功能
这次给大家带来jQuery实现滚动图片淡入淡出功能,jQuery实现滚动图片淡入淡出的注意事项有哪些,下面就是实战案例,一起来看一下. 下面是上下滚动源码 向上滚动代码带上下翻按钮滚动特效 body{ ...
- html5圆形头像滚动效果,基于jQuery实现响应式圆形图片轮播特效
本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,misl ...
- Jquery控制div滚动，但不显示滚动条
Jquery控制div滚动,但不显示滚动条 Html代码: <div class="dv_phone_pic"> <div class="prew_bo ...
- html鼠标滚动图片渐渐淡出,原生js和jquery实现图片轮播淡入淡出效果
图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管 ...
- vue安装vue-awesome-swiper@3实现图片列表缩略图双向控制效果
首先效果图附上 npm install vue-awesome-swiper@3 --save-dev 安装时一定要有版本,否则安装完成后极大可能会报错 main.js文件全局引入 import Vu ...
- H5开发：使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
需求描述 使用H5.CSS.JS.JQUERY 点击添加图片按钮,从本地选择图片(同名图片不可重复选择),在页面预览选中的图片 点击图片查看大图,点击图片右上角"×"删除此图 点击 ...
最新文章
- CUDA Samples: ripple
- TreeSet HashSet
- 构建Hadoop伪分布式环境
- 为什么软件开发，人多，事少，还会工作量大？
- 质量意味着在没有人看的时候把它做对
- Apache RocketMQ部署文档
- pytorch 对抗样本_《AI安全之对抗样本入门》—3.4 PyTorch
- 高品位登录页面，优秀案例给你灵感！
- Python框架篇之Django（Template模版：标签tag、自定义filter、extend模板继承）
- mysql migration tool 64bit_Migration Tool支持MySQL业务SQL迁移
- 关于一段式、两段式、三段式状态机
- 山地车中轴进水表现_你一定不知道的自行车中轴知识
- openffice安装（windows和linux）
- 无损数据压缩算法c语言,C语言实现无损压缩算法
- 【科研工具】在科研人的浏览器里，多个插件多条路。
- 阿里云服务器的windows和linux系统怎么选
- Proxmark3的编译
- CPC客户端补正申请书提交
- win10浏览器主页被篡改的解决办法
- 【iCore2双核心板视频教程三】iM_LAN 100M 以太网模块TCP压力测试（更新视频教程）...