<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript">

            function init(){

                setInterval("changelunbo()",1000);

            }

            var i = 1;

            function changelunbo(){

                i++;

                var imgE = document.getElementById("lunbo");

                imgE.src = "img/2."+i+".jpg";

                if(i == 4){

                    i = 0;

                }

            }

        </script>

    </head>

    <body onload="init()">

        <img src="img/2.1.jpg"/ id="lunbo">

    </body>

</html>

js实现简单的轮播效果的更多相关文章

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

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

  2. JS实现小图放大轮播效果

    JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: <body> ...

  3. 通过jquery js 实现幻灯片切换轮播效果

    观察各个电商网址轮播图的效果,总结了一下主要突破点与难点 1.->封装函数的步骤与具体实现 2->this关键字的指向 3->jquery js函数熟练运用 如animate 4-& ...

  4. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  5. jquery简单的轮播效果！

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. js插件-图片椭圆轮播效果

    插件效果图: html 代码如下: <div id="container"> <img src="images/cartoon/1.jpg" ...

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

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

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

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

  9. Jquery实现左右轮播效果

    首先展示下静态布局h5代码,代码非常简单. <div id="slide"> <ul class="pic-list"> <li& ...

随机推荐

  1. iOS 开发 atomic 与 nonatomic 区别

    atomic :  变量默认是有该有属性的,这个属性是为了保证在多线程的情况下,编译器会自动生成一些互斥加锁的代码,避免该变量的读写不同步的问题. nonatomic  : 如果该对象无需考虑多线程的 ...

  2. CSS预处理器之Less详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS 预处理器 为什么要有 CSS 预处理器 CSS基本上是设计师的工 ...

  3. 2015年百度实习生前端笔试题上海卷a

    1.写出javascript运行结果:alert(‘5’+5); 结果:’55’ 2.写出javascript运行结果:for(var i=0; i<10; i++){} alert(i); 结 ...

  4. 解决maven项目Cannot change version of project facet Dynamic web module to 3.0

    问题描述         用Eclipse创建Maven结构的web项目的时候选择了Artifact Id为maven-artchetype-webapp,由于这个catalog比较老,用的servl ...

  5. Ubuntu下Maven配置与Maven项目创建教程

    一. Ubuntu下Maven配置 windows下Maven配置参考http://www.cnblogs.com/LexMoon/p/JavaMaven.html ubuntu下Maven地址htt ...

  6. # *Qt for Com 交互*

    Qt COM Q_PROPERTY ActiveX properties public slots ActiveX methods signals ActiveX events Qt 属性支持的数据类 ...

  7. Python实现二分查找

    老生常谈的算法了. #!/usr/bin/python # -*- coding:utf-8 -*- # Filename: demo.py # 用python实现二分查找 def binarySea ...

  8. HDU1560 DNA sequence IDA* + 强力剪枝 [kuangbin带你飞]专题二

    题意:给定一些DNA序列,求一个最短序列能够包含所有序列. 思路:记录第i个序列已经被匹配的长度p[i],以及第i序列的原始长度len[i].则有两个剪枝: 剪枝1:直接取最长待匹配长度.1900ms ...

  9. 常用的CSS框架

    常用的CSS框架 之前在写自己的个人网站的时候,由于自己Web前端不是特别好,于是就去找相关的CSS框架来搭建页面了. 找到以下这么一篇文章(列出了很多常用的CSS框架): http://w3scho ...

  10. 使用flask_sqlalchemy

    首先引用一下廖雪峰Python教程里关于sqlalchemy的话, 这里我们要讲的是flask_sqlalchemy的用法. 1. 安装 用pip安装即可, 进入cmd控制台输入 pip instal ...