<!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:自定义属性缩略图切换练习
原创多多哇 博主文章分类:javascript练习 ©著作权
文章标签 自定义 javascript 属性 文章分类 Java 后端开发
![](https://ucenter.51cto.com/images/noavatar_middle.gif)
-
SpringBoot自定义starter
SpringBoot自定义starter
spring maven ci -
bootstrap-缩略图-自定义内容
bootstrap-缩略图-自定义内容
自定义 缩略图 bootstrap -
缩略图 java 代码 web缩略图
百度空间: 空间用户登录后直接到【设置】,主要分析模板设置,高级设置
缩略图 java 代码 .net web css 百度