图片左右间隔滚动Jquery特效
图片左右间隔滚动Jquery特效,支持自动播放的开启与关闭,同时支持左右箭头的点击播放，具体处理程序如下
<!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="http://www.jqsite.com/resouces/u100913319/plug/image/2c32528de1904049b83fa29bc8770c13.png" /></a></li>
<li><a href="" title=""><img src="http://www.jqsite.com/resouces/u100913319/plug/image/2c32528de1904049b83fa29bc8770c13.png" /></a></li>
<li><a href="" title=""><img src="http://www.jqsite.com/resouces/u100913319/plug/image/2c32528de1904049b83fa29bc8770c13.png" /></a></li>
<li><a href="" title=""><img src="http://www.jqsite.com/resouces/u100913319/plug/image/2c32528de1904049b83fa29bc8770c13.png" /></a></li>
<li><a href="" title=""><img src="http://www.jqsite.com/resouces/u100913319/plug/image/2c32528de1904049b83fa29bc8770c13.png" /></a></li>
<li><a href="" title=""><img src="http://www.jqsite.com/resouces/u100913319/plug/image/2c32528de1904049b83fa29bc8770c13.png" /></a></li>
<li><a href="" title=""><img src="http://www.jqsite.com/resouces/u100913319/plug/image/2c32528de1904049b83fa29bc8770c13.png" /></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特效的更多相关文章
- DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
- 一款兼容IE6并带有多图横向滚动的jquery特效
一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 鼠标滑过图片变暗文字链接滑出jQuery特效
效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- Jquery实现图片左右自动滚动
图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML> <html> ...
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
- jquery 图片自动无缝滚动
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 一款基于jQuery的图片场景标注提示弹窗特效
今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...
随机推荐
- css中的各种单位简述以及ios10下safari禁止缩放的问题
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- JS 预解释相关理解
1.JS中的内存空间分为两种:栈内存.堆内存 栈内存:提供JS代码执行的环境;存储基本数据类型的值; ->全局作用域或者私有的作用域其实都是栈内存 堆内存:存储引用数据类型的值(对象是把属性名和 ...
- jqGrid几个需要注意的默认设置
jqGrid中的option属性设置中,几乎每个属性都会给出默认值,然而,有些默认值实在有些坑爹,导致在使用过程中,如果没有注意到而使用了默认值,就会出现一些问题. height:是指jqGrid表格 ...
- MSSQL 分页
使用数据库分页返回用户数据有如下好处:1.减少服务器磁盘系统地读取压力2.减少网络流量,减轻网络压力3.减轻客户端显示数据的压力4.提高处理效率. 一般而言分页处理分为两种:应用程序中的分页(查询出所 ...
- #8.31课堂总结#JS基础
一.Javascript能做些什么? 表单数据合法性验证 网页特效:使用DOM和CSS可以实现网页特效 交互式菜单:创作具有动态效果的交互式菜单,完全能够与flash制作的导航菜单相媲美 动态页面:使 ...
- C# PPT Operator
来自:http://blog.csdn.net/lxzh12345/article/details/47047491 最近在写一个工具,设计到将界面内容到处到PPT中,且导出的内容能够编辑.网上搜了很 ...
- python之socket－ssh实例
本文转载自大王http://www.cnblogs.com/alex3714/articles/5830365.html 加有自己的注释,应该会比原文更突出重点些 一. 基本Socket实例 前面讲了 ...
- String.Empty、null、“” 区别
概念准备: 1.引用类型是将对象是实际数据保存在堆中, 将对象在堆中的地址保存在栈中. 2.值类型直接将实际数据存放在堆中,不会将对象在堆中的地址保存在栈中. 一.String.Empty和" ...
- SQL SERVER Transactional Replication中添加新表如何不初始化整个快照
在SQL SERVER的复制(Replication)中,有可能出现由于业务需求变更,需要新增一张表或一些表到已有的复制(发布订阅)当中,这种需求应该是很正常,也很常见的.但是在已有的复制(发布订阅) ...
- SQL Server自动化运维系列——关于数据收集（多服务器数据收集和性能监控）
需求描述 在生产环境中,很多情况下需要采集数据,用以定位问题或者形成基线. 关于SQL Server中的数据采集有着很多种的解决思路,可以采用Trace.Profile.SQLdiag.扩展事件等诸多 ...