用纯css和JavaScript代码制作带有定时轮播功能的轮播图

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            div{

                width: 360px;

                border: 1px black solid;

                margin: 0 auto;

                border-radius: 8px;

                /* 父容器加相对定位 */

                position: relative;

            }

            img{

                border-radius: 8px;

            }

            li{

                float: left;

                list-style: none;

                width: 26px;

                height: 26px;

                border: 1px black solid;

                /* 左右居中 */

                text-align: center;

                /* 行高为li的高度，这样文字就可以垂直居中了 */

                line-height: 26px;

                margin-left: 15px;

                background-color: #FFFFFF;

                /* 变成手的光标 */

                cursor: pointer;

            }

            ul{

                /* 在父容器进行绝对定位 */

                position: absolute;

                top: 140px;

                left: 30px;

            }

        </style>

    </head>

    <body>

        <div>

            <img src="data:images/1.gif" >

            <ul>

                <li onclick="clicks(0)">1</li>

                <li onclick="clicks(1)">2</li>

                <li onclick="clicks(2)">3</li>

                <li onclick="clicks(3)">4</li>

                <li onclick="clicks(4)">5</li>

            </ul>

        </div>

        <script type="text/javascript">

           // 图片名称

            var imgs=["1.gif","2.gif","3.jpg","4.jpg","5.gif"]

            // 更换图片

            function clicks(n){

                //设置图片src的值

                 document.getElementsByTagName("img")[0].setAttribute("src","images/"+imgs[n])

            }

            //刚开始默认值为0，即数组下标为0元素

            var i=0;

            function js(){

                // if (i<4) {

                //     i++;

                // } else{

                //     i=0;

                // }

                // alert(i)

                i= i<4 ? i+=1 : i=0;//三元运算符，当下标小于4的时每次加一，否则重新回到0

                clicks(i);            //调用函数

            }

             setInterval("js()",3000)//每三秒执行一次js()函数
 </script> </body> </html>

js+css制作简单的轮播图带有定时功能的更多相关文章

  1. jQuery之制作简单的轮播图效果

    [源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...

  2. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  3. 最简单的轮播广告(原生JS)

    改变每个图片的opacity属性:来自学友刘斌 素材图片: <!DOCTYPE html> <html lang="en"> <head> &l ...

  4. html学习之路--简单图片轮播

    一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...

  5. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  6. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  7. MUI框架-06-静态页制作（图片轮播）

    MUI框架-06-静态页制作(图片轮播) 轮播也是静态,是相对页面交互来说 上一篇介绍了如何设计一个简单的界面,还没有接触过,请先查看: MUI框架-01-介绍-创建项目-简单页面 轮播组件 之前也介 ...

  8. js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

  9. jquery特效（4）—轮播图②（定时自动轮播）

    周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...

随机推荐

  1. **********Prometheus（三）******************

    通过centos7.x来部署Prometheus ####同步时间,否则后面监控会有异常!!!!!####### 1. 创建文件夹,上传软件包.解压并将prometheus promtool两个命令复 ...

  2. N - Remove Adjacent CodeForces - 1321C

    题目大意:删除字符,当一个字符左边或者右边存在一个比它小“1”的字符那么就可以将这个字符删除,问最多能删除多少个字符 思路,:刚开始想的是,对于单调连续的字符,可以直接删除,比如,单点增的字符只保留前 ...

  3. D. Minimax Problem Codeforces 1288D binary_search+二进制

    题目大意:n*m的矩阵中,找到两行数,可以形成两个一维数组,数组1的位置i和数组2的位置i去最大构成新数组b的元素b[i],最终目的要使数组b中最小的数尽可能的大 题解: m的范围是(1,8),比较小 ...

  4. B - Fadi and LCM CodeForces - 1285C 质因子

    题目大意很简单,给你一个整数X,让你求a和b,使得max(a,b)尽可能的小,然后打印a,b 题解:想到了质因子分解,也考虑到了暴力,但是觉得暴力的话会TLE,所以打算用贪心做,然后就一直Wa.... ...

  5. tensorflow基础--LeNet-5测试模型遇到TypeError: Failed to convert object of type <class 'list'> to Tensor

    最近在看<TensorFlow 实战Google深度学习框架第二版>这本书,测试LeNet-5这个模型时遇到了TypeError: Failed to convert object of ...

  6. 百度智能云虚拟主机 Typecho 分类功能失效 | 开启伪静态地址

    出现的问题 $this->is() 方法失效,无法正确判断 archive.category.tags 页面类型. 点击分类页面.归档页面时,虽然 URL 是正确的,但网页内容却是 index. ...

  7. Scala学习系列（三）——入门与基础

    本课程源码共享于 https://github.com/tree1123/learning-scala 首先,打开IDEA编辑器的SbtExampleProject项目,我们将在这个项目下进行练习 本 ...

  8. ElasticSearch的高级复杂查询：非聚合查询和聚合查询

    一.非聚合复杂查询(这儿展示了非聚合复杂查询的常用流程) 查询条件QueryBuilder的构建方法 1.1 精确查询(必须完全匹配上,相当于SQL语句中的“=”) ① 单个匹配 termQuery ...

  9. JS在线代码编辑器多种方案monaco-editor，vue-monaco-editor

    前言 JavaScript在线代码编辑器. 需要代码提示,关键字高亮,能够格式化代码.(不需要在线运行) 简简单单的需求. 方案一: Monaco-editor 简介:微软的开源项目,开源中国上面的在 ...

  10. 替换字符串sql

    update [表名] set 字段名 = replace(与前面一样的字段名,'原本内容','想要替换成什么') UPDATE `zjl_III_hei_zlj_20151111`.`ctrl_ne ...