特效介绍
仿腾讯大秦网带淡淡投影效果，可以设置描述和链接地址的js立体图片滚动代码。使用方法
1、引入下面的js和css文件：1 | <link href="5imoban.net.css" rel="stylesheet" type="text/css" /> |
2 | <script type="text/javascript" src="js/5imoban.net.js"></script> |
1 | <div id="slide_play"> |
2 | <ol> |
3 | <li></li> |
4 | <li></li> |
5 | <li class="active"></li> |
6 | <li></li> |
7 | <li></li> |
8 | </ol> |
9 | </div> |
001 | <script type="text/javascript"> |
002 | (function () |
003 | { |
004 | var arrImagePaths=[]; |
005 | var oSlidePlay=document.getElementById('slide_play'); |
006 | var oImgViewer=null; |
007 | var aLiBtn=oSlidePlay.getElementsByTagName('ol')[0].getElementsByTagName('li'); |
008 | var miaovWorkNowIndex=0; |
009 | var iDirect=1; |
010 | |
011 | var oAutoPlayTimer=null; |
012 | |
013 | for(i=0;i<aLiBtn.length;i++) |
014 | { |
015 | arrImagePaths[i]={}; |
016 | |
017 | aLiBtn[i].index=i; |
018 | aLiBtn[i].onmouseover=function () |
019 | { |
020 | gotoImg(this.index); |
021 | }; |
022 | } |
023 | //************** 用于修改文字和图片的位置 ************** |
024 | //用于修改图片地址 |
025 | arrImagePaths[0].src="images/1.jpg"; |
026 | arrImagePaths[1].src="images/2.jpg"; |
027 | arrImagePaths[2].src="images/3.jpg"; |
028 | arrImagePaths[3].src="images/4.jpg"; |
029 | arrImagePaths[4].src="images/5.jpg"; |
030 | //用于修改图片下方的文字 |
031 | arrImagePaths[0].info='模板网-场馆介绍1-www.5imoban.net'; |
032 | arrImagePaths[1].info='模板网-场馆介绍2-www.5imoban.net'; |
033 | arrImagePaths[2].info='模板网-场馆介绍3-www.5imoban.net'; |
034 | arrImagePaths[3].info='模板网-场馆介绍4-www.5imoban.net'; |
035 | arrImagePaths[4].info='模板网-场馆介绍5-www.5imoban.net'; |
036 | //用于修改文字的链接地址 |
037 | arrImagePaths[0].href='http://www.5imoban.net'; |
038 | arrImagePaths[1].href='http://www.5imoban.net'; |
039 | arrImagePaths[2].href='http://www.5imoban.net'; |
040 | arrImagePaths[3].href='http://www.5imoban.net'; |
041 | arrImagePaths[4].href='http://www.5imoban.net'; |
042 | //修改链接跳转地址的target(_blank、_self等) |
043 | arrImagePaths.link_target='_self'; |
044 | //**************** 结束用于修改的位置 ***************** |
045 | function startAutoPlay() |
046 | { |
047 | oAutoPlayTimer=setInterval |
048 | ( |
049 | function () |
050 | { |
051 | miaovWorkNowIndex+=iDirect; |
052 | |
053 | if(0==miaovWorkNowIndex) |
054 | { |
055 | iDirect=1; |
056 | } |
057 | |
058 | if(miaovWorkNowIndex==aLiBtn.length-1) |
059 | { |
060 | iDirect=-1; |
061 | } |
062 | |
063 | gotoImg(miaovWorkNowIndex); |
064 | }, 4000 |
065 | ); |
066 | } |
067 | |
068 | startAutoPlay(); |
069 | |
070 | function gotoImg(index) |
071 | { |
072 | for(i=0;i<aLiBtn.length;i++) |
073 | { |
074 | aLiBtn[i].className=''; |
075 | } |
076 | aLiBtn[index].className='active'; |
077 | oImgViewer.gotoImg(index); |
078 | |
079 | miaovWorkNowIndex=index; |
080 | } |
081 | |
082 | oImgViewer=new ImgViewer |
083 | ( |
084 | arrImagePaths, oSlidePlay, |
085 | function (index) |
086 | { |
087 | clearInterval(oAutoPlayTimer); |
088 | startAutoPlay(); |
089 | |
090 | for(i=0;i<aLiBtn.length;i++) |
091 | { |
092 | aLiBtn[i].className=''; |
093 | } |
094 | aLiBtn[index].className='active'; |
095 | miaovWorkNowIndex=index; |
096 | } |
097 | ); |
098 | gotoImg(Math.floor(arrImagePaths.length/2)); |
099 | })(); |
100 | </script> |
