<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带缩略图的图片切换效果</title>
<style>
body,ul{
padding:0;
margin:0;
}
li{
list-style:none;
}
a{
text-decoration:none;
}
.clear{
zoom:1;
}
.clear:after{
content:"";
display:block;
clear:both;
overflow:hidden;
} /*样式重置*/
body{
width:1200px;
background-color:black;
} /*设置页面大小*/
#wrap{
position:absolute;
} /*定位*/
#wrap a{
position:absolute;
width:50px;
height:50px;
padding-top:8px;
background:white;
color:black;
font:50px/40px"宋体";
opacity:0.3;
}
#wrap a:hover{
opacity:0.5;
}
#wrap #left_a{
left:200px;
top:260px;
}
#wrap #right_a{
left:1110px;
top:260px;
} /*上一张,下一张标签设置*/
#wrap img{
position:absolute;
left:280px;
top:4px;
} /*主要图片定位*/
#wrap ul{
width:240px;
position:absolute;
left:280px;
top:608px;
padding:0 280px;
} /*底部样式*/
#wrap ul li{
padding:0 6px;
width:18px;
height:18px;
background:url(img/black/change.png) no-repeat 0 -18px;
float:left;
}
#wrap ul li:hover{
background:url(img/black/change.png) no-repeat 0 0px;
}
#wrap ul li .little_pic{
position:absolute;
display:none;
} /*底部样式结束*/
</style>
<script>
window.onload = function(){
var oWrap = document.getElementById("wrap");
var Left_a = document.getElementById("left_a");
var Right_a = document.getElementById("right_a");
var Img = oWrap.getElementsByTagName("img");
var oLi = oWrap.getElementsByTagName("li"); //获取元素;
var arrpic = ["img/black/1.jpg","img/black/2.jpg","img/black/3.jpg","img/black/4.jpg","img/black/5.jpg","img/black/6.jpg","img/black/7.jpg","img/black/8.jpg"]; //要用到的图片数组;
var num = 0;
var l = 0;
var t = -156;
//变量定义;
oLi[0].style.cssText = "background:url(img/black/change.png) no-repeat 0 0px;" //打开网页时第一张图片的底部背景,默认样式;
Right_a.onclick = function(){
oLi[num].style.cssText = "background:url(img/black/change.png) no-repeat 0 1-18px;"//底部跟随变化;
num ++;
if(num == 8){
num = 0;
}
Img[0].src = arrpic[num];
oLi[num].style.cssText = "background:url(img/black/change.png) no-repeat 0 0px;"//底部跟随变化;
} //当点击右边的示意下一张时,图片及底部样式变化;
Left_a.onclick = function(){
oLi[num].style.cssText = "background:url(img/black/change.png) no-repeat 0 -18px;"//底部跟随变化;
num --;
if(num == -1){
num = 7;
}
Img[0].src = arrpic[num];
oLi[num].style.cssText = "background:url(img/black/change.png) no-repeat 0 0px;"//底部跟随变化;
} //当点击左边的示意上一张时,图片及底部样式变化;
for(var i = 0;i < oLi.length;i++){
oLi[i].innerHTML ='<img src = "img/black/'+ (i + 1) +'.png"/>';//在每个li中创建一个图片标签;
oLi[i].getElementsByTagName("img")[0].style.display = "none";//将刚刚创建的图片标签隐藏;
oLi[i].onmouseover = function(){
for(var i = 0;i < oLi.length;i++){
oLi[i].getElementsByTagName("img")[0].number = i;
} //给li标签创建一个索引属性:number;
l = this.getElementsByTagName("img")[0].number * 30 + 199;//计算出每次移动底部偏移量l的值;
this.getElementsByTagName("img")[0].className = "little_pic";//找到每个li下面的图片并加上className;
this.getElementsByTagName("img")[0].style.cssText = "display:block;left:"+ l +"px;top:"+ t +"px;"; //改变图片属性使其显示;
}
oLi[i].onmouseout = function(){
this.getElementsByTagName("img")[0].style.display = "none";//当鼠标移开时,使其再次隐藏;
}
}
for(var i = 0;i < oLi.length;i++){
for(var j = 0;j < oLi.length;j++){
oLi[j].index = j;
} //给li创建索引属性:index;
oLi[i].onclick = function(){
oLi[num].style.cssText = "background:url(img/black/change.png) no-repeat 0 1-18px;"//底部跟随图片变化;
num = this.index; //使底部小圆与上一张下一张的变化同步;
Img[0].src = arrpic[this.index];//让图片的变化和数组以及li的索引值建立关系;
this.style.cssText = "background:url(img/black/change.png) no-repeat 0 0px;"//底部跟随图片变化;
}
}
}
</script>
</head>
<body>
<div id = "wrap">
<a id = "left_a" href = "#"><</a><a id = "right_a" href = "#">></a>
<img src = "img/black/1.jpg"/>
<ul class = "clear">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
下面是图片地址:打开从“http......ter"就可以看到!