v<!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" />
<link rel="stylesheet" href="css/css.css" type="text/css">
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<title>CSS幻灯片效果 www.divcss5.com</title>
<script>
$(function(){
var a = $(".img li").length;
var w = $(".img").width();
var b = 1;
var time;
$(".sz").find("li").click(
function(){
b = $(this).index();
auto(b);
}
)
$(".img").hover(function(){
clearInterval(time);
},
function(){
time = setInterval(function(){
if(b==a){
b=0;
}
else{
auto(b);
b++;
}
},2000)
}).trigger("mouseleave")
function auto(b){
$(".sz").find("li").eq(b).addClass("on").siblings().removeClass("on")
if(!$(".img ul").is(":animated")){
$(".img ul").stop().animate({"marginLeft":-w*b+"px"},"slow")}
}
}
)
</script>
</head>
<body>
<br />
<a href="http://www.divcss5.com">css</a> <a href="http://www.divcss5.com">div css</a> <a href="http://www.divcss5.com">div+css</a> <br />
<a href="http://www.divcss5.com">div</a> <br />
<div class="con">
<div class="img_show">
<div class="sz">
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="img">
<ul>
<li><a href="http://www.divcss5.com/"><img src="images/1.jpg" width="283" alt="css 特效" height="194"></a></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg" width="283" height="194"></li>
<li><img src="images/4.jpg" width="283" height="194"></li>
<li><img src="images/5.jpg" width="283" height="194"></li>
</ul>
</div>
</div>
</div>
</body>
</html>
