<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片无缝滚动js代码ul./li结构,可重用 - 懒人建站</title>
<meta name="keywords" content="jquery特效,JS代码,js特效代码大全,js特效广告代码,导航菜单代码" />
<meta name="description" content="懒人建站为您提供-JS代码,js特效代码大全,js特效广告代码,下拉菜单,下拉菜单代码,导航菜单代码和基于jquery的各种特效与jquery插件。" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
//滚动
(function($){ $.fn.kxbdMarquee = function(options){
var opts = $.extend({},$.fn.kxbdMarquee.defaults, options); return this.each(function(){
var $marquee = $(this);//滚动元素容器
var _scrollObj = $marquee.get(0);//滚动元素容器DOM
var scrollW = $marquee.width();//滚动元素容器的宽度
var scrollH = $marquee.height();//滚动元素容器的高度
var $element = $marquee.children(); //滚动元素
var $kids = $element.children();//滚动子元素
var scrollSize=0;//滚动元素尺寸
var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型,1左右,0上下 //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
$element.css(_type?'width':'height',10000);
//获取滚动元素的尺寸
if (opts.isEqual) {
scrollSize = $kids[_type?'outerWidth':'outerHeight']() * $kids.length;
}else{
$kids.each(function(){
scrollSize += $(this)[_type?'outerWidth':'outerHeight']();
});
}
//滚动元素总尺寸小于容器尺寸,不滚动
if (scrollSize<(_type?scrollW:scrollH)){scrollSize=scrollW*2;}
//克隆滚动子元素将其插入到滚动元素后,并设定滚动元素宽度
$element.append($kids.clone()).css(_type?'width':'height',scrollSize*2); var numMoved = 0;
function scrollFunc(){
var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
if (opts.loop > 0) {
numMoved+=opts.scrollAmount;
if(numMoved>scrollSize*opts.loop){
_scrollObj[_dir] = 0;
return clearInterval(moveId);
}
}
if(opts.direction == 'left' || opts.direction == 'up'){
var newPos = _scrollObj[_dir] + opts.scrollAmount;
if(newPos>=scrollSize){
newPos -= scrollSize;
}
_scrollObj[_dir] = newPos;
}else{
var newPos = _scrollObj[_dir] - opts.scrollAmount;
if(newPos<=0){
newPos += scrollSize;
}
_scrollObj[_dir] = newPos;
}
};
//滚动开始
var moveId = setInterval(scrollFunc, opts.scrollDelay);
//鼠标划过停止滚动
$marquee.hover(
function(){
clearInterval(moveId);
},
function(){
clearInterval(moveId);
moveId = setInterval(scrollFunc, opts.scrollDelay);
}
); //控制加速运动
if(opts.controlBtn){
$.each(opts.controlBtn, function(i,val){
$(val).bind(opts.eventA,function(){
opts.direction = i;
opts.oldAmount = opts.scrollAmount;
opts.scrollAmount = opts.newAmount;
}).bind(opts.eventB,function(){
opts.scrollAmount = opts.oldAmount;
});
});
}
});
};
$.fn.kxbdMarquee.defaults = {
isEqual:true,//所有滚动的元素长宽是否相等,true,false
loop: 0,//循环滚动次数,0时无限
direction: 'left',//滚动方向,'left','right','up','down'
scrollAmount:1,//步长
scrollDelay:40,//时长
newAmount:3,//加速滚动的步长
eventA:'mousedown',//鼠标事件,加速
eventB:'mouseup'//鼠标事件,原速
}; $.fn.kxbdMarquee.setDefaults = function(settings) {
$.extend( $.fn.kxbdMarquee.defaults, settings );
}; })(jQuery); </script>
<style>
a{ font-size:13px; color:#333333; text-decoration:none;}
a:hover{color:red; text-decoration:underline;}
img{ border:none;} .marquee {width:560px;height:260px;overflow:hidden;border:1px solid #333; margin-top:20px;}
.marquee li{ display:inline; float:left; margin-right:12px;}
.marquee li a{ width:230px; height:260px; display:block; float:left; text-align:center; font-size:14px;}
.marquee li a:hove{ text-decoration:none;}
.marquee li img {width:160px; height:160px;}
.marquee li em{font-style: normal; height:24px; line-height:24px; display:block; margin-top:8px;}
</style>
</head> <body>
<script type="text/javascript">
$(document).ready(function(){
$('.marquee').kxbdMarquee({
direction:'left',
eventA:'mouseenter',
eventB:'mouseleave'
});
});
</script> <div class="marquee">
<ul>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
</ul>
</div>
<div class="marquee">
<ul>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a><em>google 404</em></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
</ul>
</div>
<div class="marquee">
<ul>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
</ul>
</div> <p>jquery图片无缝滚动js代码ul./li结构,可重用。</p> </body>
</html>

jQuery图片无缝滚动的更多相关文章

  1. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  4. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  5. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  6. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  7. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  8. JQuery的无缝滚动

    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. div+css+jQuery图片横向滚动代码(带左右点击按钮)

    首先感谢Blue老师的javascript教程,给了我很多的启发,这是我在看完10 - 定时器的使用 - 2这节视频后,自己试着用jQuery重新改写了一下代码,感觉至少比百度搜出来的那一坨靠谱多了, ...

随机推荐

  1. intellij中不能导入jar包

    ①选中项目点击右键,选择open modual settings(或者直接按F4): ②在弹出的窗口左端选择Libraries: ③点击左边加号,选择From Maven Repository; ④将 ...

  2. SSH项目里面 忘记密码的邮件发送功能

    package com.xxx.util; import java.util.Date; import java.util.Properties; import javax.mail.Address; ...

  3. Oracle - ORA-12505, TNS:listener does not currently know of SID given in connect descriptor 解决

    java.sql.SQLException: Listener refused the connection with the following error: ORA-12505, TNS:list ...

  4. [原]Hrbust1053 Warcraft III (完全背包)

    本文出自:http://blog.csdn.net/svitter 原题:http://acm.hrbust.edu.cn/index.php?m=ProblemSet&a=showProbl ...

  5. PHP中变量,常量,超级全局变量小结

    //一般来说,变量在函数无法在函数体中无法访问,但是常量可以.//超级全局变量确实可以的,地址栏上的参数/*$GLOBALS   //变量注册的信息$_GET      //地址栏参数$_POST   ...

  6. Linux终端Ctrl相关快捷键

    快速跳至行首:Ctrl+A 快速跳至行尾:Ctrl+E 向前删除至行首:Ctrl+U 向后删除至行尾:Ctrl+K 向后删一个单词:Ctrl+D 清屏:Crtl+L(clear)

  7. Oracle使用imp/exop远程导入导出dmp数据

    在导入导出数据之前,习惯性的检查一下,看看我们自己的机器可不可以连接远程的Oracle主机,检测方法是tnsping SERVICE_NAME.我的机器如下: C:\Users\zx>tnspi ...

  8. ++i和i++哪个效率高?

    这个问题需要分两种情况来解说: 1.当变量i的数据类型是c++语言默认提供的类型的话,他们的效率是一样的. int a,i=0;     a=++i;汇编代码如下: int a,i=0; 01221A ...

  9. sqlite3使用事务处理[zz]

    <!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-al ...

  10. 使用LINGO来解决0/1背包算法问题

    1.问题说明 0/1背包问题:我们有n种物品,物品j的重量为wj,价格为pj.我们假定所有物品的重量和价格都是非负的.背包所能承受的最大重量为W.如果限定每种物品只能选择0个或1个,则问题称为0-1背 ...