<!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" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<title>slides</title>
</head>
<body>
<style type="text/css">
#slides{ width:960px; overflow:hidden; position:relative; float:left;}
.ruzhu{ width:15px; height:85px; position:absolute; z-index:6;color:#FFF;background:#999; opacity:0.7;filter:alpha(opacity=70);-moz-opacity:0.7; text-align:center; padding-top:25px; display:none;}
.ruzhu a{ color:#000; text-decoration:none;}
.content{width:960px; height:116px; float:left;}
.content div{width:230px; padding:0 5px; height:116px; float:left; word-break:break-all;}
</style>
<div id="slides">
<div class="ruzhu"><a href="#">顯示文字</a></div>
<div class="ruzhu" style="right:0;"><a href="#">顯示文字</a></div>
<div class="content">
<div>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
<div>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
<div>EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div>
<div>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div>
<div>GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div>
<div>HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</div>
</div>
</div>
<script type="text/javascript">
(function($) {
var option = {
obj:'slides',
play: 5000,
shownum:4
};
var elem = $('#'+option.obj),
divobjs = $('.content div', elem),
content = $('.content',elem),
total = divobjs.size(),
width = divobjs.outerWidth(),
height = divobjs.outerHeight(),
divLeft,
moveact,
playInterval;
if (total < option.shownum) {return;};
content.css({'width':width*total+'px','position':'relative'});
elem.bind('mouseover',function() {
$('.ruzhu', elem).fadeIn();
stop();
});
elem.bind('mouseleave',function() {
$('.ruzhu', elem).fadeOut();
play();
});
function stop() { clearInterval(playInterval) };
function play() { playInterval = setInterval(function(){animate();},option.play); }
function animate() {
divLeft = parseInt(content.css('left'));
divLeft = isNaN(divLeft) ? 0 : Math.abs(divLeft);
moveact = divLeft >= (total - option.shownum) * width ? 0 : '-='+width;
content.animate({left:moveact});
}
play();
})(jQuery);
</script>
</body>
</html>
