欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

简单的渐变轮播插件

程序员文章站 2022-06-13 14:55:22
话不多说,请看代码: ...

话不多说,请看代码:

<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>

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