用纯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. python-从酷狗下载爬取自己想要的音乐-可以直接拿来体验哟

    因为最近发现咪咕音乐版权好多,当时我就在想是不是可以爬取下来,然后花了一些时间,发现有加密,虽然找到了接口,但是只能手动下载VIP歌曲,对于我们学IT的人来说,这是不能忍的,于是就懒得去解密抓取了,但 ...

  2. go中内存泄露的发现与排查

    一,什么是内存泄漏 Go 中的并发性是以 goroutine(独立活动)和 channel(用于通信)的形式实现的.处理 goroutine 时,程序员需要小心翼翼地避免泄露.如果最终永远堵塞在 I/ ...

  3. Python趣味入门3:变量、字串输入与输出

    安装配置python环境完毕,非常有必要花十分钟对一些基本概念:变量.数学字符.输入.输出等4个概念进行理解,下面通过简单示例,深入了解python的基本语法. 本文的示例均在IDLE的命令行模式中完 ...

  4. Js 事件原理与事件委托

    事件原理三阶段 捕获(有外向内).目标.冒泡(由内向外) 事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点( ...

  5. 时间格式的转化 vue与js 年月日 时分秒

    首先使用原生转化的方法 第一种 //时间转换 dateStr(d, sign) { //如果没有传递符号,给一个默认的符号 if (!sign) { sign = '-' } //获取d里面年月日时分 ...

  6. Plant 矩阵快速幂，，，，有点忘了

    题目链接:https://codeforces.com/contest/185/problem/A 题目大意就是求n次以后  方向朝上的三角形的个数 以前写过这个题,但是忘了怎么做的了,,,又退了一遍 ...

  7. 吊打面试官系列：Redis 性能优化的 13 条军规大全

    1.缩短键值对的存储长度 键值对的长度是和性能成反比的,比如我们来做一组写入数据的性能测试,执行结果如下: 从以上数据可以看出,在 key 不变的情况下,value 值越大操作效率越慢,因为 Redi ...

  8. 6.表单提交，input键盘变搜索，有关自定义属性input操作

    1.键盘变搜索 1.) 在form 上加action="#", 2.)input type=search, 3.)此时会提交到 #,需要再添加一个input display=non ...

  9. [PHP] 生成二维码（两种方法）

    方法一:(调用google二维码接口,本人测试网不好,不好用!) <?php //1.封装生成二维码图片的函数(方法) /** *利用google api生成二维码图片 * $content:二 ...

  10. [linux] [nginx] 一键安装web环境全攻略phpstudy版,超详细！

    找到运行中的服务器(实例). 打开这个主要是看它的IP,是公网ip,公网ip,公网ip,重要的事情说三遍. 接下来我们可以不用在阿里云上操作了,直接用客户端操作,这两个客户端就是Xshell 5和Xf ...