图片Slider 带左右按钮的js示例


Posted in Javascript onAugust 30, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>?????</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script> 
<style type="text/css"> 
body,ul,li { padding:0; margin:0} 
ul,li { list-style:none} 
.img-scroll { position:relative; margin:20px auto; width:440px;} 
.img-scroll .prev,.img-scroll .next { position:absolute; display:block; width:50px; height:100px; background-color:#000; 
top:0; color:#FFF; text-align:center; line-height:100px} 
.img-scroll .prev { left:0} 
.img-scroll .next { right:0} 
.img-list { position:relative; width:320px; height:100px; margin-left:60px; overflow:hidden} 
.img-list ul { width:9999px;} 
.img-list li { float:left; display:inline; width:100px; margin-right:10px; height:100px; background-color:#BDBDDF; text-align:center; line-height:100px;} 
</style> 
</head> <body> 
<div class="img-scroll"> 
<span class="prev">prev</span> 
<span class="next">next</span> 
<div class="img-list"> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</div> 
</div> 
<script type="text/javascript"> 
function DY_scroll(wraper,prev,next,img,speed,or) 
{ 
var wraper = $(wraper); 
var prev = $(prev); 
var next = $(next); 
var img = $(img).find('ul'); 
var w = img.find('li').outerWidth(true); 
var s = speed; 
next.click(function() 
{ 
img.animate({'margin-left':-w},function() 
{ 
img.find('li').eq(0).appendTo(img); 
img.css({'margin-left':0}); 
}); 
}); 
prev.click(function() 
{ 
img.find('li:last').prependTo(img); 
img.css({'margin-left':-w}); 
img.animate({'margin-left':0}); 
}); 
if (or == true) 
{ 
ad = setInterval(function() { next.click();},s*1000); 
wraper.hover(function(){clearInterval(ad);},function(){ad = setInterval(function() { next.click();},s*1000);}); 
} 
} 
DY_scroll('.img-scroll','.prev','.next','.img-list',3,false); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
node.js的事件机制
Feb 08 Javascript
vue component组件使用方法详解
Jul 14 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
vue中axios的二次封装实例讲解
Oct 14 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 #Javascript
Jquery读取URL参数小例子
Aug 30 #Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 #Javascript
细说javascript函数从函数的构成开始
Aug 29 #Javascript
密码框显示提示文字jquery示例
Aug 29 #Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 #Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 #Javascript
You might like
php中session与cookie的比较
2015/01/27 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
Python中super的用法实例
2015/05/28 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
大学生思想汇报范文
2013/12/31 职场文书
关于工资低的辞职信
2014/01/14 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
国旗下演讲稿
2014/05/08 职场文书
需求分析说明书
2014/05/09 职场文书
倡议书的格式写法
2015/04/28 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
基于Python实现对比Exce的工具
2022/04/07 Python