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实现返回上一页面并刷新的小例子
Dec 11 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
Node调用Java的示例代码
Sep 20 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
vue动态设置页面title的方法实例
Aug 23 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
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
javascript基本类型详解
2014/11/28 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
java程序员面试交流
2012/11/29 面试题
会计应届生的自荐信
2013/12/13 职场文书
一份创业计划书范文
2014/02/08 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers