js的轮播效果

简介: 图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); *{ margin: 0; padding: 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做个手风琴效果!

相关文章
|
29天前
|
JavaScript
js实现图片3D轮播效果(收藏)
js实现图片3D轮播效果(收藏)
16 0
|
4月前
|
前端开发 JavaScript 索引
|
7月前
|
JavaScript 前端开发
javascript实现数据自动模拟系列(1):ProgressBarWars.js进度条动画轮播
javascript实现数据自动模拟系列(1):ProgressBarWars.js进度条动画轮播
38 0
|
12月前
|
JavaScript 定位技术
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
227 0
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
|
JavaScript
JS案例:Jq中的fadeOut和fadeIn实现简单轮播(没完善,简单实现)
JS案例:Jq中的fadeOut和fadeIn实现简单轮播(没完善,简单实现)
84 1
|
JavaScript IDE 开发工具
Html+CSS+JS 实现轮播切换
Html+CSS+JS 实现轮播切换
Html+CSS+JS 实现轮播切换
|
JavaScript
js:无缝轮播实现原理
js:无缝轮播实现原理
js:无缝轮播实现原理
|
JavaScript
js:无缝轮播实现原理
js:无缝轮播实现原理
120 0
js:无缝轮播实现原理
|
前端开发 JavaScript
杨老师课堂之JavaScript案例之自动切换轮播图片
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/79905203      JavaScript案例之自动切换轮播图片 效果图: 思路:     1.
1081 0
|
JavaScript 前端开发
杨老师课堂之JavaScript案例手动切换轮播图片
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/79905879      JavaScript案例之手动切换轮播图片 效果图: 思路:     1.
1400 0

相关产品

  • 云迁移中心