图片左右间隔滚动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. 基于mybatis-generator-core 1.3.5项目的修订版以及源码剖析

    项目简单说明 mybatis-generator,是根据数据库表.字段反向生成实体类等代码文件.我在国庆时候,没事剖析了mybatis-generator-core源码,写了相当详细的中文注释,可以去 ...

  2. Mou常用快捷键

    title: Mou常用快捷键date: 2015-11-08 17:16:38categories: 编辑工具 tags: mou 小小程序猿我的博客:http://daycoding.com Vi ...

  3. 如何将github上的 lib fork之后通过podfile 改变更新源到自己fork的地址

    解决办法: http://stackoverflow.com/questions/20936885/cocoapods-and-github-forks 就是fork完后,提交更改到自己的github ...

  4. 支付宝alipay使用小结 调用支付宝程序被杀死说明

    一. 准备阶段 如果没有蚂蚁金服开放平台的注册账号,则需要实现注册一个,这里多说一点,就是当我们以公司名义注册账号时,需要预备公司的营业执照等物品(需要上传照片等信息审核).账号申请成功之后,我们需要 ...

  5. 初识java之变量、数据类型和运算符（一）

    博友目标: 1.掌握变量的概念 2.引子----会使用常用数据类型 众所周知,每台电脑都有一个内存这么个必不可少的元素,那么到底内存到底是用来干什么的呢?其实啊,计算机内存相当于人类的大脑,计算机在处 ...

  6. [Erlang 0107] Erlang实现文本截断

       抽时间处理一下之前积压的一些笔记.前段时间有网友 @稻草人 问字符串截断的问题"各位大侠 erlang截取字符串一般用哪个函数啊",有人支招用string:substr/3, ...

  7. Linux LVM学习总结——删除物理卷

    本篇介绍LVM管理中的命令vgreduce, pvremove.其实前面几篇中以及有所涉及. vgreduce:通过删除LVM卷组中的物理卷来减少卷组容量.注意:不能删除LVM卷组中剩余的最后一个物理 ...

  8. 在CentOS中安装NodeJS

    1. 更改软件源 备份默认的软件源文件“CentOS-Base.repo” mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-B ...

  9. SQL周、日、月、年数据统计

    本文只是记录在项目中用到的统计的SQL语句,记一笔以防忘了 /// <summary> /// 获取统计数据 /// </summary> /// <param name ...

  10. 7 COMPELLING REASONS YOU NEED TO START THE BUSINESS YOU’VE ALWAYS WANTED

    原文链接:http://lesseesadvocate.com/7-compelling-reasons-need-start-business-youve-always-wanted/ Don’t ...