jquery实现图片左右间隔滚动特效(可自动播放)


Posted in Javascript onMay 08, 2013
<!DOCTYPE html > 
<html> 
<head> 
<meta content="text/html; charset=utf-8" /> 
<title>图片左右间隔滚动Jquery特效</title> 
<style type="text/css"> 
*{ margin:0px; padding:0px; font-size:12px;} 
a{ text-decoration:none; font-size:12px;} 
a:link{color:#383455;font-size:12px;} 
a:hover{color:#ff0000;font-size:12px;} 
a:visited{color:#383455;font-size:12px;} 
img{ border:none;} 
.hl_main5_content{width:898px; height:155px; border-top:none; margin-left:1px; margin:100px auto;} 
.hl_main5_content1{width:838px;margin-top:5px; overflow:hidden; float:left; margin-left:15px;} 
.hl_main5_content1 ul{width:1600px; overflow:hidden;} 
.hl_main5_content1 ul li{ float:left; width:200px; display:inline; border:1px #FF0000 solid; margin-right:10px;} 
.hl_main5_content1 ul li img{ width:200px; } 
.hl_scrool_leftbtn{width:14px; height:38px; background:#ccc url(hl_scroll_left.jpg) no-repeat; float:left; margin-top:50px; cursor:pointer;} 
.hl_scrool_rightbtn{width:14px; height:38px; background:#ccc url(hl_scroll_right.jpg) no-repeat; float:right;margin-top:50px; cursor:pointer;} 
</style> 
</head> 
<body> 
<div class="hl_main5_content"> 
<div class="hl_scrool_leftbtn"></div> 
<div class="hl_scrool_rightbtn"></div> 
<div class="hl_main5_content1"> 
<ul> 
<li><a href="" title=""><img src="images/hl_scr.jpg" /></a></li> 
<li><a href="" title=""><img src="images/hl_scr1.jpg" /></a></li> 
<li><a href="" title=""><img src="images/hl_scr2.jpg" /></a></li> 
<li><a href="" title=""><img src="images/hl_scr3.jpg" /></a></li> 
<li><a href="" title=""><img src="images/hl_scr1.jpg" /></a></li> 
<li><a href="" title=""><img src="images/hl_scr2.jpg" /></a></li> 
<li><a href="" title=""><img src="images/hl_scr3.jpg" /></a></li> 
</ul> 
</div> 
</div> 
</div> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"> </script> 
<script type="text/javascript"> 
var flag = "left"; 
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}); 
}); 
flag = "left"; 
}); 
prev.click(function(){ 
img.find('li:last').prependTo(img); 
img.css({'margin-left':-w}); 
img.animate({'margin-left':0}); 
flag = "right"; 
}); 
if (or == true){ 
ad = setInterval(function() { flag == "left" ? next.click() : prev.click()},s*1000); 
wraper.hover(function(){clearInterval(ad);},function(){ad = setInterval(function() {flag == "left" ? next.click() : prev.click()},s*1000);}); 
} 
} 
DY_scroll('.hl_main5_content','.hl_scrool_leftbtn','.hl_scrool_rightbtn','.hl_main5_content1',3,true);// true为自动播放,不加此参数或false就默认不自动 
</script> 
<div style="margin:0 auto; width:950px;"> 
支持自动播放的开启与关闭,同时支持左右箭头的点击播放。主要是修改DY_scroll()里面的参数,第一个参数hl_main5_content是最外层的div的class,其次是左边按纽,右边按纽,包含图片的div,时间(控制速度的,值越小越快),是否自动播放。</div> 
</body> 
</html>

效果图如下:
jquery实现图片左右间隔滚动特效(可自动播放)
Javascript 相关文章推荐
Javascript valueOf 使用方法
Dec 28 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
浅析node.js中close事件
Nov 26 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
编写React组件项目实践分析
Mar 04 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 #Javascript
jquery插件validate验证的小例子
May 08 #Javascript
jQuery ui插件的使用方法代码实例
May 08 #Javascript
js模拟select下拉菜单控件的代码
May 08 #Javascript
js工具方法弹出蒙版
May 08 #Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 #Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 #Javascript
You might like
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP里的单例类写法实例
2015/06/25 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
python计算两个数的百分比方法
2018/06/29 Python
Python BS4库的安装与使用详解
2018/08/08 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
介绍一下linux的文件权限
2014/07/20 面试题
2014年班组建设工作总结
2014/12/01 职场文书
总经理司机岗位职责
2015/04/10 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
汽车销售员工作总结
2015/08/12 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python