|
<!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://www.751com.cn/ public.php?service=files&t=50890d947a1ba4c3244b1d041362e33c" /></div>
<div class="inner"><img src="http://www.751com.cn/ public.php?service=files&t=536aef72e79ff78c627af15dfb04c928" /></div>
<div class="inner"><img src="http://www.751com.cn/ public.php?service=files&t=a10a6c472664a8b2ef22e9a1459c02ba" /></div>
</div>
<h1>当图片大于3张的时候也可以正常滚动</h1>
</body>
</html>
可以用jquery sochange插件
<!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://www.751com.cn/ 4/5/A/1_expertgig11.jpg" /></li>
<li><img alt="img2" src="http://www.751com.cn/ 6/9/6/1_u010036886.jpg" /></li>
<li><img alt="img3" src="http://www.751com.cn/ E/9/C/1_slwsss.jpg" /></li>
</ul>
</div>
<script>
$('.main').kxbdMarquee();
</script>
<h1>当图片大于3张的时候也可以正常滚动</h1>
</body>
</html>
| 