简单的渐变轮播插件


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系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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动态生成JavaScript代码
2009/03/09 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP 引用文件技巧
2010/03/02 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
PHP基础知识介绍
2013/09/17 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
详解Python中类的定义与使用
2017/04/11 Python
python中logging包的使用总结
2018/02/28 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
十一酒店活动方案
2014/02/20 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
社区清明节活动总结
2014/07/04 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
表扬信格式模板
2015/05/05 职场文书
求职意向书范本
2015/05/11 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL