渐变主要是通过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. php 单向散列加密

    1.加密文件 <?php //sha1_en.php header("content-type:text/html;charset=utf-8"); $str = " ...

  2. Postgresql 正则表达式【转】

    原文:http://blog.csdn.net/wugewuge/article/details/7704996 postgresql支持POSIX 风格的正则表达式,在postgresql中使用正则 ...

  3. 集合-Map 接口

    1. 概述   java.util.Map <K,V>接口是一个顶层接口,里面存放的数据单元是:单对元素: K 表示 描述的键 的类型,Key 的类型: V 表示 描述的值 的类型,Val ...

  4. DirectX11笔记(九)--Direct3D渲染5--CONSTANT BUFFERS

    原文:DirectX11笔记(九)--Direct3D渲染5--CONSTANT BUFFERS 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u0 ...

  5. javascript里的eval总结

    JavaScript eval() 函数 1.定义和用法 eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行. 如果参数是一个表达式,eval() 函数将执行表达式.如果参 ...

  6. JSP Web第三章整理复习 开发环境搭建

    P86  WEB工作原理 用户使用浏览器通过HTTP协议请求服务器上的Web资源,服务器接收到该请求后,读取请求的URI所标识的资源,加上其他资源发送给客户端的浏览器,浏览器解析响应中的HTML数据, ...

  7. oracle-Mount

    执行nomount的所有工作,另外附加数据结构并与这些数据结构进行交互.这时,oracle从控制文件中获得信息. 可以执行的任务是: 执行数据库的完全恢复操作 重命名数据文件 改变数据库的归档状态. ...

  8. rqnoj86 智捅马蜂窝

    题目描述 背景 为了统计小球的方案数,平平已经累坏了.于是,他摘掉了他那800度的眼镜,躺在树下休息. 后来,平平发现树上有一个特别不一样的水果,又累又饿的平平打算去把它摘下来. 题目描述 现在,将大 ...

  9. Codeforces 336C

    这题是大一暑假时候做的,当时没有出,直到今天突然觉得应该把没过的题目再做一边,不然真的是越积越多. 现在能够独立做出来真的是难以表达的兴奋,刚开始的时候就觉得 O(30 * 30 * n)的复杂度有点 ...

  10. Java8 日期、时间操作

    一.简介 在Java8之前,日期时间API一直被开发者诟病,包括:java.util.Date是可变类型,SimpleDateFormat非线程安全等问题.故此,Java8引入了一套全新的日期时间处理 ...