简单的渐变轮播插件


Posted in Javascript onJanuary 12, 2017

话不多说,请看代码:

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Example</title>
    <style>
.CreabineCarousel{
 width: 100%;
  height: 700px;
  background-size: cover;
  position: relative;
}
.CreabineCarousel .CreabineCarousel-dotContainer{
 position:absolute;
 bottom: 5%;
 margin:0 auto;
 z-index: 100;
 list-style-type: none;
 width: 100%;
 text-align: center;
 left: 0;
 padding: 0;
}
.CreabineCarousel .CreabineCarousel-dotContainer .dot{
 width: 30px;
 height: 4px;
 border-radius:3px;
 background-color:#fff;
 display: inline-block;
 margin:0 5px;
 opacity: 0.7;
}
.CreabineCarousel .CreabineCarousel-dotContainer .dot:hover{
 opacity: 1;
}
.CreabineCarousel .CreabineCarousel-item{
 position:absolute;
 width: 100%;
 height: 100%;
 transition:all 0.8s;
}
.CreabineCarousel .CreabineCarousel-item h1{
 max-width: 600px;
 text-align: center;
 font-size: 5rem;
 line-height: 1.3;
 color: #fff;
 padding: 300px 50px 0 50px;
 margin:0 auto;
}
.CreabineCarousel .CreabineCarousel-item p{
 max-width: 600px;
 text-align: center;
 font-size: 1.4rem;
 line-height: 1.4;
 color: #fff;
 padding-top: 10px 50px 0 50px;
 margin:0 auto;
}
    </style>
</head>
<body>
 <div id="carouselRoot"></div>
<script>
function CreabineCarousel(options){
 var imgPathList = options.images;
  var textList = options.contant;
  if (!options.root) {
    throw "require root to this CreabineCarousel";
  }
  if (!imgPathList) {
    throw "must provide parameter images";
  }
  if (imgPathList.length != textList.length) {
    throw "images are not equal to contants";
  }
  var changeCount = 0;
  var timer;
  var _autoScroll = options.autoScroll || false;
  var _scrollDuration = options.scrollDuration || 4000;
  var _height = options.height || 700;

  function initElements() {
   var _root = document.getElementById(options.root);
   if (!_root) {
      throw "no exist called this name element,please create element called this name";
    }
    _root.className = "CreabineCarousel";
    _root.style.height = _height + "px";
    var _dotContainer = document.createElement("ul");
    _dotContainer.className = 'CreabineCarousel-dotContainer';
    _root.appendChild(_dotContainer);
    for (var i = 0; i < imgPathList.length; i++) {
      var _dot = document.createElement("li");
      _dot.className = "dot";
      _dot.id = "item" + (i+1) + "dot";
      _dotContainer.appendChild(_dot);
      var _item = document.createElement("div");
      _item.className = "CreabineCarousel-item"
      _item.id = "item" + (i+1);
      _item.style.backgroundImage = "url(" + imgPathList[i] + ")";
      _item.style.backgroundSize = "cover";
      _item.style.backgroundRepeat = "no-repeat";
      if(i == 0){
        _item.style.opacity = '0';
        _item.style.zIndex = '1';
      }
      _root.appendChild(_item);
      var _h = document.createElement("h1");
      _h.innerText = textList[i].title;
      _item.appendChild(_h);
      var _p = document.createElement("p");
      _p.innerText = textList[i].text;
      _item.appendChild(_p);
    }
    _dotContainer.addEventListener("mouseover",function(e){
     if( e.target && e.target.className == "dot" ){
     clearInterval(timer);
     var id = e.target.id.substring(0,5);
     CarouselHover(id);
     }
    });
    _dotContainer.addEventListener("mouseout",function(e){
     if( e.target && e.target.className == "dot" ){
     var id = e.target.id;
     CarouselOut(id);
     }
    });
    if(_autoScroll){
      timer = setInterval(function(){Carousel()},_scrollDuration);
    }
  }
  function Carousel(){
    var all = document.getElementsByClassName('CreabineCarousel-item');
    for (var i = all.length - 1; i >= 0; i--) {
      all[i].style.opacity = '0';
      all[i].style.zIndex = '1';
    }
    var i=((changeCount++%5)+1);
    var id = "item" + i;
    document.getElementById(id).style.opacity = '1';
    document.getElementById(id).style.zIndex = '10';
  }
  function CarouselHover(id){
    clearInterval(timer);
    var all = document.getElementsByClassName('CreabineCarousel-item');
    for (var i = all.length - 1; i >= 0; i--) {
      all[i].style.opacity = '0';
      all[i].style.zIndex = '1';
    }
    document.getElementById(id).style.opacity = '1';
    document.getElementById(id).style.zIndex = '10';
  }
  function CarouselOut(id){
    var num = id.substring(4,5);
    num = parseInt(num)-1;
    changeCount = num;
    timer = window.setInterval(function(){Carousel()},_scrollDuration);
  }
  initElements();
 new CreabineCarousel({
 root:'carouselRoot',
 autoScroll:true,
        scrollDuration:3000,
 height:700,
 images:['https://cdn.worktile.com/images/index/index_all_bg_1.jpg?v=4.5.18','https://cdn.worktile.com/images/index/index_all_bg_2.jpg?v=4.5.18','https://cdn.worktile.com/images/index/index_all_bg_3.jpg?v=4.5.18','https://cdn.worktile.com/images/index/index_all_bg_4.jpg?v=4.5.18','https://cdn.worktile.com/images/index/index_all_bg_5.jpg?v=4.5.18'],
 contant:[
  {
  title:"title-1",
  text:"text-111"
  },
  {
  title:"title-2",
  text:"text-222"
  },
  {
  title:"title-3",
  text:"text-333"
  },
  {
  title:"title-4",
  text:"text-444"
  },
  {
  title:"title-5",
  text:"text-555"
  },
 ]
 });
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
那些精彩的JavaScript代码片段
Jan 12 #Javascript
JavaScript实现星级评分
Jan 12 #Javascript
angular2倒计时组件使用详解
Jan 12 #Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 #Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 #Javascript
js中常用的Math方法总结
Jan 12 #Javascript
Vue数据驱动模拟实现4
Jan 12 #Javascript
You might like
PHP7标量类型declare用法实例分析
2016/09/26 PHP
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python程序员开发中常犯的10个错误
2014/07/07 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
英语教育专业自荐信
2014/05/29 职场文书
总经理人事任命书
2014/06/05 职场文书
新文化运动的基本口号
2014/06/21 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
2014年加油站工作总结
2014/12/04 职场文书
毕业设计论文评语
2014/12/31 职场文书
西游记读书笔记
2015/06/25 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书