首页 » 技术分享 » 幻灯片代码

幻灯片代码

　
评论关闭　1,158次浏览

简洁的幻灯片代码

废话不说了直接上代码：

<html>
<head>
<style>
    /*公告板幻灯片*/
    #box{ position:relative; width:100%; height:100%; border:none;}
    #box .bigUl{width:100%; height:100%;}
    #box .bigUl li{width:100%; height:100%; list-style: none;}
    #box .bigUl li img{width:100%; height:100%;}
    #box .prev{ position:absolute; width:40px; height:60px; background:url(http://www.518zhibo.com/images/l.png) no-repeat; z-index:500; top:40%; left:0px; opacity:0; filter:alpha(opacity=0); cursor:pointer;}
    #box .next{ position:absolute; width:40px; height:60px; background:url(http://www.518zhibo.com/images/r.png) no-repeat; z-index:500; top:40%; right:0px; opacity:0; filter:alpha(opacity=0);cursor:pointer;}
    .bigUl li { position:absolute;}
    .numberUl { position:absolute; right:40%; bottom:10px; z-index:400}
    .numberUl li{ width:10px; height:10px; margin:0 5px; border-radius:10px; background:#ffffff; float:left; overflow:hidden;*display:inline;*zoom:1;}
    .numberUl li a{ display:block ;width:24px; height:13px; color:#fff; font-size:12px; text-align:center; line-height:13px;}
    .numberUl li.night { background:yellow;}

    /*公告板幻灯片结束*/
</style>

</head>
<body>
<div id="box" >
    <div class="prev" style="opacity: 0;"></div>
    <div class="next" style="opacity: 0;"></div>
    <ul class="bigUl">
        <li style="z-index: 24; opacity: 1;"><img src="http://www.518zhibo.com/upload/upfile/day_170320/201703200922052234.png" alt="图片2"></li>
        <li style="z-index: 25; opacity: 1;"><img src="http://www.518zhibo.com/upload/upfile/day_160925/201609252226524086.png" alt="轮播广告1"></li>
        <li style="z-index: 25; opacity: 1;"><img src="http://www.518zhibo.com/upload/upfile/day_160925/201609252226524086.png" alt="轮播广告1"></li>
    </ul>
    <ul class="numberUl">
        <li class="night"><a href="javascript:;"></a></li>
        <li class=""><a href="javascript:;"></a></li>
        <li class=""><a href="javascript:;"></a></li>
    </ul>
    <div>
    </div>
</div>

<script>

    /*轮播广告*/
    function getByClass(oParent,name)
    {
        var aClass = oParent.getElementsByTagName('*');
        var arlt = [];
        for(var i=0; i<aClass.length; i++)
        {
            if(aClass[i].className==name)
            {
                arlt.push(aClass[i]);
            }
        }
        return arlt;
    }

    function getStyle(obj,name)
    {
        if(obj.currentStyle)
        {
            return obj.currentStyle[name]
        }
        else
        {
            return getComputedStyle(obj,false)[name]
        }
    }

    function startMove(obj,styleName,iTarget)
    {
        clearInterval(obj.timer)
        obj.timer = setInterval(function(){
            var now = 0;
            if(styleName=='opacity')
            {
                now = Math.round((parseFloat(getStyle(obj,styleName))*100));
            }
            else
            {
                now = parseInt(getStyle(obj,styleName));
            }
            var speed = (iTarget-now)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            if(now == iTarget)
            {
                clearInterval(obj.timer)
            }
            else
            {
                if(styleName=='opacity')
                {
                    obj.style.opacity = (now+speed)/100;
                    obj.style.filter = 'alpha(opacity='+(now+speed)+')'
                }
                else
                {
                    obj.style[styleName] = now+speed+'px';
                }
            }
        },30)
    }


    window.onload = function()
    {
        var oBox = document.getElementById('box');
        var oPrev = getByClass(oBox,'prev')[0];
        var oNext = getByClass(oBox,'next')[0];
        var oBigUl = getByClass(oBox,'bigUl')[0];
        var aLiBig = oBigUl.getElementsByTagName('li');
        var oNumUl = getByClass(oBox,'numberUl')[0];
        var aLiNumber = oNumUl.getElementsByTagName('li');

        var nowZindex = 1;
        var now = 0;
        function tab()
        {
            for(var i=0; i<aLiNumber.length; i++)
            {
                aLiNumber[i].className = '';
            }
            aLiNumber[now].className = 'night';

            aLiBig[now].style.zIndex = nowZindex++;
            aLiBig[now].style.opacity = 0;
            startMove(aLiBig[now],'opacity',100);


        }

        for(var i=0; i<aLiNumber.length; i++)
        {
            aLiNumber[i].index = i;
            aLiNumber[i].onclick = function()
            {

                if(this.index==now)return;
                now = this.index;

                tab();
            }
        }
        oNext.onmouseover = oPrev.onmouseover = oBigUl.onmouseover = function()
        {
            startMove(oPrev,'opacity',100);
            startMove(oNext,'opacity',100)
        }

        oNext.onmouseout = oPrev.onmouseout = oBigUl.onmouseout = function()
        {
            startMove(oPrev,'opacity',0);
            startMove(oNext,'opacity',0)
        }
        oPrev.onclick = function()
        {
            now--
            if(now==-1)
            {
                now=aLiNumber.length-1;
            }
            tab();
        }

        oNext.onclick = function()
        {
            now++
            if(now==aLiNumber.length)
            {
                now=0;
            }
            tab();
        }

        var timer = setInterval(oNext.onclick,5000)
        oBox.onmouseover = function()
        {
            clearInterval(timer)
        }
        oBox.onmouseout = function()
        {
            timer = setInterval(oNext.onclick,5000)//改变速度修改3000 ，例如3000=3秒钟
        }
    }
    /*轮播END*/
</script>
</body>
</html>

转载自原文链接, 如需删除请联系管理员。

原文链接：幻灯片代码，转载请注明来源！

赞 0