大幅图片幻灯片，有左右箭头控制，响应鼠标移动图片

发布时间：2018-08-19 19:54:10 所属栏目：Asp教程来源：站长网

导读：这是一款大幅的图片幻灯片效果，有左右箭头控制，响应鼠标移动图片，刚刚打开时，如果网速慢，在网页中央会有一个加载中的效果，很大气，很给力！如果你正打算做一个类似各大门户网站的幻灯新闻的话，可以考虑使用这个代码！烈火就不多介绍了，大家自己看

　　这是一款大幅的图片幻灯片效果，有左右箭头控制，响应鼠标移动图片，刚刚打开时，如果网速慢，在网页中央会有一个加载中的效果，很大气，很给力！如果你正打算做一个类似各大门户网站的幻灯新闻的话，可以考虑使用这个代码！

　　烈火就不多介绍了，大家自己看效果吧！

<!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>幻灯图集</title> <style type="text/css"> body{margin:0;padding:0; background : #000 ; color : #ccc ; width : 100%; height : 100%; overflow:hidden；cursor:hand} #cover{width : 100%; overflow:hidden;position:relative ; } #cover img{ position:absolute;left:0;top:0 ; opacity:0.1} #leftbtn{ position:absolute; left : 0 ;top:40% ; background: url("/uploads/allimg/1101/prev.png") no-repeat scroll left top transparent; display: block; height: 51px; line-height: 51px; overflow: hidden; text-indent: -99px; width: 55px; cursor : pointer ; } #rightbtn{ position:absolute; right : 0 ;top:40% ; background: url("/uploads/allimg/1101/next.png") no-repeat scroll left top transparent; display: block; height: 51px; line-height: 51px; overflow: hidden; text-indent: -99px; width: 55px; cursor : pointer ; } #thumb { position:absolute ; left:0;bottom:0; height : 100px ;display:none} #thumb li{float:left;} #num{position:absolute ; left:5px;bottom:10px;font-size : 24px ; font-family : Arial ; font-weight : bold ;} #loading{ position:absolute ; background-image: url("/uploads/allimg/1101/loader.gif"); background-position: center center; background-repeat: no-repeat; width : 100% ; height : 100px ; top:40%; display : none ; } </style> <script language="<b>Java</b>Script" type="text/javascript"> if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) { window.attachEvent("onload", enableAlphaImages); } function enableAlphaImages(){ var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, ''); var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5); if (itsAllGood) { for (var i=0; i<document.all.length; i++){ var obj = document.all[i]; var bg = obj.currentStyle.backgroundImage; var img = document.images[i]; if (bg && bg.match(/.png/i) != null) { var img = bg.substring(5,bg.length-2); var offset = obj.style["background-position"]; obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')"; obj.style.backgroundImage = "url('/uploads/allimg/1101/touming.gif')";//替换透明PNG的图片 obj.style["background-position"] = offset; // reapply } else if (img && img.src.match(/.png$/i) != null) { var src = img.src; img.style.width = img.width + "px"; img.style.height = img.height + "px"; img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')" img.src = "/uploads/allimg/1101/touming.gif";//替换透明PNG的图片 } } } } (function(){ var isReady=false; //判断onDOMReady方法是否已经被执行过 var readyList= [];//把需要执行的方法先暂存在这个数组里 var timer;//定时器句柄 ready=function(fn) { if (isReady ) fn.call( document); else readyList.push( function() { return fn.call(this);}); return this; } var onDOMReady=function(){ for(var i=0;i<readyList.length;i++){ readyList[i].apply(document); } readyList = null; } var bindReady = function(evt){ if(isReady) return; isReady=true; onDOMReady.call(window); if(document.removeEventListener){ document.removeEventListener("DOMContentLoaded", bindReady, false); }else if(document.attachEvent){ document.detachEvent("onreadystatechange", bindReady); if(window == window.top){ clearInterval(timer); timer = null; } } }; if(document.addEventListener){ document.addEventListener("DOMContentLoaded", bindReady, false); }else if(document.attachEvent){ document.attachEvent("onreadystatechange", function(){ if((/loaded|complete/).test(document.readyState)) bindReady(); }); if(window == window.top){ timer = setInterval(function(){ try{ isReady||document.documentElement.doScroll('left');//在IE下用能否执行doScroll判断 dom是否加载完毕 }catch(e){ return; } bindReady(); },5); } } })(); </script> </head> <body> <div id="loading"></div> <div id="cover"> </div> <div id="leftbtn">上一张</div> <div id="rightbtn">下一张</div> <div id="num"><span id="curNum">1</span>/<span id="allNum">20</span></div> <script type="text/javascript"> var $=function(obj){ return document.getElementById(obj) } var windowHeight=document.documentElement.clientHeight; $("cover").style.height=windowHeight+"px"; //读取小图地址载入大图 var imgArray = new Array() imgArray[0]="/uploads/common/images/14401.jpg" imgArray[1]="/uploads/common/images/14402.jpg" imgArray[2]="/uploads/common/images/14403.jpg" imgArray[3]="/uploads/common/images/14404.jpg" imgArray[4]="/uploads/common/images/14405.jpg" imgArray[5]="/uploads/common/images/14406.jpg" var num=0; $("allNum").innerHTML=imgArray.length; //设置透明度 var _opacity=0; function fadein(obj){ _opacity+=15; if(document.all){ obj.style.filter= "Alpha(opacity="+_opacity+")"; } else{ obj.style.opacity=_opacity/100; } var set=setTimeout(function(){fadein(obj)},55) if(_opacity>=100){ clearTimeout(set);_opacity=0; } } function imgready(event,nextimgobj){ $("loading").style.display="none"; $("cover").innerHTML=""; $("cover").appendChild(nextimgobj); var event=event||window.event; nextimgobj.style.left=-event.clientX*((nextimgobj.width-$("cover").offsetWidth)/$("cover").offsetWidth)+"px"; nextimgobj.style.top=-event.clientY*((nextimgobj.height-$("cover").offsetHeight)/$("cover").offsetHeight)+"px"; $("cover").onmousemove=function (event){ var event=event||window.event; nextimgobj.style.left=-event.clientX*((nextimgobj.width-this.offsetWidth)/this.offsetWidth)+"px"; nextimgobj.style.top=-event.clientY*((nextimgobj.height-this.offsetHeight)/this.offsetHeight)+"px"; } } //下一张 $("rightbtn").onclick=function (event){ num++; if(num>=imgArray.length){ num=0 } var nextimgobj=new Image(); nextimgobj.src=imgArray[num]; var nextimgobj2=new Image(); nextimgobj2.src=imgArray[num+1]; //获取数组下标为当前图片索引 for(i=0;i<=imgArray.length;i++) { if(imgArray[i]==imgArray[num]) { $("curNum").innerHTML=i+1; } } $("cover").innerHTML=""; $("loading").style.display="block"; var appname = navigator.appName.toLowerCase(); if (appname.indexOf("netscape") == -1) { if(nextimgobj.readyState == "complete") { imgready(event,nextimgobj); fadein(nextimgobj) } nextimgobj.onreadystatechange = function () { if(nextimgobj.readyState == "complete") { imgready(event,nextimgobj); fadein(nextimgobj) } }; } else{ //ff nextimgobj.onload=function(){ if (this.complete ==true) { imgready(event,nextimgobj); fadein(nextimgobj); } // 烈火網 liehuo.net 欢迎复制,拒绝恶意采集ｌｉeｈｕｏ.ｎｅｔ } } } //上一张 $("leftbtn").onclick=function(event){ //获取数组下标为当前图片索引 num--; if(num<0){ num=imgArray.length-1; } for(i=0;i<imgArray.length;i++) { if(imgArray[i]==imgArray[num]) {$("curNum").innerHTML=i+1;} } var nextimgobj=new Image(); nextimgobj.src=imgArray[num]; var nextimgobj2=new Image(); nextimgobj2.src=imgArray[num-1]; $("cover").innerHTML=""; $("loading").style.display="block"; //ie var appname = navigator.appName.toLowerCase(); if (appname.indexOf("netscape") == -1) { if(nextimgobj.readyState == "complete") { imgready(event,nextimgobj); fadein(nextimgobj); } nextimgobj.onreadystatechange = function () { if(nextimgobj.readyState == "complete") { imgready(event,nextimgobj); fadein(nextimgobj); } }; } else{ //ff nextimgobj.onload=function(){ if (this.complete ==true) { imgready(event,nextimgobj); fadein(nextimgobj) } } } } ready(function(){ var nextimgobj=new Image(); nextimgobj.src=imgArray[num]; var nextimgobj2=new Image(); nextimgobj2.src=imgArray[num+1]; $("loading").style.display="block"; //ie var appname = navigator.appName.toLowerCase(); if (appname.indexOf("netscape") == -1) { if(nextimgobj.readyState == "complete") { $("loading").style.display="none"; $("cover").innerHTML=""; $("cover").appendChild(nextimgobj); fadein(nextimgobj); $("cover").onmousemove=function (event){ var event=event||window.event; nextimgobj.style.left=-event.clientX*((nextimgobj.width-this.offsetWidth)/this.offsetWidth)+"px"; nextimgobj.style.top=-event.clientY*((nextimgobj.height-this.offsetHeight)/this.offsetHeight)+"px"; } } nextimgobj.onreadystatechange = function () { if(nextimgobj.readyState == "complete") { $("loading").style.display="none"; $("cover").innerHTML=""; $("cover").appendChild(nextimgobj); fadein(nextimgobj); $("cover").onmousemove=function (event){ var event=event||window.event; nextimgobj.style.left=-event.clientX*((nextimgobj.width-this.offsetWidth)/this.offsetWidth)+"px"; nextimgobj.style.top=-event.clientY*((nextimgobj.height-this.offsetHeight)/this.offsetHeight)+"px"; } } }; } else{ nextimgobj.onload=function(){ if (this.complete ==true) { $("loading").style.display="none"; $("cover").innerHTML=""; $("cover").appendChild(nextimgobj); fadein(nextimgobj); $("cover").onmousemove=function (event){ var event=event||window.event; nextimgobj.style.left=-event.clientX*((nextimgobj.width-this.offsetWidth)/this.offsetWidth)+"px"; nextimgobj.style.top=-event.clientY*((nextimgobj.height-this.offsetHeight)/this.offsetHeight)+"px"; } } } } }); </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：咸宁站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!