渐变主要是通过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. LUOGU 2593 : [Zjoi2006] 超级麻将

    传送门 解题思路 直接爆搜全T..状态数太多了,所以我们考虑贪心+剪枝.贪心:先拿三个连着的,再拿四个一样的,再拿三个一样的,最后拿两个一样的这样的搜索顺序最优,两个的放最后是因为只要这样的一个,三个 ...

  2. Hdu 2513　区间DP

    Cake slicing Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  3. php thrift TServerSocket实现端口复用

    <?php namespace Message\Controller; use Think\Controller; use Thrift\Exception\TException; use Th ...

  4. Centos 下添加开机自启动服务和脚本【转】

    最近刚玩Centos7的系统,跟Centos6还是很多方面有改变的,这里记录一下怎么在Centos7下添加开机自启动脚本和服务的方法. 1.添加开机自启服务 我这里以docker 服务为例,设置如下两 ...

  5. JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画

    /** * [JQ基础动画] * show() 显示 * hide() 隐藏 * toggle() 切换 * 默认无动画,如果要产生动画 * 在括号内,添加毫秒数,可产生动画和控制动画的快慢 * * ...

  6. Hashkell 第一篇

    心情极差.................. 无事可做,其实是没心情去做事情,只好又翻起了haskell入门 记下几点,以备查询: 1. 函数名首字符是不可以大写的, 而且名称中可以有单引号,这也是合 ...

  7. ServletConfig详解 （转载）

    ServletConfig详解  (转载)   容器初始化一个servlet时,会为这个servlet建一个唯一的ServletConfig.容器从DD读出Servlet初始化参数,并把这些参数交给S ...

  8. 连接池dbcp

    连接池dbcp DBCP:apache组织 使用步骤: 1.导入jar包(commons-dbcp-1.4.jar和commons-pool-1.5.6.jar.commons-logging-1.2 ...

  9. 重磅！容器集群监控利器 阿里云Prometheus 正式免费公测

    Prometheus 作为容器生态下集群监控的首选方案,是一套开源的系统监控报警框架.它启发于 Google 的 borgmon 监控系统,并于 2015 年正式发布.2016 年,Prometheu ...

  10. shell学习（21）- tr

    Linux tr 命令用于转换或删除文件中的字符. tr 指令从标准输入设备读取数据,经过字符串转译后,将结果输出到标准输出设备. 在tr中利用集合的概念,可以轻松地将字符从一个集合映射到另一个集合中 ...