来自国外的一款Js图片浏览效果

　　效果图:

来自国外的一款Js图片浏览效果

　　测试代码:

<!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>Js图片浏览器</title> 
</head> 
<body> 
<button onclick="Slider.next()">play</button> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C!--%20%0D%0ASlider%20%3D%20%7B%20%0D%0AisIE%20%3A%20true%2C%20%0D%0Am_imageSource%20%3A%20%5B%5D%2C%20%0D%0Am_selIdx%20%3A%200%2C%20%0D%0Am_direction%20%3A%201%2C%20%0D%0Am_mainviewer%20%3A%20null%2C%20%0D%0Am_delayTimer%20%3A%20null%2C%20%0D%0Am_delayTimer1%20%3A%20null%2C%20%0D%0Am_curObj%20%3A%20null%2C%20%0D%0Am_tarObj%20%3A%20null%2C%20%0D%0Am_inited%20%3A%20false%2C%20%0D%0Ainit%20%3A%20function(id%2C%20w%2C%20h%2C%20w1%2C%20h1%2C%20p%2C%20t%2C%20s%2C%20source)%7B%20%0D%0Athis.isIE%20%3D%20document.all%20%3F%20true%20%3A%20false%3B%20%0D%0Athis.canvasWidth%20%3D%20w%3B%20%0D%0Athis.canvasHeight%20%3D%20h%3B%20%0D%0Athis.imageWidth%20%3D%20w1%3B%20%0D%0Athis.imageHeight%20%3D%20h1%3B%20%0D%0Athis.m_percent%20%3D%20p%3B%20%0D%0Athis.m_top%20%3D%20t%3B%20%0D%0Athis.m_spaceWidth%20%3D%20s%3B%20%0D%0Athis.writeCanvas(id)%3B%20%0D%0Afor(var%20i%3D0%3Bi%3Csource.length%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Athis.container.innerHTML%20%2B%3D%20'%3Cimg%20src%3D%22'%2Bsource%5Bi%5D%2B'%22%20border%3D%220%22%20style%3D%22'%2B(this.isIE%3F'filter%3Aalpha(opacity%3D50)'%3A'opacity%3A0.5')%2B'%3Bwidth%3A'%2Bw1%2B'px%3Bheight%3A'%2Bh1%2B'px%3Bposition%3Aabsolute%3Bleft%3A'%2B(i*w1%2Bi*this.m_spaceWidth)%2B'px%3Btop%3A'%2Bthis.m_top%2B'px%3B%22%20index%3D%22'%2Bi%2B'%22%2F%3E'%3B%20%0D%0A%7D%20%0D%0Athis.m_mainviewer%20%3D%20this.container.firstChild.cloneNode(true)%3B%20%0D%0Athis.bind()%3B%20%0D%0Athis.start()%3B%20%0D%0A%7D%2C%20%0D%0AwriteCanvas%20%3A%20function(id)%20%0D%0A%7B%20%0D%0Adocument.write('%3Cdiv%20id%3D%22'%2Bid%2B'%22%20style%3D%22width%3A'%2Bthis.canvasWidth%2B'px%3Bheight%3A'%2Bthis.canvasHeight%2B'px%3Bposition%3Arelative%3Boverflow%3Ahidden%3Bbackground-color%3Ablack%22%3E%3C%2Fdiv%3E')%3B%20%0D%0Athis.container%20%3D%20document.getElementById(id)%3B%20%0D%0A%7D%2C%20%0D%0Abind%20%3A%20function(obj%2C%20evt%2C%20fun)%7B%20%0D%0Avar%20obj%20%3D%20this.container%3B%20%0D%0Afor(var%20i%3D0%3Bi%3Cobj.childNodes.length%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Athis.attachEvent(this.container.childNodes%5Bi%5D%2C%20%22mouseover%22%2C%20this.mouseover)%3B%20%0D%0Athis.attachEvent(this.container.childNodes%5Bi%5D%2C%20%22mouseout%22%20%2C%20this.mouseout)%3B%20%0D%0Athis.attachEvent(this.container.childNodes%5Bi%5D%2C%20%22click%22%20%2C%20this.click)%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0AattachEvent%20%3A%20function(obj%2C%20evt%2C%20fun)%7B%20%0D%0Aif%20(Slider.isIE)%20%0D%0A%7B%20%0D%0Aobj.attachEvent(%22on%22%2Bevt%2C%20fun)%20%0D%0A%7Delse%20%0D%0A%7B%20%0D%0Aobj.addEventListener(evt%2C%20fun%2C%20false)%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0Amouseover%20%3A%20function(e)%20%0D%0A%7B%20%0D%0Aif(!e)e%3Dwindow.event%3B%20%0D%0Avar%20obj%20%3D%20e.srcElement%20%7C%7C%20e.target%3B%20%0D%0Aif%20(Slider.isIE)%20%0D%0A%7B%20%0D%0Aobj.style.filter%20%3D%20%22alpha(opacity%3D80)%22%3B%20%0D%0A%7Delse%7B%20%0D%0Aobj.style.opacity%20%3D%20%220.8%22%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0Amouseout%20%3A%20function(e)%20%0D%0A%7B%20%0D%0Aif(!e)e%3Dwindow.event%3B%20%0D%0Avar%20obj%20%3D%20e.srcElement%20%7C%7C%20e.target%3B%20%0D%0Aif%20(Slider.isIE)%20%0D%0A%7B%20%0D%0Aobj.style.filter%20%3D%20%22alpha(opacity%3D50)%22%3B%20%0D%0A%7Delse%7B%20%0D%0Aobj.style.opacity%20%3D%20%220.5%22%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0Aclick%20%3A%20function(e)%20%0D%0A%7B%20%0D%0Aif(!e)e%3Dwindow.event%3B%20%0D%0Avar%20obj%20%3D%20e.srcElement%20%7C%7C%20e.target%3B%20%0D%0Avar%20mobj%20%3D%20Slider.m_mainviewer%3B%20%0D%0ASlider.m_selIdx%20%3D%20obj.getAttribute(%22index%22)%3B%20%0D%0ASlider.m_curObj%20%3D%20Slider.m_mainviewer%3B%20%0D%0ASlider.m_tarObj%20%3D%20obj%3B%20%0D%0ASlider.m_delayTimer%20%3D%20Slider.fadeIn(200%2C5)%3B%20%0D%0A%7D%2C%20%0D%0Astart%20%3A%20function()%7B%20%0D%0Avar%20obj%20%3D%20this.m_mainviewer%3B%20%0D%0Aif%20(Slider.isIE)%20%0D%0A%7B%20%0D%0Aobj.style.filter%20%3D%20%22alpha(opacity%3D100)%22%3B%20%0D%0A%7Delse%7B%20%0D%0Aobj.style.opacity%20%3D%20%221%22%3B%20%0D%0A%7D%20%0D%0A%0D%0Athis.container.appendChild(this.m_mainviewer)%3B%20%0D%0Athis.m_mainviewer.style.width%20%3D%20parseInt(this.m_mainviewer.style.width)*(1%2Bthis.m_percent)%2B%22px%22%3B%20%0D%0Athis.m_mainviewer.style.height%20%3D%20parseInt(this.m_mainviewer.style.height)*(1%2Bthis.m_percent)%2B%22px%22%3B%20%0D%0Athis.m_curObj%20%3D%20this.container.childNodes%5Bthis.m_selIdx%5D%3B%20%0D%0Athis.m_tarObj%20%3D%20this.m_mainviewer%3B%20%0D%0Aif(this.m_delayTimer)clearInterval(Slider.m_delayTimer)%3B%20%0D%0Athis.m_delayTimer%20%3D%20this.fadeIn(200%2C5)%3B%20%0D%0A%7D%2C%20%0D%0Anext%20%3A%20function()%7B%20%0D%0Avar%20obj%20%3D%20this.container%3B%20%0D%0Avar%20mobj%20%3D%20this.m_mainviewer%3B%20%0D%0Aif(this.m_selIdx%20%3D%3D%20obj.childNodes.length-2)%20%0D%0A%7B%20%0D%0Athis.m_direction%20%3D%20-1%3B%20%0D%0A%7D%20%0D%0Aif(this.m_selIdx%20%3D%3D%200)%20%0D%0A%7B%20%0D%0Athis.m_direction%20%3D%201%3B%20%0D%0A%7D%20%0D%0ASlider.m_curObj%20%3D%20mobj%3B%20%0D%0ASlider.m_tarObj%20%3D%20obj.childNodes%5Bthis.m_selIdx%5D%3B%20%0D%0Athis.m_delayTimer%20%3D%20this.fadeIn(200%2C5)%3B%20%0D%0Amobj.src%20%3D%20obj.childNodes%5Bthis.m_selIdx%5D.src%3B%20%0D%0Aif(this.m_direction%3D%3D-1)%7B%20%0D%0Athis.m_selIdx%20--%3B%20%0D%0A%7Delse%7B%20%0D%0Athis.m_selIdx%20%2B%2B%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0AfadeIn%20%3A%20function(aa%2C%20ab)%7B%20%0D%0Avar%20obj%20%3D%20this.container%3B%20%0D%0Awith(this.m_curObj.style)%7Bvar%20t1%20%3D%20parseInt(left)%3Bvar%20t3%20%3D%20parseInt(width)%3Bvar%20t4%20%3D%20parseInt(height)%3Bvar%20t5%20%3D%20parseInt(top)%3B%7D%20%0D%0Aif%20(Slider.m_inited)%20%0D%0A%7B%20%0D%0Avar%20k1%20%3D%20(t1%20-%20(this.canvasWidth-%20parseInt(this.m_curObj.style.width))%2F2)%2Fab%3B%20%0D%0Avar%20k3%20%3D%20(t3-parseInt(this.m_tarObj.style.width))%2Fab%3B%20%0D%0Avar%20k4%20%3D%20(t4-parseInt(this.m_tarObj.style.height))%2Fab%3B%20%0D%0Avar%20k5%20%3D%20(t5%20-%20parseInt(this.m_tarObj.style.top))%2Fab%3B%20%0D%0A%7Delse%7B%20%0D%0Avar%20k1%20%3D%20(t1%20-%20(this.canvasWidth-%20this.imageWidth*(1%2Bthis.m_percent))%2F2)%2Fab%3B%20%0D%0Avar%20k3%20%3D%20(t3-%20this.imageWidth*(1%2Bthis.m_percent))%2Fab%3B%20%0D%0Avar%20k4%20%3D%20(t4%20-%20this.imageHeight*(1%2Bthis.m_percent))%2Fab%3B%20%0D%0Avar%20k5%20%3D%20(this.imageHeight%20*%20this.m_percent%2F2)%2Fab%3B%20%0D%0A%7D%20%0D%0Avar%20mobj%20%3D%20this.m_mainviewer%3B%20%0D%0Areturn%20setInterval(function()%7Bif(ab%3C1)%7B%20%0D%0AclearInterval(Slider.m_delayTimer)%3B%20%0D%0Aif(Slider.m_inited)%7B%20%0D%0Aif%20(!Slider.m_fadein)%20%0D%0A%7B%20%0D%0ASlider.m_curObj%20%3D%20obj.childNodes%5BSlider.m_selIdx%5D%3B%20%0D%0ASlider.m_tarObj%20%3D%20mobj%3B%20%0D%0Amobj.src%20%3D%20obj.childNodes%5BSlider.m_selIdx%5D.src%3B%20%0D%0ASlider.m_fadein%20%3D%20true%3B%20%0D%0ASlider.m_inited%20%3D%20false%3B%20%0D%0ASlider.m_delayTimer%20%3D%20Slider.fadeIn(200%2C10)%3B%20%0D%0A%7Delse%7B%20%0D%0ASlider.m_fadein%20%3D%20false%3B%20%0D%0ASlider.m_inited%20%3D%20true%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0ASlider.m_inited%20%3D%20true%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Aab--%3Bt1-%3Dk1%3Bt3-%3Dk3%3Bt4-%3Dk4%3Bt5-%3Dk5%3B%20%0D%0Aif%20(Slider.m_fadein)%20%0D%0A%7B%20%0D%0Afor(var%20i%3D0%3Bi%3Cobj.childNodes.length-1%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Aobj.childNodes%5Bi%5D.style.left%20%3D%20(parseInt(t1)%20%2B%20(Slider.imageWidth%20%2B%20Slider.m_spaceWidth)*(i-Slider.m_selIdx))%2B%22px%22%3B%20%0D%0A%7D%20%0D%0A%0D%0A%7D%20%0D%0Awith(mobj.style)%7Bleft%20%3D%20t1%20%2B%20%22px%22%3Btop%20%3D%20t5%20%2B%20%22px%22%3Bwidth%20%3D%20t3%20%2B%20%22px%22%3Bheight%20%3D%20t4%20%2B%20%22px%22%3B%7D%20%0D%0A%7D%20%0D%0A%2Caa%2Fab)%20%0D%0A%7D%20%0D%0A%7D%20%0D%0ASlider.init('aaa'%2C400%2C600%2C180%2C100%2C%200.5%2C%20200%2C%2020%2C%20%5B%20%0D%0A%22http%3A%2F%2Ffiles.glzy8.com%2Fdemoimg%2F201005%2Fr_s1.jpg%22%2C%20%0D%0A%22http%3A%2F%2Ffiles.glzy8.com%2Fdemoimg%2F201005%2Fr_s2.jpg%22%2C%20%0D%0A%22http%3A%2F%2Ffiles.glzy8.com%2Fdemoimg%2F201005%2Fr_s3.jpg%22%2C%20%0D%0A%22http%3A%2F%2Ffiles.glzy8.com%2Fdemoimg%2F201005%2Fr_s4.jpg%22%2C%20%0D%0A%22http%3A%2F%2Ffiles.glzy8.com%2Fdemoimg%2F201005%2Fr_s1.jpg%22%2C%20%0D%0A%22http%3A%2F%2Ffiles.glzy8.com%2Fdemoimg%2F201005%2Fr_s2.jpg%22%2C%20%0D%0A%22http%3A%2F%2Ffiles.glzy8.com%2Fdemoimg%2F201005%2Fr_s3.jpg%22%2C%20%0D%0A%22http%3A%2F%2Ffiles.glzy8.com%2Fdemoimg%2F201005%2Fr_s4.jpg%22%20%0D%0A%5D)%3B%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程