用纯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. AJ学IOS（14）UI之UITableView扩充_表格的修改_(增删移动)

    AJ分享,必须精品 先看效果图 代码 // // Created by apple on 14-8-19. // Copyright (c) 2014年 itcast. All rights rese ...

  2. Labview 机器视觉IMAQ GetFileInfo函数详解

    ------------恢复内容开始------------ IMAQ GetFileInfo作用是获取图片文件的信息,包括Calibration(校准).文件类型.水平垂直分辨率.文件数据类型.图像 ...

  3. 【three.js第三课】鼠标事件，移动、旋转物体

    1.下载three.js的源码包后,文件夹结构如下: 2.在[three.js第一课]的代码基础上,引入OrbitControls.js文件,此文件主要用于 对鼠标的操作. 该文件位置:在文件结构中 ...

  4. day28作业

    import os import uuid import pickle from conf import settings class School: def __init__(self,name,a ...

  5. ASE team work proposal

    Hi,我们是Azure Wrapper,欢迎来到我们的blog~我们将在这里记录下ASE课程的滴滴点点,美妙的旅程就要开始啦! 以下是每位队员提交的关于ASE 团队项目的提议: 朱玉影: 随着信息时代 ...

  6. Labyrinth 树的直径加DFS

    The northern part of the Pyramid contains a very large and complicated labyrinth. The labyrinth is d ...

  7. ubuntu允许root远程登录

    之前说了,怎么设置root用户登录,但是使用Xshell等工具操作Ubuntu,用户登录不进去,原因很简单,没有开启root登录的权限. 1.检查ssh服务是否开启 使用以下命令,查看是否开启 ps ...

  8. sysbench安装和使用

    sysbench是一款测试工具 主要包括以下几种方式的测试: 1.cpu性能 2.磁盘io性能 3.调度程式性能 4.内存分配及传输速度 5.POSIX线程性能 6.数据库性能(OLTP基准测试)现在 ...

  9. java 一维数组的总结笔记

    数组 1. 一位数组的声明方式 type[] array Name 或 type arrayName[];(推荐使用第二种) 错误的声明方式 //int[5] intErrorArray;错误的 // ...

  10. 【<meta name="" content=">】的作用

    一.语法: <meta name="name" content="string"/> 二.参数解析: 1.name项:常用的选项有keywords( ...