内容介绍
仿腾讯大秦网带淡淡投影效果，可以设置描述和链接地址的js立体图片滚动代码。
核心js代码如下：
<script type="text/javascript">
(function ()
{
var arrImagePaths=[];
var oSlidePlay=document.getElementById('slide_play');
var oImgViewer=null;
var aLiBtn=oSlidePlay.getElementsByTagName('ol')[0].getElementsByTagName('li');
var miaovWorkNowIndex=0;
var iDirect=1;
var oAutoPlayTimer=null;
for(i=0;i<aLiBtn.length;i++)
{
arrImagePaths[i]={};
aLiBtn[i].index=i;
aLiBtn[i].onmouseover=function ()
{
gotoImg(this.index);
};
}
//注意：
//************** 用于修改文字和图片的位置 **************
//用于修改图片地址
arrImagePaths[0].src="images/1.jpg";
arrImagePaths[1].src="images/2.jpg";
arrImagePaths[2].src="images/3.jpg";
arrImagePaths[3].src="images/4.jpg";
arrImagePaths[4].src="images/5.jpg";
//用于修改图片下方的文字
arrImagePaths[0].info='模板网-场馆介绍1-b5.mxunkeji.com';
arrImagePaths[1].info='模板网-场馆介绍2-b5.mxunkeji.com';
arrImagePaths[2].info='模板网-场馆介绍3-b5.mxunkeji.com';
arrImagePaths[3].info='模板网-场馆介绍4-b5.mxunkeji.com';
arrImagePaths[4].info='模板网-场馆介绍5-b5.mxunkeji.com';
//用于修改文字的链接地址
arrImagePaths[0].href='https://b5.mxunkeji.com';
arrImagePaths[1].href='https://b5.mxunkeji.com';
arrImagePaths[2].href='https://b5.mxunkeji.com';
arrImagePaths[3].href='https://b5.mxunkeji.com';
arrImagePaths[4].href='https://b5.mxunkeji.com';
//修改链接跳转地址的target(_blank、_self等)
arrImagePaths.link_target='_self';
//**************** 结束用于修改的位置 *****************
function startAutoPlay()
{
oAutoPlayTimer=setInterval
(
function ()
{
miaovWorkNowIndex+=iDirect;
if(0==miaovWorkNowIndex)
{
iDirect=1;
}
if(miaovWorkNowIndex==aLiBtn.length-1)
{
iDirect=-1;
}
gotoImg(miaovWorkNowIndex);
}, 4000
);
}
startAutoPlay();
function gotoImg(index)
{
for(i=0;i<aLiBtn.length;i++)
{
aLiBtn[i].className='';
}
aLiBtn[index].className='active';
oImgViewer.gotoImg(index);
miaovWorkNowIndex=index;
}
oImgViewer=new ImgViewer
(
arrImagePaths, oSlidePlay,
function (index)
{
clearInterval(oAutoPlayTimer);
startAutoPlay();
for(i=0;i<aLiBtn.length;i++)
{
aLiBtn[i].className='';
}
aLiBtn[index].className='active';
miaovWorkNowIndex=index;
}
);
gotoImg(Math.floor(arrImagePaths.length/2));
})();
</script>
