用JavaScript制作banner轮播图

JavaScript_banner轮播图
让我们一起来学习一下用js怎么实现banner轮播图呢?
直接看代码:
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>banner轮播</title>

        <style>

            #banner{width:820px;height:430px;margin:0 auto;position:relative;}

            #banner img{width:100%;height:100%;}

            ul{position:absolute;top:83%;left:290px;list-style:none;}

            ul li{width:25px;height:25px;border-radius:50%;float:left;margin-right:15px;text-align:center;line-height:25px;}

            #Left,#Right{position:absolute;top:45%;width:60px;height:60px;display:none;}

            #banner:hover #Left{display:block;}

            #banner:hover #Right{display:block;}

            #Left{left:0;}

            #Right{right:0;}

        </style>

    </head>

    <!--页面加载的时候直接加载它-->

    <body onload="lunbo()">

        <div id="banner">

            <img src="img/banner0.jpg" id="img">

            <ul>

                <li>1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

            </ul>

            <div id="Left">

                <img src="img/07_箭头_向左.png" id="left">

            </div>

            <div id="Right">

                <img src="img/07_箭头_向右 (1).png" id="right">

            </div>

        </div>

        <script type="text/javascript">

        //首先我们要获取到他们,便于接下来操作

            var Img=document.getElementById("img");

            var Lis=document.getElementsByTagName("li");

            var Left=document.getElementById("left");

            var Right=document.getElementById("right");

            var index=-1;

            var Banner=document.getElementById("banner");

            //定时器(需要定义的函数,它的毫秒数)

            var timer=setInterval("lunbo()",1800);

            //利用定时器使图片达到轮播效果

            function lunbo(){

                index++;

                resetColor();

                if(index == 4){

                    index=0;

                }

                Img.src="img/banner"+index+".jpg";

                Lis[index].style.background="orchid";

            }

            //小原点初始值颜色(定义函数,在定时器去调用它)

            function resetColor(){

                for(var i=0;i<Lis.length;i++){

                    Lis[i].style.background="rgba(100,100,100,.5)";

                }

            }

            //鼠标移入和移出

            Banner.onmouseover=function(){

                clearInterval(timer);

            }

            Banner.onmouseout=function(){

                //变量作用域,因为这边已经给它清除了,所以必须重新声明它.

                timer=setInterval("lunbo()",1800);

            }

            //点击小圆点切换图片到指定位置

            for (var i=0;i<Lis.length;i++) {

                Lis[i].onclick = function(){

                    clearInterval(timer);

                    index = this.innerHTML-1;

                    Img.src="img/banner"+index+".jpg";

                    resetColor();

                    Lis[index].style.background = "orchid";

                    timer = setInterval("lunbo()",1800);

                }

            }

            //左边和右边按钮切换

            Left.onclick = function(){

                index--;

                if (index == -1) {

                    index = 3;

                }

                Img.src="img/banner"+index+".jpg";

                resetColor();

                Lis[index].style.background = "orchid";

            }

            Right.onclick = function(){

                if (index == 3) {

                    index = -1;

                }

                index++;

                Img.src="img/banner"+index+".jpg";

                resetColor();

                Lis[index].style.background = "orchid";

            }

        </script>

    </body>

</html>
希望对大家有帮助~~如果有更好的方法,可以一起学习交流哦!
秒客网

用JavaScript制作banner轮播图

相关文章
