图片左右间隔滚动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.傲游.搜狗.世界之 ...
随机推荐
- web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG，完美解决
[问题]移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea.HTML5中contenteditable等),同时存在的 ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- JavaScript变换表格边框颜色
效果查看:http://hovertree.com/texiao/js/2.htm 代码如下,保存到HTML文件也可以查看效果: <html> <head> <meta ...
- 高性能javascript学习笔记系列(5) -快速响应的用户界面和编程实践
参考高性能javascript 理解浏览器UI线程 用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程 UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q116-Q120)
Question 116 You are helping a corporate IT department create a SharePoint 2010 information archite ...
- Objective-C 快速入门--基础(五)
1.什么是属性?属性会帮我们做哪些事情?请详细说明. (1)①属性是Objective-C 2.0定义的语法,为实例变量提供了setter.getter方法的默认实现:②能在一定程度上简化程序代码,并 ...
- Android 图片压缩、照片选择、裁剪，上传、一整套图片解决方案
1.Android一整套图片解决方案 http://mp.weixin.qq.com/s?__biz=MzAxMTI4MTkwNQ==&mid=2650820998&idx=1& ...
- iOS 10 都有什么改变?
iOS 10 都有什么改变? 看这一个贴就够了 最全面的试用 苹果在 WWDC 2016 发布会上正式发布了 iOS 10 操作系统,iOS 与 macOS.tvOS 和 watchOS 构建了苹果四 ...
- Android 异步任务，通过PHP访问数据库，多线程，线程间通讯
文章列表MainActivity.java package com.eric.asynctask; import java.io.IOException; import java.util.Array ...
- ImageView的ScaleType属性
ImageView的ScaleType各种值代表的意义: CENTER:不进行任何缩放,将图片放在容器中间 CENTER_CROP:如果图片长宽都大于等于容器长宽,则图片不缩放,否则按固定长宽比缩放, ...