实现这种淡入淡出的轮播关键在于css的一种设置  首先它不能像传统的轮播显示隐藏 或者左右浮动

他应该让其固定定位使其重叠在一起  达到这种效果  然后设置c3动画属性 transition:1s;

具体代码如下 请君欣赏

 * {

   margin:;

   padding:;

   list-style: none;

 }

 body {

   width: 100%;

   height: 100%;

   background-color: #666;

 }

 .container {

   width: 650px;

   height: 236px;

   margin: 100px auto;

   position: relative;

 }

 .container ul {

   width: 650px;

   height: 236px;

 }

 .container ul li {

   width: 100%;

   height: 100%;

   position: absolute;

   left:;

   top:;

   transition: 2s;

   opacity:;

 }

 .container ul li img {

   width: 100%;

   height: 100%;

 }

 .container ul li:nth-child(1) {

   opacity:;

 }

 .container ol {

   position: absolute;

   left: 50%;

   bottom: 10px;

   transform: translate(-50%, 0);

 }

 .container ol li {

   float: left;

   margin: 0 10px;

 }

 .container ol li a {

   width: 15px;

   height: 15px;

   background-color: #666;

   display: inline-block;

   border-radius: 50%;

 }

 .container ol a.active {

   background: yellow;

 }

HTML部分

 <body>

     <div class="container">

         <ul>

             <li><img src="./img/1.jpg" alt=""></li>

             <li><img src="./img/2.jpg" alt=""></li>

             <li><img src="./img/3.jpg" alt=""></li>

             <li><img src="./img/4.jpg" alt=""></li>

             <li><img src="./img/5.jpg" alt=""></li>

             <li><img src="./img/6.jpg" alt=""></li>

         </ul>

         <ol>

             <li><a  class="active" href="#1"></a></li>

             <li><a href="#1"></a></li>

             <li><a href="#1"></a></li>

             <li><a href="#1"></a></li>

             <li><a href="#1"></a></li>

             <li><a href="#1"></a></li>

         </ol>

     </div>

     <script src="./js/index.js"></script>

     <script>

         new Container();

     </script>

 </body>

JS部分

 class Container{

     constructor(){

         this.oli=document.querySelectorAll("ul li");

         this.ball=document.querySelectorAll("a");

         this.box=document.querySelector(".container");

         this.timer=null;

         this.count=0;

         this.init()

     }

     init(){

         this.autoplay();

         this.click();

         this.mouse()

     }

     autoplay(){

         this.timer=setInterval(()=>{

             this.count++;

             if(this.count==this.oli.length){

                 this.count=0;

             }

             this.change(this.count);

         },2000)

     }

     change(index){

         this.oli.forEach((item,i)=>{

             item.style.opacity=0;

             this.ball[i].classList.remove("active");

         });

          this.oli[index].style.opacity=1;

         this.ball[index].classList.add("active")

     }

     click(){

         //小圆点的点击事件

         this.ball.forEach((item,index)=>{

             item.onclick=()=>{

                 this.count=index

                 this.change(index)

             }

         })

     }

     mouse(){

         //鼠标移入停止定时器 离开继续

         this.box.onmouseover=()=>{

             clearInterval(this.timer)

         }

         this.box.onmouseout=()=>{

             this.autoplay()

         }

     }

 }

原生js实现简单轮播的淡入淡出效果的更多相关文章

  1. 封装bt轮播图淡入淡出效果样式

    <!--BT轮播图-->    <div data-ride="carousel" class="carousel slide carousel_inn ...

  2. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

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

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

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

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

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

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

  6. 原生js实现无缝轮播

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

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

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

  8. 背景大图隔几秒切换（非轮播，淡入淡出）--变形金刚joy007 项目总结

    工作日想了好久,周日回家才想出来的... 图片切换(非轮播,淡入淡出) 1.切换2.停止 <html> <head> <meta content="text/h ...

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

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

随机推荐

  1. Spring Boot Async异步执行

    异步调用就是不用等待结果的返回就执行后面的逻辑,同步调用则需要等带结果再执行后面的逻辑. 通常我们使用异步操作都会去创建一个线程执行一段逻辑,然后把这个线程丢到线程池中去执行,代码如下: Execut ...

  2. Genymotion模拟器拖入文件报An error occured while deploying the file的错误

    今天需要用到资源文件,需要将资源文件拖拽到sd卡中,但老是出现这个问题: 资源文件拖不进去genymotion.查看了sd的DownLoad目录,确实没有成功拖拽进去. 遇到这种问题的,我按下面的思路 ...

  3. SSIS ->> Environment Variables

    SQL Server Integration Services(SSIS) 在2012版本引入了Environment Variables这个新特性.它允许我们为一个环境创建出一套变量用于为项目内的包 ...

  4. Infragist ics Ult imate 2015 Vol.1 - Product Keys

    Ultimate ProductKeys 2015 Vol.1: 9122-1900164-4504144 9122-9300855-3994197 9122-7600717-4579130 9122 ...

  5. 新款Macbook 安装任意来源软件教程 mac软件下载资源推荐

    防止无良爬虫,开头附上原文链接:http://www.cnblogs.com/xueyudlut/p/7810981.html ------分割线--------------------------- ...

  6. ue-edit设置显示函数列表

    UltraEdit的函数列表竟然不显示函数,那这功能要它何用,应该如何才能让函数显示出来呢? 公司编程基本上都在UltraEdit中进行,俺刚来公司还不熟悉,今天装了个UltraEdit,可是看着别人 ...

  7. 洗牌算法shuffle

    对这个问题的研究始于一次在群里看到朋友发的洗牌面试题.当时也不知道具体的解法如何,于是随口回了一句:每次从剩下的数字中随机一个.过后找相关资料了解了下,洗牌算法大致有3种,按发明时间先后顺序如下: 一 ...

  8. libevent核心-event和event_base结构体

    参考:http://blog.csdn.net/yusiguyuan/article/category/2171081/2 http://blog.csdn.net/sparkliang/articl ...

  9. MySQL理解索引、添加索引的原则

    索引用于快速找出在某个列中有一特定值的行.不使用索引,MySQL必须从第1条记录开始然后读完整个表直到找出相关的行,还需要考虑每次读入数据页的IO开销.而如果采取索引,则可以根据索引指向的页以及记录在 ...

  10. YII中使用SOAP一定要注意的一些东西

    SiteController.php 在Yii框架下使用soap接口的时候,需要注意几个问题:: 1 服务器要打开soap功能,在phpinfo里搜soap,如果已经打开了的话有个大标题就是SOAP2 ...