原生javascript轮播图！

最新推荐文章于 2024-11-08 16:09:18 发布

aibu6497

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量143

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lvyestudy/p/5444435.html

版权

<style>
            .box
            {
                width: 500px;
                height: 275px;
                
                position: relative;
                margin: 100px auto;
                
            }
            a
            {
                text-decoration: none;
                font-size: 28px;
                text-align: center;
                line-height: 80px;
                display: inline-block;        
                width: 40px;    
                color:#fff;
                background:rgba(0,0,0,0.6);
                position: absolute;
                top:100px;
            }
            .box #prev
            {
                left:0px;
            }
            .box #next
            {
                right: 0px;
                
            }
            .box #txt
            {
                display: block;
                background:rgba(255,255,255,0.4);
                width:100%;
                text-align: center;
                position: absolute;
                bottom:5px;
            }
            *
            {
                padding: 0px;
                margin: 0px;
            }
        </style>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="box" id="box">
            <a href="javascript:;" id="prev"><</a>
                <a href="javascript:;" id="next">></a>
                <span id="txt">第一张</span>
            <img src="images/1.jpg" id="img" />
        </div>
    </body>
</html>

<script>
            window.onload=function()
            {             // 0                1              2               3
                var aImg=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"];//建立图片路径数组
                var aText=["第一张","第二张","第三张","第四张"];//建立文本数组
                var i=0;//初始化变量i
                var prev=document.getElementById('prev');//获取元素
                var next=document.getElementById('next');
                var oImg=document.getElementById('img');
                var oTxt=document.getElementById('txt');
                var oBox=document.getElementById('box');
                
                next.onclick=function()
                {
                    banner();//调用全局函数banner 继续往下看就可以
                }
                prev.onclick=function()
                {
                    i--;//每次使i减少1
                    if(i==-1)//如果i等于-1也就是说轮播图到了第一个还往前点
                    {
                        i=aImg.length-1;//那么i等于图片数组的数量减少1; 因为数组下标默认从0开始 而length则是真实数据个数儿所以-1就是等于跳到最后一个图片
                    }
                    oTxt.innerHTML=aText[i];//文本内容等于数组的第i个
                    oImg.src=aImg[i];//图片路径等于数组的第i个
                }
                banner=function()//函数这里这样写是等于封装了那个i++减少代码量 banner=function 这样写是设置全局函数以供定时器调用
                {
                    i++;//每次加1
                    if(i==aImg.length)//如果i等于图片数组的个数儿 那么说明滚到了最后一个用户还再往后点
                    {
                        i=0;//既然这样那么i=0 跳回到第一个
                    }
                oTxt.innerHTML=aText[i];//同上
                oImg.src=aImg[i];
                }
                Timer=setInterval("banner()",3000);//设置定期器没3秒变一次并且加上定时器名称
                oBox.οnmοuseοver=function()
                {
                    clearInterval(Timer);//当主体划过的时候停止定时器 这时候说明用户在浏览轮播图
                }
                oBox.onmouseout=function()
                {
                    Timer=setInterval("banner()",3000);//划出时 再次开启定时器
                }
            }
        </script>