简单的渐变轮播插件


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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
Prototype String对象 学习
Jul 19 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
js实现上传图片到服务器
Apr 11 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
jquery等待效果示例
2014/05/01 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
python连接mysql调用存储过程示例
2014/03/05 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
回调函数的意义以及python实现实例
2017/06/20 Python
python实现任意位置文件分割的实例
2018/12/14 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
一套软件测试笔试题
2014/07/25 面试题
先进集体获奖感言
2014/02/13 职场文书
聚美优品广告词改编
2014/03/14 职场文书
终止劳动合同协议书
2014/04/14 职场文书
社区志愿者活动总结
2014/06/26 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
小学科学教学计划
2015/01/21 职场文书
学校财务管理制度
2015/08/04 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
python实现简单反弹球游戏
2021/04/12 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android