图片的轮播效果！主要运用了元素的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的轮播效果的更多相关文章

  1. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  2. 原生JS实现轮播效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. js图片轮播效果常见的产品无缝轮播

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  5. 原生JS实现幻灯片轮播效果

    在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...

  6. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  7. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  8. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  9. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

随机推荐

  1. 卷积神经网络（CNN）之一维卷积、二维卷积、三维卷积详解

    作者:szx_spark 由于计算机视觉的大红大紫,二维卷积的用处范围最广.因此本文首先介绍二维卷积,之后再介绍一维卷积与三维卷积的具体流程,并描述其各自的具体应用. 1. 二维卷积 图中的输入的数据 ...

  2. PCA原理分析

    动机 在机器学习领域中,我们常常会遇到维数很高的数据,有些数据的特征维度高达上百万维,很显然这样的数据是无法直接计算的,而且维度这么高,其中包含的信息一定有冗余,这时就需要进行降维,总的来说,我们降维 ...

  3. Form表单中的action提交路径问题

    Form表单中的action提交路径问题 Form表单action属性和method属性的一些问题: 我遇到的是Form表单提交到servelet处理时遇到的问题:(1)<form name=& ...

  4. Miller_raibin算法随机化检测素数 & Pollar_rho 算法分解大数

    这几天一直再学习这些内容,也没有发一些博客,现在我觉得差不多了 首先基础是Miller_raibin随机化检测素数,顾名思义,随机化也就是有几率不对,但是很低,适用于大数快速检测,因为大数已经超出了我 ...

  5. nodeclub models

    之前看过keystone的结构,所以现在看nodeclub时,总会和keystone进行比较. nodeclub models会有一个index来作为facade,通过它连接mongodb,expor ...

  6. jQuery插件初级练习4

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. CSS 基础 例子 浮动float

    一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...

  8. LDO-AMS1117

    AMS1117 1.是AMS艾默森公司简称.与AMS1117对应的IC有LM1117.AMS1117的最大输入电压为15V,而LM1117的极限是20V. 2.其输出电压有固定式(1.5V,1.8V, ...

  9. BZOJ百题版切计划（不咕）

    传送门 BZOJ 前言 听说最近要省选,那么我就写一下吧.QwQ! 1000 过于简单,不写了. 1001 不会对偶图,直接优化最小割 题解 1002 高精度套公式计算 题解 (Code by hey ...

  10. 【BZOJ1053】 反素数ant

    BZOJ1053 反素数ant 我们先考虑唯一分解定理求出约数个数: \(x=a_1^{p_1}a_2^{p_2}a_3^{p_3}...a_k^{p_k}\) 然后\(num=\Pi_{i=1}^k ...