Exemple d'effet flash imitation H5-js tutoriel-php.cn

Exemple d'effet flash imitation H5

小云云

Libérer： 2018-01-27 16:59:09

original

1778 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur le code d'implémentation de H5 pour obtenir un effet flash d'imitation. J'espère que cet article pourra aider tout le monde à réaliser une telle fonction. J'espère qu'il pourra aider tout le monde. .

Code d'implémentation H5 pour obtenir un effet de type flash

Avec la popularité de H5, le flash sera remplacé par H5 Comment utiliser H5 pour obtenir le flash. effet? ? J'ai fait une petite chose simple à partager avec vous.

partie html et js :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="jsByKing.js"></script>
  <link rel="stylesheet" href="仿flash的css.css" rel="external nofollow" >
  <script>
    function getByClass(oParent,sClass) {
      var aEle=oParent.getElementsByTagName(&#39;*&#39;);
      var aResult=[];
      for(var i=0;i<aEle.length;i++){
        if(aEle[i].className==sClass){
          aResult.push(aEle[i]);
        }
      }
      return aResult;
    }
    //左右箭头
    window.onload=function () {
      var op=document.getElementById(&#39;playimages&#39;);
      var oBtnPrev=getByClass(op,&#39;prev&#39;)[0];
      var oBtnNext=getByClass(op,&#39;next&#39;)[0];
      var oMarkLeft=getByClass(op,&#39;mark_left&#39;)[0];
      var oMarkRight=getByClass(op,&#39;mark_right&#39;)[0];

      var opSmall=getByClass(op,&#39;small_pic&#39;)[0];
      var oUlSmall=opSmall.getElementsByTagName(&#39;ul&#39;)[0];
      var aLiSmall=opSmall.getElementsByTagName(&#39;li&#39;);

      var oUlBig=getByClass(op,&#39;big_pic&#39;)[0];
      var aLiBig=oUlBig.getElementsByTagName(&#39;li&#39;);

      var nowZIndex=2;

      var now=0;

      oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+&#39;px&#39;;

      oBtnPrev.onmouseover=oMarkLeft.onmouseover=function () {
        startMove(oBtnPrev,&#39;opacity&#39;,100);
      };
      oBtnPrev.onmouseout=oMarkLeft.onmouseout=function () {
        startMove(oBtnPrev,&#39;opacity&#39;,0);
      }
      oBtnNext.onmouseover=oMarkRight.onmouseover=function () {
        startMove(oBtnNext,&#39;opacity&#39;,100);
      };
      oBtnNext.onmouseout=oMarkRight.onmouseout=function () {
        startMove(oBtnNext,&#39;opacity&#39;,0);
      }

      //大图切换
      for(var i=0; i<aLiSmall.length;i++){
        aLiSmall[i].index=i;
        aLiSmall[i].onclick=function () {
          if(this.index==now)return;

          now=this.index;

          tab();

        aLiSmall[i].onmouseover=function () {
          startMove(this,&#39;opacity&#39;,100);
        }
        aLiSmall[i].onmouseout=function () {
          if(this.index!=now){
            startMove(this,&#39;opacity&#39;,60)
          }
        }
      }
      function tab() {
        aLiBig[now].style.zIndex=nowZIndex++;

        for(var i=0;i<aLiSmall.length;i++){
          startMove(aLiSmall[i],&#39;opacity&#39;,60);
        }

        startMove(aLiSmall[now],&#39;opacity&#39;,100);

        aLiBig[now].style.height=0;
        startMove(aLiBig[now],&#39;height&#39;,320);

        if(now==0){
          startMove(oUlSmall,&#39;left&#39;,0);
        }
        else if(now==aLiSmall.length-1){
          startMove(oUlSmall,&#39;left&#39;,-(now-2)*aLiSmall[0].offsetWidth);
        }

        else {
          startMove(oUlSmall,&#39;left&#39;, -(now-1)*aLiSmall[0].offsetWidth);
        }
      };

      }
      oBtnPrev.onclick=function () {
        now--;
        if(now==-1){
          now=aLiSmall.length-1;
        }
        tab();
      };
      oBtnNext.onclick=function () {
        now++;
        if(now==aLiSmall.length){
          now=0;
        }
        tab();
      }
      var timer=setInterval(oBtnNext.onclick,2000);

      op.onmouseover=function () {
        clearInterval(timer);
      }
      op.onmouseout=function () {
        timer=setInterval(oBtnNext.onclick,2000);
      }
    }
  </script>
</head>
<body>
<p id="playimages" class="play">
  <ul class="big_pic">
    <p class="prev"></p>
    <p class="next"></p>

    <p class="text">加载图片说明.....</p>
    <p class="length">计算图片数量.....</p>

    <a class="mark_left" href="javascript:;" rel="external nofollow" rel="external nofollow" ></a>
    <a class="mark_right" href="javascript:;" rel="external nofollow" rel="external nofollow" ></a>
    <p class="bg"></p>

    <li style="z-index: 1;"><img src="../../img/练习/1.jpg" alt=""></li>
    <li><img src="../../img/练习/2.jpg" alt=""></li>
    <li><img src="../../img/练习/3.jpg" alt=""></li>
    <li><img src="../../img/练习/4.jpg" alt=""></li>
    <li><img src="../../img/练习/5.jpg" alt=""></li>
    <li><img src="../../img/练习/6.jpg" alt=""></li>
  </ul>
  <p class="small_pic">
    <ul style="width: 390px;">
      <li style="opacity: 1"><img src="../../img/练习/1.jpg" alt=""></li>
      <li><img src="../../img/练习/2.jpg" alt=""></li>
      <li><img src="../../img/练习/3.jpg" alt=""></li>
      <li><img src="../../img/练习/4.jpg" alt=""></li>
      <li><img src="../../img/练习/5.jpg" alt=""></li>
      <li><img src="../../img/练习/6.jpg" alt=""></li>
    </ul>
  </p>
</p>
</body>
</html>

Copier après la connexion

partie css :

body{
  background: #666;
}
ul{
  padding: 0;
  margin: 0;
}
li{
  list-style: none;
}
img{
  border:0;
  width: 100%;
  height: 100%;
}
.play{
  width: 400px;
  height: 430px;
  margin: 50px auto 0;
  background: #999;
  font: 12px Arial;

}
.big_pic{
  width: 400px;
  height: 320px;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background: #222;
  position: relative;
}
.big_pic img{
  width: 400px;
  height: 320px;
}
.big_pic li{
  width: 400px;
  height: 320px;
  overflow: hidden;
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}
.mark_left{
   width: 200px;
   height: 320px;
   position: absolute;
   left: 0;
   top:0;
   /*background: red;*/
   opacity: 0;
  z-index: 3000;
 }
.mark_right{
  width: 200px;
  height: 320px;
  position: absolute;
  left: 200px;
  top:0;
  /*background: green;*/
  opacity: 0;
  z-index: 3000;
}
.big_pic .prev{
  width: 60px;
  height: 60px;
  background-image: url("../../img/练习/left.jpg");
  background-size: cover;
  position: absolute;
  top: 130px;
  left: 10px;
  z-index: 3001;
  opacity: 0;
  cursor: pointer;
}
.big_pic .next{
  width: 60px;
  height: 60px;
  background-image: url("../../img/练习/right.jpg");
  background-size: cover;
  background-position: 65px 60px;
  position: absolute;
  top: 130px;
  right: 10px;
  z-index: 3001;
  opacity: 0;
  cursor: pointer;
}
.big_pic .text{
  position: absolute;
  left: 10px;
  bottom: 4px;
  z-index: 3000;
  color: #ccc;
}
.big_pic .length{
  position: absolute;
  right: 10px;
  bottom: 4px;
   z-index: 3000;
  color: #ccc;
}
.big_pic .bg{
  width: 400px;
  height: 25px;
  background: #000;
  opacity: 0.6;
  position: absolute;
  z-index: 2999;
  bottom: 0;
  left:0;
}
.small_pic{
  width: 380px;
  height: 94px;
  position: relative;
  top: 7px;
  left: 10px;
  overflow: hidden;
}
.small_pic ul{
  height: 94px;
  position: absolute;
  top:0;
  left: 0;
}
.small_pic li{
  width: 120px;
  height: 94px;
  float: left;
  padding-right: 10px;
  cursor: pointer;
  opacity: 0.6;
}

Copier après la connexion

Affichage du rendu :