码迷,mamicode.com
首页 > Web开发 > 详细

js的轮播效果

时间:2015-09-11 23:21:44      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:

图片的轮播效果!主要运用了元素的style样式属性,与 setInterval();

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 960px;
            height: 400px;
            outline: 1px black solid;
            margin: 50px auto;
            overflow: hidden;

        }
        ul{
            width: 28800px;
            height: 400px;
            outline: 1px red solid;
            
        }
        li{
            width: 960px;
            height: 400px;
            list-style: none;
            float: left;
        }
        button{
            margin-left: 700px;;

        }
    </style>
    <script>
        window.onload=function(){
            var bnt=document.getElementsByTagName(‘button‘)[0];
            var lis=document.getElementsByTagName(‘li‘);
            var ul=document.getElementsByTagName(‘ul‘)[0];
            for(var i=0;i<lis.length;i++){
                lis[i].style.marginLeft=0;
            }
            var timeer=setInterval(function(){
                var timme=setInterval(function(){
                    var ml=parseInt(lis[0].style.marginLeft);//利用marginLeft的值让图片移动
                    ml=ml-30;//图片每一次移动30px;
                    lis[0].style.marginLeft=ml+‘px‘;
                    if(ml<=-960){
                        clearInterval(timme);//当第一张图片移动了960px时,就将时间清理了,让他停止5秒。
                        var newli=lis[0].cloneNode(true);//这时克隆一个li标签和他的节点
                        ul.removeChild(lis[0]);//将ul的子节点删除
                        newli.style.marginLeft = 0;
                        ul.appendChild(newli);//将克隆的添加到ul里
                    }
                },50);
            },4000);
           bnt.onclick=function(){
               window.clearInterval(timeer);
           }
        };
    </script>
</head>
<body>
<div>
    <ul>
        <li><img src="../images/slide-1.jpg"/></li>//随便找三张width:960px;height:400px;的图片
        <li><img src="../images/slide-2.jpg"/></li>
        <li><img src="../images/slide-3.jpg"/></li>
    </ul>
</div>
<button>停止播放</button>
</body>
</html>

作业:用js做个手风琴效果!

js的轮播效果

标签:

原文地址:http://www.cnblogs.com/hellokitty1/p/4802232.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!