欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

javascript实现轮播器的代码教程

程序员文章站 2022-10-11 07:58:33
javascript实现轮播器的代码教程

javascript实现轮播器的代码教程

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">  
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">  
<head>  
    <meta http-equiv="content-type" content="text/html;charset=utf-8">  
    <title>js实现轮播器</title>  
    <style type="text/css">  
        *{  
            margin:0;  
            padding:0;  
        }  
        #box1{  
            background-color: red;  
            margin:40px auto;  
            padding:10px 0;  
            width:490px;  
            height:760px;  
            position: relative;  
            overflow: hidden;  
        }  
        #lunboqi{  
            list-style:none;  
            position: absolute;  
            left:0px;  
        }  
        #box1 #lunboqi li{  
            margin:0 10px;  
            float:left;  
        }  
        #box1 #lunboqi li img{  
            width:470px;  
            height:760px;  
        }  
        #aarr{            
            position: absolute;  
            bottom: 20px;  
        }  
        #aarr a{  
            float:left;  
            width:20px;  
            height:20px;  
            border-radius: 10px;  
            background-color: red;  
            opacity:0.4;  
            margin:0 5px;  
        }  
        #aarr a:hover{  
            opacity:1;  
        }  
    </style>  
    <script type="text/javascript">  
        window.onload=function(){  
            var lunboqi = document.getelementbyid("lunboqi");  
            var lis = lunboqi.getelementsbytagname("img");  
            //调整ul的总大小，使其能够存放所有的li  
            lunboqi.style.width = lis.length * 490 + "px";  
  
            var box1 = document.getelementbyid("box1");  
            var aarr = document.getelementbyid("aarr");  
            var as = aarr.getelementsbytagname("a");  
            //使超链接组居中显示  
            aarr.style.left =  (box1.offsetwidth - as.length*30)/2 + "px";  
  
            //图片的索引  
            var index = 0;  
            //调整默认索引的颜色  
            as[index].style.opacity = 1;  
  
            //自动切换的定时器标识  
            var timer;  
            autochange();  
  
            //为每个超链接绑定单机响应函数  
            for(var i=0;i<as.length;++i){  
                as[i].num = i;  
                as[i].onclick = function(){  
                    //点击时关闭自动切换功能  
                    clearinterval(timer);  
                    index = this.num;  
                    seta();  
                    animate(lunboqi,"left",-490*index,50,function(){  
                        //执行完毕后执行  
                        //开始自动切换  
                        autochange();  
                    });  
                };  
            }  
  
            //自动切换图片  
            function autochange(){  
                timer = setinterval(function(){  
                    index = (++index) % lis.length;  
                    animate(lunboqi,"left",-490*index,40,function(){  
                        seta();  
                    });  
                },2000);  
            }  
  
            //设置超链接的样式  
            function seta(){  
                if(index >= lis.length - 1){  
                    index = 0;  
                    lunboqi.style.left = 0 + "px";  
                }  
                //a全部设置为初始值  
                for(var i=0;i<as.length;++i){  
                    as[i].style.opacity = "";  
                }  
                //设置当前索引指定的a的样式  
                as[index].style.opacity = 1;  
            }  
  
            //实现动画过程的函数  
            function animate(obj,attr,target,speed,callback){  
                clearinterval(obj.timer);  
                var current = parseint(getstyle(obj,attr));  
                if(current > target){  
                    speed = -speed;  
                }  
                obj.timer = setinterval(function(){  
                    var oldvalue = parseint(getstyle(obj,attr));  
                    var newvalue = oldvalue + speed;  
                    if((speed < 0 && newvalue < target) || (speed > 0) && newvalue > target){  
                        newvalue = target;  
                    }  
                    obj.style[attr] = newvalue + "px";  
                    if(newvalue == target){  
                        clearinterval(obj.timer);  
                        //callback存在则执行callback函数  
                        callback &&　callback();  
                    }  
                },50);  
            }  
  
            //获取obj对象的name属性  
            function getstyle(obj,name){  
                if(window.getcomputedstyle){  
                    return getcomputedstyle(obj,null)[name];  
                }else{  
                    //兼容ie8  
                    return obj.currentstyle[name];  
                }  
            }  
  
        };  
    </script>  
</head>  
<body>  
    <p id="box1">  
        <ul id="lunboqi">  
            <li><img src="1.jpg" alt="" /></li>  
            <li><img src="2.jpg" alt="" /></li>  
            <li><img src="3.jpg" alt="" /></li>  
            <li><img src="4.jpg" alt="" /></li>  
            <li><img src="5.jpg" alt="" /></li>  
            <!-- 非常巧妙的实现了轮播器的自然切换 -->  
            <li><img src="1.jpg" alt="" /></li>  
        </ul>  
        <p id="aarr">  
            <a href="javascript：;"></a>  
            <a href="javascript：;"></a>  
            <a href="javascript：;"></a>  
            <a href="javascript：;"></a>  
            <a href="javascript：;"></a>  
        </p>  
    </p>  
</body>  
</html>

上一篇： python处理cookie详解

下一篇： 微信公众号H5支付接口调用方法

推荐阅读