//html部分
<div id="wrap">
<div id="slider">
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img class="tu" src="../img/tu1.jpg" /></a>
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img id="second" /></a>
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img id="third" /></a>
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img id="four" /></a>
</div>
<ul id="ui">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
//css 部分
<style type="text/css">
#wrap
{
height: 500px;
width: 500px;
overflow: hidden;
position: relative;
overflow: hidden;
}
#wrap ul
{
list-style: none;
position: absolute;
top: 455px;
left: 332px; }
#wrap li
{
margin-left:2px;
opacity:0 .3;
filter: alpha(opacity=30);
text-align: center;
line-height: 30px;
font-size: 20px;
height: 30px;
width: 30px;
background-color: #fff;
float: left;
border-radius:3px;
cursor:pointer;
}
#slider
{
position: absolute;
top: 0px;
left: 0px;
}
#slider img
{
float: left;
border: none;
}
.tu{
height: 500px;
width: 500px;
}
#ui{
z-index:;
}
//js 部分
<script type="text/javascript">
window.onload = function () {
flag = 0;
obj1 = document.getElementById("slider");
obj2 = document.getElementsByTagName("li");
obj2[0].style.backgroundColor = "#666666";
//默认被选中颜色
time = setInterval("turn();", 2000);
obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 2000);
} for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 2000);
}
}
//延迟加载图片，演示的时候，使用本地图片
//上线后请改为二级域名提供的图片地址
document.getElementById("second").src = "../img/tu2.jpg";
document.getElementById("second").width ="500";
document.getElementById("second").height ="500"; //使用图片宽660，高550
document.getElementById("third").src = "../img/tu3.jpg";
document.getElementById("third").width ="500";
document.getElementById("third").height ="500";
document.getElementById("four").src = "../img/tu4.jpg";
document.getElementById("four").width ="500";
document.getElementById("four").height ="500";
}
function turn(value) {
if (value != null) {
flag = value - 2;
}
if (flag < obj2.length - 1)
flag++;
else
flag = 0;
obj1.style.top = flag * (-500) + "px";
for (var j = 0; j < obj2.length; j++) {
obj2[j].style.backgroundColor = "#ffffff";
}
obj2[flag].style.backgroundColor = "#666666";
}
</script>
//源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS幻灯代码</title>
<script type="text/javascript">
window.onload = function () {
flag = 0;
obj1 = document.getElementById("slider");
obj2 = document.getElementsByTagName("li");
obj2[0].style.backgroundColor = "#666666";
//默认被选中颜色
time = setInterval("turn();", 2000);
obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 2000);
} for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 2000);
}
}
//延迟加载图片，演示的时候，使用本地图片
//上线后请改为二级域名提供的图片地址
document.getElementById("second").src = "../img/tu2.jpg";
document.getElementById("second").width ="500";
document.getElementById("second").height ="500"; //使用图片宽660，高550
document.getElementById("third").src = "../img/tu3.jpg";
document.getElementById("third").width ="500";
document.getElementById("third").height ="500";
document.getElementById("four").src = "../img/tu4.jpg";
document.getElementById("four").width ="500";
document.getElementById("four").height ="500";
}
function turn(value) {
if (value != null) {
flag = value - 2;
}
if (flag < obj2.length - 1)
flag++;
else
flag = 0;
obj1.style.top = flag * (-500) + "px";
for (var j = 0; j < obj2.length; j++) {
obj2[j].style.backgroundColor = "#ffffff";
}
obj2[flag].style.backgroundColor = "#666666";
}
</script>
<style type="text/css">
#wrap
{
height: 500px;
width: 500px;
overflow: hidden;
position: relative;
overflow: hidden;
}
#wrap ul
{
list-style: none;
position: absolute;
top: 455px;
left: 332px; }
#wrap li
{
margin-left:2px;
opacity:0 .3;
filter: alpha(opacity=30);
text-align: center;
line-height: 30px;
font-size: 20px;
height: 30px;
width: 30px;
background-color: #fff;
float: left;
border-radius:3px;
cursor:pointer;
}
#slider
{
position: absolute;
top: 0px;
left: 0px;
}
#slider img
{
float: left;
border: none;
}
.tu{
height: 500px;
width: 500px;
}
#ui{
z-index: 999;
} </style>
</head>
<body>
<div id="wrap">
<div id="slider">
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img class="tu" src="../img/tu1.jpg" /></a>
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img id="second" /></a>
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img id="third" /></a>
<a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img id="four" /></a>
</div>
<ul id="ui">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
// 效果预览
