您的位置：首页 > Web前端 > JavaScript

javascript：自定义属性缩略图切换练习

2016-07-28 11:16 423 查看 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div,p,ul,li{padding:0; margin:0;}
#div1{width:710px;height:568px;background:#ccc url(../img/zidingyishuxing/bj1.jpg) no-repeat;}
#div2{width:683px;height:458px;margin:0px 15px 0px 12px;position:relative;}
#div2 a{width:80px;height:80px;opacity:0.6;line-height:80px;position:absolute;font-size:40px;
display:block;background:url(../img/zidingyishuxing/a.png) no-repeat center center;color:#fff;
text-align:center;opacity:0.5;}
#div2 a:hover{width:80px;height:80px;position:absolute;font-size:40px;display:block;opacity:1;
background:url(../img/zidingyishuxing/a.png) no-repeat center center;}
#a1{top:220px;left:30px;}
#a2{top:220px;right:20px;}
p{height:40px;font-size:24px;text-indent:15px;line-height:40px;}
ul{display:inline-block;background:blue;text-align:center;width:710px;height:70px; line-height:70px;}

ul li{display:inline-block;list-style:none;width:60px;height:60px;position:relative;
text-align:center;line-height:70px;margin-right:10px;
background:url(../img/zidingyishuxing/yko.png) no-repeat center center;}
.bg{background:url(../img/zidingyishuxing/ykt.png) no-repeat center center;}

ul li a{display:inline-block;position:absolute;top:0px;}
ul li img{display:none;width:100px;height:67px;background:yellow;position:absolute;top:-80px;}
</style>
<script type=“text/javascript”>
window.onload = function(){
var div2 = document.getElementById('div2');
var div = document.getElementsByTagName('div')[0];
//alert(div[0].innerHTML);//2
var p1 = document.getElementsByTagName('p')[0];
var a1 = document.getElementById('a1');
var a2 = document.getElementById('a2');
var img1 = div2.getElementsByTagName('img');
var ul = div.getElementsByTagName('ul')[0];//ul既不是数据也不是对象！
var imgs = ul.getElementsByTagName('img');
//alert(img instanceof(Object));
//alert(img.length);//1
var arrimg1 = ['../img/zidingyishuxing/1.jpg', '../img/zidingyishuxing/2.jpg', '../img/zidingyishuxing/3.jpg', '../img/zidingyishuxing/4.jpg', '../img/zidingyishuxing/5.jpg'];
var arrimg2 = ['../img/zidingyishuxing/11.jpg', '../img/zidingyishuxing/22.jpg', '../img/zidingyishuxing/33.jpg', '../img/zidingyishuxing/44.jpg', '../img/zidingyishuxing/55.jpg'];

var lis = ul.getElementsByTagName('li');
var imgs = ul.getElementsByTagName('img');

var m = 0;
var oldli = null;
oldli = lis[m];
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;//自定义属性
imgs[i].index = i;
//以下是ul列表中每个li点击时切换主图！
lis[i].onclick = function(){
oldli.className = '';
m = this.index;
oldli = lis[m];
oldli.className = 'bg';
//alert(this.index);
img1[0].src = arrimg1[this.index];
}

lis[i].onmouseover = function(){
//alert('kkk');
for (var j = 0; j < arrimg1.length; j++) {
imgs[j].style.display = "none";
imgs[this.index].style.display = 'block';
imgs[this.index].src = arrimg2[this.index];
}
};
}

a1.onclick = function(){
oldli.className = '';
m--;
//lis[m].style.background="url(../img/zidingyishuxing/ykt.png) no-repeat center center";

if (m >= 0) {
oldli = lis[m];
oldli.className = 'bg';
img1[0].src = arrimg1[m];
}
else {
//alert(arrimg1.length);//5
m = arrimg1.length - 1;
img1[0].src = arrimg1[m];
oldli = lis[m];
oldli.className = 'bg';
//alert(lis[m].className);
}

}

a2.onclick = function(){
oldli.className = '';
m++;

if (m < arrimg1.length) {
oldli = lis[m];
oldli.className = 'bg';
img1[0].src = arrimg1[m];
}
else {
//alert(m);
m = 0;
oldli = lis[m];
oldli.className = 'bg';
img1[0].src = arrimg1[m];
}
}

}
</script>
</head>
<body>
<div id="div1">
<p>带缩略图的图片轮转</p>
<div id="div2"><a id="a1"><</a><a id="a2">></a><img src='../img/zidingyishuxing/1.jpg'/></div>
<ul><li><a></a><img /></li><li><a></a><img /></li><li><a></a><img /></li><li><a></a><img /></li><li><a></a><img /></li></ul>
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  自定义 javascript 属性
相关文章推荐
新的分享
章节导航