Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Simple and practical JavaScript code for displaying browsing effects</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">* {Margin: 0; padding: 0; font-size: 12px;} img {border: 0px;} # pic {width: 800px; height: 600px; line-height: 600px; text-align: center;} # Block {width: 800px; height: 700px; position: relative;} # pic img {width: 800px; height: 600px; display: block ;}# Block a {cursor: pointer; text-decoration: none; width: 120px; height: 90px; display: inline-block; overflow: hidden; position: relative ;} # Block a span {position: absolute; top: 2px; left: 2px; background: white; padding: 1px ;}# Block. over {background: red; color: red; padding: 2px ;}# Block a img {width: 120px; height: 90px ;}# sPic {float: left; border: 1px solid # d2d2d2;} # la {width: 40px; height: 60px; position: absolute; left: 0; top: 300px; background: # fff url (yun_qi_img/20100806121312.png) no-repeat center; cursor: pointer ;}# ra {width: 40px; height: 60px; right: 0; top: 300px; position: absolute; background: # fff url (yun_qi_img/20100806121415.png) no-repeat center; cursor: pointer;} # lscroll {width: 20px; height: 94px; float: left; background: # f9f9f9 url (yun_qi_img/20100806121524.png) no-repeat center; display: inline; cursor: pointer ;}# rscroll {width: 20px; height: 94px; float: right; background: # f9f9f9 url (yun_qi_img/20100806121559.png) no-repeat center; display: inline; cursor: pointer ;}</style></head><body><!--把下面代码加到<body>与</body>之间--><div id="Block"> <div id="pic"></div> <div id="sPic"> <div id="lscroll"></div> <div id="rscroll"></div> <!--图片链接--> </div> <div id="la"></div> <div id="ra"></div></div><script type="text/javascript">Var picSrc = {bigPic: ["assets/01.jpg"," yun_qi_img/02.jpg", "assets/03.jpg"," assets/04.jpg", "assets/05.jpg"," assets/06.jpg ", "Success/07.jpg"], smallPic: [" success/fail 1016.jpg", "success/fail 1008.jpg"," success/fail, "success/fail 1006.jpg"," success/fail 1010.jpg", "success/fail 1014.jpg ", "yun_qi_img/20171018.jpg"]}; var count = 6; var href = document. getElementsByTag Name ("a"); var showPic = document. getElementById ("showPic"); var picBlock = document. getElementById ("pic"); var img = new Image (); // var smImg = new Image (); // Thumbnail var imgElem = document. createElement ('IMG '); var j = 0; var flag = true; var t = null; var intTimeStep = 20; var intAlphaStep = 0.05; var curOpacity = null; var la = document. getElementById ("la"); var ra = document. getElementById ("ra"); var ls = document. getElementById ("ls Croll "); var rs = document. getElementById (" rscroll "); picBlock. innerHTML =" loading images ...... "; // Print all numeric buttons and add the click event for (var I = 0; I<href.length;i++){//这个闭包有没有影响性能？什么情况下才可以用到闭包？(function(n){var sn=document.createElement("span");var txt=document.createTextNode((n+1)+"/"+href.length);sn.appendChild(txt);href[i].appendChild(sn);//这里想把小图弄成分别加载的方式，希望提供思路var spic=document.createElement("img");smImg.src=picSrc.smallPic[n];spic.src=smImg.src;href[n].appendChild(spic);if(n>= Count) href [n]. style. display = "none"; href [n]. onclick = function () {if (imgElem = null) return false; handlePic (n); j = n ;}) (I );} // start to display the first img. src = picSrc. bigPic [0]; picBlock. innerHTML = ""; imgElem. src = img. src; picBlock. appendChild (imgElem); setObjState (); href [0]. className = "over"; // Click "loop" to the right to play ra. onclick = rs. onclick = function (e) {j = j + 1; if (j> = href. length) {// if (window. confirm ("This is the last one. Do you want to continue? ") {J = 0; href [j]. style. display = "inline-block"; href [j + count]. style. display = "none"; //} // else // {// j = href. length-1; // return false; //} if (j> = count) {href [j]. style. display = "inline-block"; href [j-count]. style. display = "none";} handlePic (j);} // Click left to play la. onclick = ls. onclick = function () {j = J-1; if (j <0) {j = href. length-1; href [j-count]. style. display = "none"; href [j]. style. display = "inline-block";} if (j = 0) {href [j + count]. style. display = "none"; href [j]. style. display = "inline-block";} handlePic (j);} function handlePic (whichPic) {var whichPic = whichPic; var target = picSrc. bigPic [whichPic]; img. onload = function () {if (img. complete) {picBlock. innerHTML = ""; imgElem. src = img. src; picBlock. appendChild (imgElem); setObjState (); for (var m = 0; m<href.length;m++){ href[m].className="";} //给当前a添加样式 href[whichPic].className="over"; } } picBlock.innerHTML="图片加载中……"; img.src=target;};//设置图片的初始透明度function setObjState() { if(imgElem==null)return false;imgElem.style.filter='alpha(opacity=0)';imgElem.style.opacity=0; imgElem.style.display=''; curOpacity=0; setObjOpen(); } //图片开始淡入function setObjOpen() { if(imgElem==null)return false; curOpacity+=intAlphaStep; imgElem.style.filter='alpha(opacity='+(curOpacity*100)+')'; imgElem.style.opacity =curOpacity; if (curOpacity<1) setTimeout('setObjOpen()',intTimeStep); } </script></body></html>
Tip: you can modify some code before running
