渐变主要是通过CSS3的动画实现。

只需给css中添加transtion动画时间加上JS设置指定图片透明度显示与消失即可实现渐变过程。

效果图：

HTML:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/style3.css" />

        <script type="text/javascript" language="JavaScript" src="js/script3.js"></script>

    </head>

    <body>

        <div id="box">

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

    </body>

</html>

CSS:

    *{margin:; padding:;}

    #box{width:300px; height:165px; border:1px black solid; margin:10px auto;}

    #box ul{list-style:none; position:relative;}

    #box ul li{width:300px; height:165px; position:absolute; transition:all 1s; opacity:;}

    #box ul li:nth-of-type(1){background:url(../img/img1.jpg); background-size:100%;}

    #box ul li:nth-of-type(2){background:url(../img/img2.jpg); background-size:100%;}

    #box ul li:nth-of-type(3){background:url(../img/img3.jpg); background-size:100%;}

    #box ul li:nth-of-type(4){background:url(../img/img4.jpg); background-size:100%;}

JS:

onload = function(){

    var li = document.getElementById('box').getElementsByTagName('li');

    var index = 0;

    goto();

    function goto(){

        for(var i=0;i<li.length;i++){li[i].style.opacity = 0;}

        if(index == li.length) index = 0;

        li[index++].style.opacity = 1;                                    

    }

    setInterval(goto,3000);

}

ps:只能帮你到这里了，按钮什么的没有....

【原生JS】自动渐变轮播的更多相关文章

  1. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  2. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  3. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  4. 原生js实现无缝轮播

    原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...

  5. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  6. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  7. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  8. js自动小轮播

    使用定时器,换个图片地址. 从1到5换,如果大于5了再跳到1,点击停止时关闭定时器. <!-- Author: XiaoWen Create a file: 2016-12-08 13:19:2 ...

  9. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  10. 用原生JS实现一个轮播（包含全部代码和详细思路）

    在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+cs ...

随机推荐

  1. 八.DBN深度置信网络

    BP神经网络是1968年由Rumelhart和Mcclelland为首的科学家提出的概念,是一种按照误差反向传播算法进行训练的多层前馈神经网络,是目前应用比较广泛的一种神经网络结构.BP网络神经网络由 ...

  2. rescue grub解决方案

    症状: 开机显示:GRUB loading error:unknow filesystem grub rescue> 原因: 已经发现下面几种操作会导致这种问题: 1,想删除ubuntu,于是直 ...

  3. Kibana将语言设置为中文

    6.7以后系统开始支持中文了,修改语言只需要添加一行配置即可. 设置方法 在kibana.yml配置文件中添加一行配置 i18n.locale: "zh-CN" 修改后重启,可以看 ...

  4. MySQL.之 一行内容转换多行

    MySQL.之 一行内容转换多行 描述: 将一行记录中的某一列值(值格式:数据之间用英文逗号隔开),将这一数据转换成多行. 例如:表 cds_var 中的 cds_value 中的数据格式:多个id之 ...

  5. 在n个球中，任意取出m个（不放回），求共有多少种取法

    要求: 在n个球中,任意取出m个(不放回),求共有多少种取法 分析: 假设3个球A,B,C,任意取出2个,可分为取出的球中含A的部分和不含A的部分.即AB,AC为一组,BC为一组. 设函数F(n,m) ...

  6. 更新与发展 | Alibaba Cloud Linux 2 特性与开发细节揭秘

    2019 年 4 月,Alibaba Cloud Linux 2 (Aliyun Linux 2) 正式开源.时至今日,已经走过三个月的里程.在这段时间内,这个刚诞生不久的为阿里云 ECS 环境定制优 ...

  7. Linux之源码包

    暂时感觉用不上,到时需要了解的时候再补上

  8. List容器-LinkedList链表

    LinkedList--链表 特点: 删除,增加 用LinkedList性能高  层次查找不适合       查询用ArrayList  数组下标查找  插入和删除慢缺点是要做移位操作 总结:Link ...

  9. jsp内建对象的作用域

  10. 【C++】STL ：栈

    c++stack(堆栈)是一个容器的改编,它实现了一个先进后出的数据结构(FILO) 使用该容器时需要包含#include<stack>头文件: 定义stack对象的示例代码如下: sta ...