轮播图一：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>轮播图显示一</title>

 </head>

<script type="text/javascript">

<!--

    var n = ;

    function init(){

        n++;

        if(n == ){

            n = ;

        }

        //拿到图片对象

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

        img.src = n + ".png";

        //清空label控件的样式

        var label = document.getElementsByTagName("label");//通标签名字拿取

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

            label[i].className = "";

        }

        //设定对应的label控件的样式

        document.getElementById("l" + n).className = "one";

        setTimeout("init()",);

    }

//-->

</script>

<style type="text/css">

    #d{

        position:relative;

        top:-30px;

    }

    label{

        margin-left:20px;

    }

    .one{

        width:10px;

        height:10px;

        border:1px solid black;

        background-color: red;

    }

</style>

 <body onload="init()">

   <div align="center">

    <img src = "1.png" alt="aaa" width="" height="" id="img">

    <div id="d">

        <label id = "l1">&nbsp;&nbsp;</label>

        <label id = "l2">&nbsp;&nbsp;</label>

        <label id = "l3">&nbsp;&nbsp;</label>

        <label id = "l4">&nbsp;&nbsp;</label>

    </div>

    </div>

 </body>

</html>

轮播图二：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>轮播图显示一</title>

 </head>

<script type="text/javascript">

<!--

    var n = ;

    var t = ; //定义一个事件变量

    boolean flag = false;//

    function init(){

        //设置鼠标点击就暂停属性

        //拿到所有的label控件

        var labs = document.getElementsByTagName("label");

        //给每个label控件注册事件

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

            labs[i].onmouseover = function(){

                //让时间停止

                clearTimeout(t);

                //显示对应的图片,此处不能使用labs[i]

                // * 1 转换成整型

                var b = this.innerText *

                //拿到img对象

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

                img.src = b + ".png"; //显示成对应的图片

                //清空label控件的样式,清空样式

                var label = document.getElementsByTagName("label");//通标签名字拿取

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

                        label[i].className = "";

                }

                //同时，让label的样式变成one

                this.className = "one";

            }

            //再注册一个事件，鼠标离开后继续开始

            labs[i].onmouseout = function(){

                //隔1秒调用fun()

                setTimeout("fun()",);

                //改变n的值

                n = this.innerText * ;

                //离开时设置为false

                flag = false;

            }

        }

        fun();

    }

    function fun(){//单独创建一个函数

        n++;

        if(n == ){

            n = ;

        }

        //拿到图片对象

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

        img.src = n + ".png";

        //清空label控件的样式,清空样式

        var label = document.getElementsByTagName("label");//通标签名字拿取

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

            label[i].className = "";

        }

        //设定对应的label控件的样式

        document.getElementById("l" + n).className = "one";

        t = setTimeout("fun()",);

    }

//-->

</script>

<style type="text/css">

    #d{

        position:relative;

        top:-30px;

    }

    label{

        margin-left:20px;

    }

    .one{

        width:10px;

        height:10px;

        border:1px solid black;

        background-color: red;

    }

</style>

 <body onload="init()">

   <div align="center">

    <img src = "1.png" alt="aaa" width="" height="" id="img">

    <div id="d">

        <label id = "l1">&nbsp;&nbsp;</label>

        <label id = "l2">&nbsp;&nbsp;</label>

        <label id = "l3">&nbsp;&nbsp;</label>

        <label id = "l4">&nbsp;&nbsp;</label>

    </div>

    </div>

 </body>

</html>

DOM：

document object model文档对象模型

通过JavaScript，可以重构整个HTML文档。可以添加、改变或重排页面上的项目。

DOM树：

节点：文档中的每个成分都是一个节点，包括文本也是节点。

轮播图-JavaScript的更多相关文章

  1. 【JavaScript】固定布局轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. javascript效果：手风琴、轮播图、图片滑动

    最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...

  3. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

  4. 原生javascript焦点轮播图

    刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...

  5. JavaScript 轮播图

    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...

  6. 简要分析javascript的选项卡和轮播图

    选项卡 思路 1.按钮和展示的页面要对应:分别遍历,记住当前按钮的索引,让其成为展示页面的索引 2.只出现所对应的页面:所有的页面隐藏,只展示想要的页面 只展示js代码 for(var i=0;i&l ...

  7. 浅谈轮播图（原生JavaScript实现）

    现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满 ...

  8. 前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

  9. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

随机推荐

  1. .Net remoting, Webservice,WCF,Socket区别

    传统上,我们把计算机后台程序(Daemon)提供的功能,称为"服务"(service).比如,让一个杀毒软件在后台运行,它会自动监控系统,那么这种自动监控就是一个"服务& ...

  2. C#中的@符号

      C# 中的 @ 符号 C# 中的 @ 符号其实有很多的用法,我们来看看 @ 有什么神奇之处. 1. 限定字符串 用 @ 符号加在字符串前面表示其中的转义字符 “ 不 ” 被处理. 如果我们写一个文 ...

  3. hdu4293Groups

    http://acm.hdu.edu.cn/showproblem.php?pid=4293 这题单拉出来写篇吧 确实不错的一题 将每个人说的话 转化一下 可以算出它处在哪个段中 题目就转换成了求不相 ...

  4. ☀【CSS3】切换开关

    采用纯 CSS3 制作 iPhone 风格切换开关 √http://5m3d.com/?p=846 <!DOCTYPE html> <html lang="zh-CN&qu ...

  5. POJ 1200 Crazy Search

    思路:利用Karp-Rabin算法的思想,对每个子串进行Hash,如果Hash值相等则认为这两个子串是相同的(事实上还需要做进一步检查),Karp-Rabin算法的Hash函数有多种形式,但思想都是把 ...

  6. JavaScript下拉框去除重复内容

    下拉框去除重复内容 <script type="text/javascript" src="http://www.joleye.com/libraries/java ...

  7. 【HTML】Beginner1：TagsAttributesElements

    HTML(Hypertext Text Mark-up Language)&(How To Make L) HTML is used for meaning and CSS is used f ...

  8. HW5.16

    public class Solution { public static void main(String[] args) { for(int i = 2000; i <= 2010; i++ ...

  9. win7 下恢复“经典任务栏”/“快速启动栏”，关闭“窗口自动最大化” -摘自网络

    1.自动放大窗口 鼠标把窗口拖到屏幕边缘时,win7会自做聪明的把窗口放大,有时候这个很烦人. 解决办法: 运行“REGEDIT”打开注册表,找到 “HKEY_CURRENT_USER\Control ...

  10. MySql避免全表扫描

    对查询进行优化,应尽量避免全表扫描,首先应考虑在where 及order by 涉及的列上建立索引: .尝试下面的技巧以避免优化器错选了表扫描: · 使用ANALYZE TABLE tbl_name为 ...