前端——》记录一个带时间轴的画廊效果

效果

效果如下：

点击左边或右边的图片，图片会像轮播图一样替换掉中左滑和右滑，

最中间的图片最大，越往两边图片越小，

同时最下方的时间轴跟随图片上的时间而移动。

代码

html：

```
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script type="text/javascript" src="./js/zturn.js"></script>
```
<div class="imageFrame">
    <div class="lb_gl">
        <div class="container">
            <div class="pictureSlider poster-main">
                <div class="poster-btn poster-prev-btn"></div>
                <ul id="zturn" class="poster-list">
                    <li class="poster-item  zturn-item" id="2014_1">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2014_1.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2015_1">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2015_1.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2016_1">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2016_1.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2017_1">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2017_1.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item  zturn-item"  id="2017_2">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2017_2.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2018_1">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2018_1.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2018_2">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2018_2.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2018_3">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2018_3.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2018_4">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2018_4.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2018_5">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2018_5.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2018_6">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2018_6.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2019_1">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2019_1.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2019_2">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2019_2.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2019_3">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2019_3.png" width="100%">
                        </div>
                        <div class="li_right"> </div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2019_4">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2019_4.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>

                    <li class="poster-item zturn-item hiddenDiv"  id="2019_5">
                        <div class="for_btn">
                            <img src="./images/1.0/DX_Leaders_Network_slices/pastEvents/details/2019_5.png" width="100%">
                        </div>
                        <div class="li_right"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="imageFooter">
    <div class="time">
        <div class="timelogo"><img id="timeImg_2014" src="./images/1.0/DX_Leaders_Network_slices/pastEvents/mini.png"></div>
        <div class="timeTitle" id="timeTitle_2014">2014</div>
        <div class="timeContent">Polo Alto</div>
    </div>
    <div class="time" >
        <div class="timelogo"><img id="timeImg_2015" src="./images/1.0/DX_Leaders_Network_slices/pastEvents/mini.png"></div>
        <div class="timeTitle" id="timeTitle_2015">2015</div>
        <div class="timeContent">San Francisco</div>
    </div>
    <div class="time">
        <div class="timelogo"><img id="timeImg_2016" src="./images/1.0/DX_Leaders_Network_slices/pastEvents/mini.png"></div>
        <div class="timeTitle"  id="timeTitle_2016">2016</div>
        <div class="timeContent">Monterey</div>
    </div>
    <div class="time">
        <div class="timelogo"><img id="timeImg_2017" src="./images/1.0/DX_Leaders_Network_slices/pastEvents/mini.png"></div>
        <div class="timeTitle" id="timeTitle_2017">2017</div>
        <div class="timeContent">San Francisco</div>
    </div>
    <div class="time" >
        <div class="timelogo"><img id="timeImg_2018" src="./images/1.0/DX_Leaders_Network_slices/pastEvents/mini.png"></div>
        <div class="timeTitle" id="timeTitle_2018"> 2018</div>
        <div class="timeContent">San Francisco</div>
    </div>
    <div class="time">
        <div class="timelogo"><img id="timeImg_2019" src="./images/1.0/DX_Leaders_Network_slices/pastEvents/mini.png"></div>
        <div class="timeTitle" id="timeTitle_2019">2019</div>
        <div class="timeContent">San Francisco</div>
    </div>
</div>

css1:

/*轮播*/
.lb_gl{margin-bottom: 30px;}
.container{margin:0 auto;position: relative;}
.pictureSlider{margin-bottom: 24px;}
.poster-item{
   background-color: white;
   width: 536px;
   border-radius: 10px;
   /* padding: 45px 23px 20px 23px; */
   transition: all 0.5s;
   cursor: default;
   -moz-transition: all 0.5s;
   cursor: default;
   -webkit-transition: all 0.5s;
   cursor: default;
   -o-transition: all 0.5s;
   cursor: default;
}
.imageFooter {
   height: 100px;
   background: url("../../images/1.0/DX_Leaders_Network_slices/pastEvents/bottom_bg.png");
   background-repeat: no-repeat;
   background-size: 100%;
   margin-top: 300px;
   margin-left: 100px;
}
.time {
   text-align: center;
   width: 12%;
   float: left;
   margin-left: 3%;
}
.timeTitle {
   font-size: 20px;
   font-family: AdelleSansDevanagari-Semibold, AdelleSansDevanagari;
   font-weight: 600;
   color: rgba(0,41,106,0.5);
   line-height: 77px;
}

.timeTitle.big{
   font-size: 30px;
   font-weight: 800;
   margin-top: -17px;
}

.timeImgbig{
   margin-top: -13px;
   max-width: 50%;
}

.timelogo {
   margin-top: -8px;
}
.poster-item.showDiv{
   display: block;
}
.poster-item.hiddenDiv{
   display: none;
}
.poster-item.maxWith{
   width: 536px;
}
.poster-item.minWith{
   width: 336px;
}
.turn_3d{text-align: center;color: #fff;font-weight: 400;font-size: 36px;padding: 28px 0;}
.xxgy{font-size: 30px;font-weight: 900;padding-left: 10px;}
.poster-item .say{font-size: 18px;margin-bottom: 5px;padding-left: 10px;}
.students_star{padding:10px 10px 0 10px ;}
.cell_list{margin-bottom: 20px;color:#999;font-size: 18px;overflow: hidden;}
.darks{color: #000;padding-left: 10px;}
.zwjs{border-top:1px solid #d0cddb;line-height: 26px;padding-top: 5px;color: #999;font-size: 12px;max-height: 84px;overflow: hidden;}
.for_btn{width:336px;position: relative;overflow:hidden;float: left}
.li_right{display: none;width: 190px;float: left;margin-left: 5px;}
.li_right.showDiv{display: block;}
.li_right.hiddenDiv{display: none;}
.li_right_title {
   font-size: 12px;
   font-family: PingFangSC-Semibold, PingFang SC;
   font-weight: 600;
   color: #124DA9;
   line-height: 22px;
}

.li_right_content {
   font-size: 10px;
   line-height: 20px;
   height: 150px;
   background: url(../../images/1.0/DX_Leaders_Network_slices/pastEvents/hexagon-middle-right1.png);
   background-size: 30%;
   background-repeat: no-repeat;
   background-position: right bottom;
}
.in_page{position: absolute;left: 50%;top:50%;width:40px;height: 40px;margin-left: -20px;margin-top: -20px;}
.in_page>img{width: 40px;height: 40px;}

.check_more{width: 180px;height: 50px;line-height: 50px;text-align: center;color:#fff;background: #bc241d;margin:0 auto;display: block;}

javaScript:

var aa=new zturn({
    id:"zturn",
    opacity:0.9,
    width:382,
    Awidth:1024,
    scale:0.9
})
var ab=new zturn({
    id:"zturn2",
    opacity:0.8,
    width:382,
    Awidth:1024,
    scale:0.6
})

引用的js文件：

(function(win,doc,undefined){
   var zturn=function(turn){
      this.turn=turn
      this.zturn=$("#"+turn.id)
      this.X=0
      this.zturnitem=this.zturn.children(".zturn-item")
      this.num_li=16//轮播元素个数 zturnPy为每个的偏移量
      this.zturnPy=turn.Awidth/(this.num_li-1)
      this.init()
      this.turn_()
      return this
   }
   zturn.prototype={
      constructor:zturn,
       init:function(){
            var _self = this;
         var detailsMap={
          "2014_1":{
             "title":"Enabling Enterprise Access to Innovative ideas – Big Data & Security",
             "conten":"Garden Court Hotel, Palo Alto Downtown, California <br>2014"
          },
          "2015_1":{
             "title":"Enabling Enterprise Access to Innovative ideas – Big Data, Next-Gen Storage & Security",
             "conten":" Park Central Hotel <br> San Francisco, California.<br>2015"
          },
          "2016_1":{
             "title":"Enabling Enterprise Access to Innovative ideas – Cloud, Big Data & Security",
             "conten":"InterContinental The Clement, Monterey, California. <br>2016"
          },
          "2017_1":{
             "title":"Digital Transformation  ",
             "conten":"Alan Boehme <br>CTO and Chief Innovation Officer of Proctor & Gamble <br> 2017"
          },
          "2017_2":{
             "title":"Enabling Enterprise Access to Innovative ideas – Cloud, Big Data & Security, Digital Transformation",
             "conten":"InterContinental San Francisco, California. <br>2017"
          },
          "2018_1":{
             "title":"Emerging Tech Trends & Corporate Innovation Best Practices",
             "conten":"Gamiel Gran <br> Chief Commercial Officer, Mayfield <br> 2018."
          },
          "2018_2":{
             "title":"SiFive: Leading the RISC-V Revolution ",
             "conten":"Naveed Sherwani <br>President & CEO of SiFive, Inc. <br>2018"
          },
          "2018_3":{
             "title":"H2O: Intelligence as a Maker Movement",
             "conten":"SriSatish Ambati <br> CEO and Founder of H2O.ai  <br>2018"
          },
          "2018_4":{
             "title":"Enabling Enterprise Access to Innovative ideas – Cloud, AI, Big Data, Security, Digital Transformation & Corporate Innovation",
             "conten":"Grand Hyatt<br> San Francisco, California.<br>2018"
          },
          "2018_5":{
             "title":"Illumio: The Zero Trust Segmentation Company",
             "conten":"Andrew Rubin <br>CEO and Co-Founder of Illumio <br>2018"
          },
          "2018_6":{
             "title":"2018, AWS Company Visit.",
             "conten":"  "
          },
          "2019_1":{
             "title":"Thriving in the Digital Economy",
             "conten":"Peter High <br>Forbes Contributor & President of Metis Strategy <br>2019"
          },
          "2019_2":{
             "title":"P&G Digital Transformation Introduction ",
             "conten":"Alan Boehme <br>CTO and Chief Innovation Officer of Proctor & Gamble<br> 2019"
          },
          "2019_3":{
             "title":"Building Highly Valuable Companies ",
             "conten":"Dominic Orr <br>Chairman of Ordr<br> 2019"
          },
          "2019_4":{
             "title":"Emerging Tech Trends & Corporate Innovation Best Practices",
             "conten":" Gamiel Gran <br>Chief Commercial Officer, Mayfield <br> 2019"
          },
          "2019_5":{
             "title":"Evolution of Technology and the Driving Forces ",
             "conten":"Atiq Raza <br> Chairman & CEO of Virsec Systems <br>2019"
          }
       }
            var leftId=''
            var middleId=''
            var rightId=''
         this.zturn.children(".zturn-item").each(function(index,element){
            //index是第几个元素 X是选取的中间数 num_li是总数
            var rt=1//1:右侧：-1：左侧
            if((index-_self.X)>_self.num_li/2||(index-_self.X)<0&&(index-_self.X)>(-_self.num_li/2)){rt=-1}//判断元素左侧还是右侧
            var i=Math.abs(index-_self.X);//取绝对值
            if(i>_self.num_li/2){i=parseInt(_self.X)+parseInt(_self.num_li)-index;}//i:是左或者右的第几个
            if((index-_self.X)<(-_self.num_li/2)){i=_self.num_li+index-_self.X}
            var marginleft=0

            if(rt==1&&((_self.num_li-i)==15||(_self.num_li-i)==14)){
               marginleft=_self.turn.width+_self.zturnPy*rt*i
            }

            if(rt==-1&&((_self.num_li-i)==15||(_self.num_li-i)==14)){
               marginleft=-_self.turn.width/2+_self.zturnPy*rt*i
            }

            $(this).css({
               'position':'absolute',
               'left': '50%',
               'margin-left':marginleft+"px",
               'z-index':_self.num_li-i,
               'opacity': Math.pow(_self.turn.opacity,i),
               'transform':'scale('+Math.pow(_self.turn.scale,i)+')',
               '-webkit-transform':'scale('+Math.pow(_self.turn.scale,i)+')',
               '-webkit-transform':'scale('+Math.pow(_self.turn.scale,i)+')',
               '-moz-transform':'scale('+Math.pow(_self.turn.scale,i)+')',
               '-ms-transform':'scale('+Math.pow(_self.turn.scale,i)+')',
               '-o-transform':'scale('+Math.pow(_self.turn.scale,i)+')'
            })
            $(this).attr("data_n",index)
            var id = $(this).attr("id");
            /*如果是中间五张图片*/
            if((_self.num_li-i)==16||(_self.num_li-i)==15||(_self.num_li-i)==14){
               $(this).removeClass("hiddenDiv");
               $(this).addClass("showDiv");
            }else{
               $(this).addClass("hiddenDiv");
               $(this).removeClass("showDiv");
            }
            var yearlist=["2014","2015","2016","2017","2018","2019"]
            /*展示5个图片，并给中间的图片添加文字说明*/
            if((_self.num_li-i)==16){
               $(this.getElementsByClassName("li_right")).removeClass("hiddenDiv")
               $(this.getElementsByClassName("li_right")).addClass("showDiv")
               var yearStr=id.split("_")[0]
               for(var j=0;j<yearlist.length;j++){
                  if(yearStr==yearlist[j]){
                     $("#timeTitle_"+yearStr).addClass("big")
                     $("#timeImg_"+yearStr).attr("src","./images/1.0/DX_Leaders_Network_slices/pastEvents/max.png")
                     $("#timeImg_"+yearStr).addClass("timeImgbig")
                  }else{
                     $("#timeTitle_"+yearlist[j]).removeClass("big")
                     $("#timeImg_"+yearlist[j]).attr("src","./images/1.0/DX_Leaders_Network_slices/pastEvents/mini.png")
                     $("#timeImg_"+yearlist[j]).removeClass("timeImgbig")
                  }
               }
            }else{
               $(this.getElementsByClassName("li_right")).addClass("hiddenDiv")
               $(this.getElementsByClassName("li_right")).removeClass("showDiv")
            }
            $(this.getElementsByClassName("li_right"))[0].innerHTML=''
            if((_self.num_li-i)==16){
               var title=detailsMap[id].title
               var content=detailsMap[id].conten
               var titleDiv='<div class="li_right_title">'+title+'</div>'
               var contentDiv='<div class="li_right_content">'+content+'</div>'
               $(this.getElementsByClassName("li_right")).append(titleDiv).append(contentDiv)
            }
         })
       },
   getChildren:function(obj){
      var objChild = [] ;
      var objs = obj.getElementsByTagName('*');
      for(var i=0,j=objs.length; i<j;++i){
         if(objs[i].nodeType != 1){alert(objs[i].nodeType);
            continue ;
         }
         var temp = objs[i].parentNode;
         if(temp.nodeType == 1){
            if(temp == obj){
               objChild[objChild.length] = objs[i] ;
            }
         }else if(temp.parentNode == obj){
            objChild[objChild.length] = objs[i] ;
         }
      }
      return objChild ;
   },
       turn_:function(){
         var _self=this
         this.zturnitem.click(function(){
            _self.X=$(this).attr("data_n")
            _self.init()
         })
       },
       prev_:function(){
            var _self=this
            this.X--
         if(this.X<0){this.X=this.num_li-1}
            this.init()
       },
      next_:function(){
            var _self=this
            this.X++
         if(this.X>=this.num_li){this.X=0}
            this.init()
       }
   }
      win.zturn = zturn;
}(window,document))