图片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 相关文章推荐
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
JavaScript数据类型详解
Apr 01 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
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 简单日历实现代码
2009/10/28 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
node文件上传功能简易实现代码
2017/06/16 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
便利店的创业计划书
2014/01/15 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
机关作风建设自查报告
2014/10/22 职场文书
4种方法python批量修改替换列表中元素
2022/04/07 Python