求大神帮忙用jQuery写一个不间断图片滚动（必有重谢必会结贴）解决思路

求大神帮忙用jQuery写一个不间断图片滚动（必有重谢必会结贴）
页面我已经写好了就我下面这个(请众位大神代码尽量简洁易懂最好是用jjQuery)

<!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>无标题文档</title>

<style>

.main{width:600px; height:200px; border:#F00 1px solid; margin-top:350px; margin-left:400px;}

.inner{ width:200px; height:200px; border:none; float:left;}

img{ width:200px; height:200px; border:none;}

</style>

</head>

<body>

<div class="main">

	<div class="inner"><img src="http://cloud.xing-xing.com/public.php?service=files&t=50890d947a1ba4c3244b1d041362e33c" /></div>

    <div class="inner"><img src="http://cloud.xing-xing.com/public.php?service=files&t=536aef72e79ff78c627af15dfb04c928" /></div>

    <div class="inner"><img src="http://cloud.xing-xing.com/public.php?service=files&t=a10a6c472664a8b2ef22e9a1459c02ba" /></div>

</div>

<h1>当图片大于3张的时候也可以正常滚动</h1>

</body>

</html>

大家放心必会结贴的

------解决思路----------------------
可以用jquery sochange插件
------解决思路----------------------

本帖最后由 showbo 于 2014-11-15 14:45:09 编辑

<!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>无标题文档</title>

<style>

.main{width:600px; height:200px; border:#F00 1px solid; margin-top:350px; margin-left:400px;overflow:hidden}

.main ul,.main  li{margin:0px;padding:0px;list-style:none;}

.main ul li{float:left;width:200px;height:200px} 

.main ul li img{width:100%;height:100%}

</style>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>

<script>

!function(a){a.fn.kxbdMarquee=function(b){var c=a.extend({},a.fn.kxbdMarquee.defaults,b);return this.each(function(){function l(){var b,a="left"==c.direction
------解决思路----------------------
"right"==c.direction?"scrollLeft":"scrollTop";return c.loop>0&&(k+=c.scrollAmount,k>i*c.loop)?(d[a]=0,clearInterval(m)):("left"==c.direction
------解决思路----------------------
"up"==c.direction?(b=d[a]+c.scrollAmount,b>=i&&(b-=i),d[a]=b):(b=d[a]-c.scrollAmount,0>=b&&(b+=i),d[a]=b),void 0)}var k,m,b=a(this),d=b.get(0),e=b.width(),f=b.height(),g=b.children(),h=g.children(),i=0,j="left"==c.direction
------解决思路----------------------
"right"==c.direction?1:0;g.css(j?"width":"height",1e4),c.isEqual?i=h[j?"outerWidth":"outerHeight"]()*h.length:h.each(function(){i+=a(this)[j?"outerWidth":"outerHeight"]()}),(j?e:f)>i
------解决思路----------------------
g.append(h.clone()).css(j?"width":"height",2*i),k=0,m=setInterval(l,c.scrollDelay),b.hover(function(){clearInterval(m)},function(){clearInterval(m),m=setInterval(l,c.scrollDelay)}))})},a.fn.kxbdMarquee.defaults={isEqual:!0,loop:0,direction:"left",scrollAmount:1,scrollDelay:20},a.fn.kxbdMarquee.setDefaults=function(b){a.extend(a.fn.kxbdMarquee.defaults,b)}}(jQuery);

</script></head>

<body>

<div class="main">

<ul>

<li><img alt="img1" src="http://avatar.****.net/4/5/A/1_expertgig11.jpg" /></li>

<li><img alt="img2" src="http://avatar.****.net/6/9/6/1_u010036886.jpg" /></li>

<li><img alt="img3" src="http://avatar.****.net/E/9/C/1_slwsss.jpg" /></li>

</ul>

</div>

<script>

$('.main').kxbdMarquee();

</script>

<h1>当图片大于3张的时候也可以正常滚动</h1>

</body>

</html>

http://code.ciaoca.com/jquery/kxbdmarquee/

求大神帮忙用jQuery写一个不间断图片滚动（必有重谢必会结贴）解决思路

相关推荐