缩略图写的有点粗糙呢，
我会好好加油的。
好了，话不多说，我贴代码啦。有啥不对的或者可以再改进的地方希望看到的你能帮我指出来，我们一起加油共同进步哦！
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style> | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| text-decoration: none; | |
| } | |
| .box{ | |
| width: 550px; | |
| height: 450px; | |
| border: 2px #666 solid; | |
| margin: 50px auto; | |
| background:url(img/bg.jpg) no-repeat; | |
| position: relative; | |
| } | |
| #pic{ | |
| width: 500px; | |
| height: 360px; | |
| border: 2px #666 solid; | |
| position: relative; | |
| left: 25px; | |
| top: 25px; | |
| } | |
| .box a{ | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(255,255,255,1); | |
| display: block; | |
| font-size: 24px; | |
| text-align: center; | |
| line-height: 40px; | |
| position: absolute; | |
| top: 160px; | |
| } | |
| .box a:hover{ | |
| background: rgba(255,255,255,0.5); | |
| } | |
| .box a#lbtn{ | |
| left:5px; | |
| } | |
| .box a#rbtn{ | |
| right:5px; | |
| } | |
| #pic img{ | |
| width: 500px; | |
| height: 360px; | |
| } | |
| #pic ul{ | |
| width: 200px; | |
| position: absolute; | |
| left:215px; | |
| bottom: -25px; | |
| } | |
| #pic ul li{ | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: #666; | |
| margin-left: 30px; | |
| float: left; | |
| } | |
| #pic ul li::before{ | |
| content: ''; | |
| display: block; | |
| width: 80px; | |
| height: 60px; | |
| position: absolute; | |
| background: url("img/img1/belle.jpg") ; | |
| background-size: contain; | |
| display: none; | |
| } | |
| #pic ul li:hover::before{ | |
| display: block; | |
| } | |
| #pic ul li:nth-child(2)::before{ | |
| background:url("img/img1/city.jpg") ; | |
| background-size: contain; | |
| top: -60px; | |
| } | |
| #pic ul li:nth-child(3)::before{ | |
| background:url("img/img1/flower.jpg"); | |
| background-size: contain; | |
| left: 30px; | |
| } | |
| #pic ul li:nth-child(4)::before{ | |
| background:url("img/img1/rouse.jpg") ;background-size: contain; | |
| top: -60px; | |
| } | |
| #pic ul li:nth-child(5)::before{ | |
| background:url("img/img1/smail.jpg"); | |
| background-size: contain; | |
| right:-80px; | |
| } | |
| #pic .active{ | |
| background: #fc3; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="box"> | |
| <div id="pic"> | |
| <img src="" alt="" id="img"> | |
| <a id="lbtn" href="javascript:;"><</a> | |
| <a id="rbtn" href="javascript:;">></a> | |
| <ul> | |
| </ul> | |
| </div> | |
| </div> | |
| <script> | |
| window.onload=function(){ | |
| var oDiv=document.getElementById('pic'); | |
| var oImg=oDiv.getElementsByTagName('img')[0]; | |
| var oUl=oDiv.getElementsByTagName('ul')[0]; | |
| var aLi=oUl.getElementsByTagName('li'); | |
| var lbtn=document.getElementById('lbtn'); | |
| var rbtn=document.getElementById('rbtn'); | |
| var arrUrl=["img/img1/belle.jpg","img/img1/city.jpg","img/img1/flower.jpg","img/img1/rouse.jpg","img/img1/smail.jpg"]; | |
| var n=0; | |
| var oldLi=null; | |
| for (var i = 0; i < arrUrl.length; i++) { | |
| oUl.innerHTML+='<li><a></a></li>'; | |
| } | |
| fn(0); | |
| for (var i = 0; i < aLi.length; i++) { | |
| aLi[i].index=i; | |
| aLi[i].onclick=function(){ | |
| oldLi.className=''; | |
| fn(this.index); | |
| } | |
| } | |
| function f1(){ | |
| for(var j=0;j<aLi.length;j++){ | |
| aLi[j].style.background="#666"; | |
| } | |
| aLi[n].style.background='#fc3'; | |
| } | |
| function fn(n){ | |
| oImg.src=arrUrl[n]; | |
| aLi[n].className='active'; | |
| oldLi=aLi[n]; | |
| } | |
| lbtn.onclick=function(){ | |
| n--; | |
| if(n<0){ | |
| n=arrUrl.length-1; | |
| }; | |
| fn(n); | |
| f1(); | |
| } | |
| rbtn.onclick=function(){ | |
| n++; | |
| if(n>arrUrl.length-1){ | |
| n=0; | |
| } | |
| f1(); | |
| fn(n); | |
| } | |
| }; | |
| </script> | |
| </body> | |
| </html> |