第3课--3.2带缩略图的图片切换效果

来源：互联网发布：如何评价网络架构编辑：程序博客网时间：2024/05/21 15:46

<!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"就可以看到！

阅读全文

0 0