简单的渐变轮播插件


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 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
自己开发Dojo的建议框架
Sep 24 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
href下载文件根据id取url并下载
May 28 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 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 curl选项列表(超详细)
2013/07/01 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
js获取form的方法
2015/05/06 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
Vue的Class与Style绑定的方法
2017/09/01 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python提示No module named images的解决方法
2014/09/29 Python
Python Matplotlib库入门指南
2015/05/18 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
签约仪式主持词
2014/03/19 职场文书
搞笑爱情保证书
2014/04/29 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python