带投影效果的JS 3D图片滚动效果

仿腾讯大秦网带淡淡投影效果，可以设置描述和链接地址的js立体图片滚动代码。
1、引入下面的js和css文件：

<link href="5imoban.net.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/5imoban.net.js"></script>

2、在你需要使用本幻灯片的地方放入下面的代码：

<div id="slide_play">
    <ol>
        <li></li>
        <li></li>
        <li class="active"></li>
        <li></li>
        <li></li>
    </ol>
</div>

3、在页面底部引入下面的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-www.5imoban.net';
    arrImagePaths[1].info='模板网-场馆介绍2-www.5imoban.net';
    arrImagePaths[2].info='模板网-场馆介绍3-www.5imoban.net';
    arrImagePaths[3].info='模板网-场馆介绍4-www.5imoban.net';
    arrImagePaths[4].info='模板网-场馆介绍5-www.5imoban.net';
    //用于修改文字的链接地址
    arrImagePaths[0].href='http://www.5imoban.net';
    arrImagePaths[1].href='http://www.5imoban.net';
    arrImagePaths[2].href='http://www.5imoban.net';
    arrImagePaths[3].href='http://www.5imoban.net';
    arrImagePaths[4].href='http://www.5imoban.net';
    //修改链接跳转地址的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>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！