用纯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. typename 关键字

    1.class关键字的同义词 template <typename T> const T& max(const T& x, const T& y) { return ...

  2. Apache与PHP的配置

    Listen 表示端口号 ServerName 表示域名 <Directory 路径> 表示默认开放的路径 <IfModule dir_module> 表示默认显示的文件名 & ...

  3. 【Tool】使用IDEA创建简单的Java项目

    IDEA创建简单的Java项目 打开IDEA进入首页面,点击 Create New Project 点选第一项就是了,SDK就是我们的JDK,,这里我已经装好了JDK和JDK的环境变量 IDEA就能自 ...

  4. delphi中DateTimePicker控件同时输入日期和时间

    将DateTimePicker的Format属性中加入日期格式设成 'yyyy-MM-dd HH:mm',注意大小写 , 将kind设置为dtkTime即可,可以在每次Form onShow时将Dat ...

  5. R语言kohonen包主要函数介绍

    最近准备写一篇关于自组织映射 (Self-organizing map)的文章.SOM的代码很多,研究了一圈之后目前使用最顺手的是R语言的kohonen包. 这个kohonen包功能很丰富,但是接口不 ...

  6. Daily Scrum 1/18/2016

    Yandong & Zhaoyang: Prepare bug bash slides for Beta release; Dong & Fuchen:Prepare demo for ...

  7. Java - window下环境配置

    JDK下载 官网:https://www.oracle.com/java/technologies/javase-jdk8-downloads.html 百度网盘: 链接:https://pan.ba ...

  8. css特效sh

    1   opacity=0.5:                                                             透明度 2    选择器   .btn1:ho ...

  9. 视频+图文 String类干货向总结

    目录 一.字符串的介绍及视频讲解 二.字符串的两种创建方式 方法一:通过new创建 方法二:直接创建 三.字符串的长度获取:length()方法 四.使用 == 和equals()方法比较两个字符串 ...

  10. v&n赛 内存取证题解（已更新）

    题目是一个raw的镜像文件 用volatility搜索一下进程 有正常的notepad,msprint,还有dumpit和truecrypt volatility -f mem.raw --profi ...