<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Alex_Kind</title>
<meta name="keywords" content="">
<meta name="description" content="">
<script src="http://js.3conline.com/min/temp/v1/lib-jquery1.4.2.js"></script>
<style>
*{margin:0px;padding:0px;}
ul,li{margin:0px;padding:0px;}
.fl{float:left; width:50px;display: inline;margin-top: 100px}
.fl a{display:block;width:14px;height:67px; background:url("images/bg.png") left top no-repeat;}
.fl a:hover{ background:url("images/bg.png") left bottom no-repeat;}
.fr{float:right;width:50px;display: inline;margin-top: 100px}
.fr a{display:block;width:14px;height:67px; background:url("images/bg.png") right top no-repeat;float:right;}
.fr a:hover{ background:url("images/bg.png") right bottom no-repeat;}
.main{height:252px; width:550px; margin:50px auto; overflow:hidden;}
.boxX{ height:250px; width:440px;margin:0px auto;overflow:hidden; float:left;position:relative;}
.boxX ul{position:absolute;}
.boxX ul li{width:440px; height:250px;display:inline; float:left;}
</style>
</head>
<body>
<div class="main" id="scroll1">
<div class="fl" id="fl1">
<a href="#"></a>
</div>
<div class="boxX">
<ul>
<li><img src="images/01.jpg" width="440" height="250"></li>
<li><img src="images/02.jpg" width="440" height="250"></li>
<li><img src="images/03.jpg" width="440" height="250"></li>
<li><img src="images/04.jpg" width="440" height="250"></li>
<li><img src="images/05.jpg" width="440" height="250"></li>
<li><img src="images/06.jpg" width="440" height="250"></li>
<li><img src="images/07.jpg" width="440" height="250"></li>
</ul>
</div>
<div class="fr" id="fr1">
<a href="#"></a>
</div>
</div>
<script type="text/javascript">
var slide = {
ul:$("#scroll1 ul"),
li:$("#scroll1 ul li"),
left:$("#fl1"),
right:$("#fr1"),
imgWidth:$('#scroll1 ul li img').width(),
init:function(){
slide.ul.width(slide.li.length * slide.li.width());
slide.slideauto();
slide.left.click(slide.slideleft).hover(slide.slidestop,slide.slideauto);
slide.right.click(slide.slideright).hover(slide.slidestop,slide.slideauto);
slide.ul.hover(slide.slidestop,slide.slideauto);
},
slideleft:function(){
slide.left.unbind('click',slide.slideleft);
slide.ul.animate({'left':-slide.imgWidth},350,function(){
slide.ul.css('left','0');
slide.ul.find("li:first").appendTo(slide.ul);
slide.left.bind('click',slide.slideleft);
});
return false
},
slideright:function(){
slide.right.unbind('click',slide.slideright);
slide.ul.find('li:last').prependTo(slide.ul);
slide.ul.css('left',-slide.imgWidth);
slide.ul.animate({'left':0},350,function(){
slide.right.bind('click',slide.slideright);
});
return false
},
slideauto:function(){
slide.intervalId = window.setInterval(slide.slideleft,2000);
},
slidestop:function(){
window.clearInterval(slide.intervalId);
}
};
$(document).ready(function(){
slide.init();
});
</script>
</body>
</html>
demo
