<!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>
<title></title>
<link href="yangshi/css.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var timer; //定时器
var curno = 1;
var length = $(".lunbo ul li").length; //有几张图片
$(".lunbo ul").css("width", length * 137 + "px");
$(".topimg").hover(function () {
//鼠标移上去执行的内容
clearInterval(timer);
}, function () {
//鼠标移走时执行的内容
timer = setInterval(scroll, 3000);
}).trigger("mouseover"); //trigger("mouseover")窗体加载的时候就触发一次mouseover事件
$(".lunbo").hover(function () {
//鼠标移上去执行的内容
clearInterval(timer);
}, function () {
//鼠标移走时执行的内容
timer = setInterval(scroll, 3000);
})
$(".lunbo .bl").click(function () {
if (curno == 0) {
}
else {
curno--;
}
$(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);
var src = $(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");
$(".topimg img").attr("src", src); //上面图片显示
if (curno == 0) {
$(‘.lunbo ul‘).stop(true, false).animate({ left: "0px" }, 1000);
}
else if (curno > 2 && curno + 2 < length) {
$(".lunbo ul").css("margin-left", 0);
var nowLeft = -(curno - 2) * "137" + "px";
$(‘.lunbo ul‘).stop(true, false).animate({ left: nowLeft }, 1000);
}
})
$(".lunbo .br").click(function () {
if (curno == 0) {
}
else {
curno++;
}
$(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);
var src = $(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");
$(".topimg img").attr("src", src); //上面图片显示
if (curno == 0) {
$(‘.lunbo ul‘).stop(true, false).animate({ left: "0px" }, 1000);
}
else if (curno > 2 && curno + 2 < length) {
$(".lunbo ul").css("margin-left", 0);
var nowLeft = -(curno - 2) * "137" + "px";
$(‘.lunbo ul‘).stop(true, false).animate({ left: nowLeft }, 1000);
}
})
function scroll() {
//轮播图高亮显示
$(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);
var src = $(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");
$(".topimg img").attr("src", src); //上面图片显示
if (curno == 0) {
$(‘.lunbo ul‘).stop(true, false).animate({ left: "0px" }, 1000);
}
else if (curno > 2 && curno + 2 < length) {
$(".lunbo ul").css("margin-left", 0);
var nowLeft = -(curno - 2) * "137" + "px";
$(‘.lunbo ul‘).stop(true, false).animate({ left: nowLeft }, 1000);
}
curno++;
if (curno == length) {
curno = 0;
}
}
})
</script>
</head>
<body>
<div class="topimg"><img src="image/1.jpg" /></div>
<div class="lunbo">
<div class="thumb">
<div class="b bl"></div>
<div class="li">
<ul>
<li><img src="image/1.jpg" /></li>
<li><img src="image/2.jpg" /></li>
<li><img src="image/3.jpg" /></li>
<li><img src="image/4.jpg" /></li>
<li><img src="image/5.jpg" /></li>
<li><img src="image/6.jpg" /></li>
<li><img src="image/7.jpg" /></li>
</ul>
</div>
<div class="b br"></div>
</div>
</div>
</body>
</html>
原文：http://www.cnblogs.com/mengluo/p/5971301.html