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 相关文章推荐
js 处理URL实用技巧
Nov 23 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
JS实现炫酷轮播图
Nov 15 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
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php之curl设置超时实例
2014/11/03 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
改进Django中的表单的简单方法
2015/07/17 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
区域销售经理岗位职责
2013/12/10 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
幼儿园安全责任书
2014/04/14 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
淘宝好评语句大全
2014/12/31 职场文书
美术教师个人工作总结
2015/02/06 职场文书
文案策划岗位职责
2015/02/11 职场文书
python文件目录操作之os模块
2021/05/08 Python