简单的渐变轮播插件


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 appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
那些精彩的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
php引用地址改变变量值的问题
2012/03/23 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
人力资源职位说明书
2014/07/29 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL