Js幻灯图集，大图片浏览

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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("//ku.shouce.ren/files/images/201601/56a36bf596a9e.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("//ku.shouce.ren/files/images/201601/56a36bf678766.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("//ku.shouce.ren/files/images/201601/56a36bf751263.gif");
    background-position: center center;
    background-repeat: no-repeat;
    width : 100% ;
    height : 100px ;
top:40%;
display : none ;
    }
</style>
<script language="JavaScript" 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('http://image.dili360.com/photo/0907/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 = "http://image.dili360.com/photo/0907/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]="//ku.shouce.ren/files/images/201601/56a36bf826ff2.jpg"
imgArray[1]="//ku.shouce.ren/files/images/201601/56a36bfd1eaa2.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);
 }
  
}
}
}
//上一张
$("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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Js幻灯图集，大图片浏览

分类

网站常用

描述

JavaScript幻灯图集，一款图片浏览特效，作者比较谦虚，说是垃圾代码写的，因为里面有一些重复的代码，没有合理的优化，不过最终的效果挺好，而且代码多，主要是获得良好的兼容性，放上来大家参考。考虑到图片加载的速度，这里只调用了...