用纯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. 3分钟掌握Quartz.net分布式定时任务的姿势

    引言 长话短说,今天聊一聊分布式定时任务,我的流水账笔记: ASP.NET Core+Quartz.Net实现web定时任务 AspNetCore结合Redis实践消息队列 细心朋友稍一分析,就知道还 ...

  2. AJ学IOS（48）多线程网络之多线程简单了解

    AJ分享,必须精品 一:进程和线程 1:什么是进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内. 比如同时打开QQ.Xcode,系统就会分 ...

  3. 【Java】Junit单元测试

    什么是单元测试? 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证. 对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如C语言中单元指一个函数,Ja ...

  4. 记录：如何使用ASP.NET Core和EnityFramework Core实现服务和数据分离

    前情提要: 现有一个网站框架,包括主体项目WebApp一个,包含 IIdentityUser 接口的基架项目 A.用于处理用户身份验证的服务 AuthenticationService 位于命名空间B ...

  5. C#_关键字：Lock的解释和使用

    定义 lock关键字,互斥锁,通过锁住某一对象从而将语句块({})里面的代码设置为临界区. 线程在线性执行代码时若遇到互斥锁,必须先申请互斥锁的访问权,若访问成功,则继续线性访问互斥锁后的临界区代码块 ...

  6. C++关于容器vector的使用方法以及#ifdef #else #endif #if #ifndef 的使用

    //此处根据0还是1来判断具体使用那一段主函数 #if 1 #define WAY #endif #ifdef WAY #include <iostream> #include<st ...

  7. iOS中点击事件失效的解决办法

    解决办法有 2种可供选择: 将目标​元素换成 <a> 或者 button 等可点击的​元素 ​给​目标元素加一条样式规则 cursor : pointer;

  8. cli命令速查

    在文件的指定行(n)插入指定内容: sed -i "niecho "haha"" a 执行后,在a文件的第n行插入echo "haha" 多 ...

  9. TensorFlow-keras 100分类

    import os os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2' from tensorflow.python.keras.datasets import cifa ...

  10. WebApi参数检查验证FluentValidation的使用方法

    右键打开NuGet程序包管理,进入浏览,搜索 FluentValidation,点击下载 在Model文件夹添加一个Person类进行校验 校验前,using需要引入相应的命名空间方可使用,Abstr ...