图片左右间隔滚动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. 装配bean

    spring有三种装配bean的方式:隐式装配.java代码装配.xml装配 隐式装配最为省事方便,也称为自动化装配 这三种装配方式可以混搭着来用 在这里通过一个例子来讲述配置 CD的两个实现,一个是 ...

  2. Java的一些常见问题，JRE,JDK,JVM,包等概念理解

    Java常见错误: 文件名字应该与文件中public类的名字相同 public static void main(String[] args); 如何定位错误和解决错误. JVM,JRE,JDK解释和 ...

  3. 修改ArcSDE的最大连接数

    我们大体都知道ArcSDE的连接数有 48 的限制,很多人也知道这个参数可以修改,并且每种操作系统能支持的最大连接数是不同的. 如果应用报错:超出系统最大连接数该如何处理? 两种解决办法: 第一,首先 ...

  4. Android细笔记--ContentProvider

    Provider的不常见访问方式 Batch access:访问ContentProvider的一中模式,使用该模式可以同时对provider进行多个操作,且支持同时操作多个表.使用时首先构建一个Co ...

  5. iPad编程

    1. iPad 现有型号: iPad Pro, iPad Air, iPad mini 均配备Retina显示屏.早期还有iPad 依次对应的坐标系及分辨率: iPad Pro 坐标系:1366 x ...

  6. iOS开发之功能模块--高仿Boss直聘的常用语的开发

    首先上Boss直聘的功能界面截图,至于交互请读者现在Boss直聘去交互体验:     本人的公司项目要高仿Boss直聘的IM常用语的交互功能,居然花费了我前后17个小时完成,这回自己测试了很多遍,代码 ...

  7. jdb - The Java Debugger

    jdb 是一个简单的命令行调试器,可以调试本地或远程 Java Virtual Machine. jdb [ options ] [ class ] [ arguments ] options 命令行 ...

  8. 虚拟机VMware与主机共享文件介绍

    我们经常会在Windows平台安装虚拟机VMware,不管是出于实验测试还是工作需要,伴随而来的就是经常需要在Windows系统和虚拟机系统之间进行共享数据文件,例如,需要将Window主机上的Ora ...

  9. 深入解析Windows操作系统笔记——CH2系统结构

    2.系统结构 本章主要介绍系统的总体结构,关键部件之间的交互,以及运行在什么环境. 2.系统结构 2.1 需求和设计目标 2.2 操作系统模型 2.3 总体结构 2.3.1 可移植性 2.3.2 对称 ...

  10. MySQL优化概述

    一. MySQL优化要点 MySQL优化是一门复杂的综合性技术,主要包括: 1 表的设计合理化(符合 3NF,必要时允许数据冗余) 2.1 SQL语句优化(以查询为主) 2.2 适当添加索引(主键索引 ...