图片左右间隔滚动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特效的更多相关文章

  1. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  2. 一款兼容IE6并带有多图横向滚动的jquery特效

    一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...

  3. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  4. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  5. Jquery实现图片左右自动滚动

    图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML>  <html> ...

  6. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  7. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  8. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. 一款基于jQuery的图片场景标注提示弹窗特效

    今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

随机推荐

  1. Tomcat下使用c3p0配置jndi数据源

    下载c3p0包: 下载地址:https://sourceforge.net/projects/c3p0/files/?source=navbar 解压后得到包:c3p0-0.9.2.jar,mchan ...

  2. tomcat远程调试javaweb

    当把一个本地项目部署到远程服务器后有可能出现意想不到错误,这个时候通过远程调试能够更清楚的找到bug所在位置. 目前百度tomcat绝大多数方法都是在startup.sh或者catalina.sh增加 ...

  3. iOS UITableView删除cell分割线

    UITableView是UITableViewStylePlain风格的,这样整个TableView都会被分割线分隔开,不管有没有数据,非常丑. 为了可以自定义cell的分割线: 解决方案: 将UIT ...

  4. crm on premise IFD 部署下提供oauth 2.0 集成自定义应用

    很多情况下我们的CRM系统会和弟三方应用集成,一般情况我们会开发一个中间站点来提供web api 给弟三方应用. 参考:http://alexanderdevelopment.net/post/201 ...

  5. iOS之APP应用图标的设置

    图标是IOS程序包所必需的组成部分.如果你没有提供程序所需的各种尺寸的图标,程序上传发布时可能会无法通过验证.IOS程序为兼顾不同的应用场景,定义了多个不同规格的图标,并以不同的命名区分: IOS图标 ...

  6. Objective-C Runtime 运行时之一：类与对象

    Objective-C语言是一门动态语言,它将很多静态语言在编译和链接时期做的事放到了运行时来处理.这种动态语言的优势在于:我们写代码时更具灵活性,如我们可以把消息转发给我们想要的对象,或者随意交换一 ...

  7. IOS开发基础知识--碎片26

    1:UICollectionView如果在数据不够一屏时上下滚动 当数据不多,collectionView.contentSize小于collectionView.frame.size的时候,UICo ...

  8. 【原】Github系列之二：开源 一行代码实现多形式多动画的推送小红点WZLBadge(iOS)

    更新日志 V1.2 2015.09.25 1.UITabBarItem badge is supproted; 2.Enable change badge properties when badge ...

  9. python之面向对象与构造函数

    一.面向对象介绍 不同的编程范式本质上代表对各种类型的任务采取的不同的解决问题的思路, 大多数语言只支持一种编程范式, 当然也有些语言可以同时支持多种编程范式. 两种最重要的编程范式分别是面向过程编程 ...

  10. 在 CentOS7 之部署 Redis3

    CentOS7 之 Redis3 学习笔记 1 Redis 官网: http://www.redis.io/ 2 Redis 的下载地址: http://download.redis.io/relea ...