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实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
微信小程序商品详情页底部弹出框
Nov 22 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结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
符合标准的js表单提交的代码
2007/09/13 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
React如何避免重渲染
2018/04/10 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
python 多线程重启方法
2019/02/18 Python
python pandas生成时间列表
2019/06/29 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
python要安装在哪个盘
2020/06/15 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
2014年员工工作总结范文
2014/11/18 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
使用Django框架创建项目
2022/06/10 Python