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 相关文章推荐
基于jquery的direction图片渐变动画效果
May 24 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
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之第七天
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
python实现AES加密解密
2019/03/28 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
毕业生就业自荐信
2013/12/04 职场文书
餐饮加盟计划书
2014/01/10 职场文书
《画家乡》教学反思
2014/04/22 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
商铺门面租房协议书
2014/10/21 职场文书
2015年电教工作总结
2015/05/26 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang