search

Home >Web Front-end >JS Tutorial >H5 imitation flash effect example

H5 imitation flash effect example

小云云
小云云Original
2018-01-27 16:59:091830browse

This article mainly introduces the relevant information about the implementation code of H5 to achieve imitation flash effect. I hope this article can help everyone realize such a function. Friends who need it can refer to it. I hope it can help everyone.

H5 implementation code for imitating flash effect

With the popularity of H5, flash will be replaced by H5. How to use H5 to achieve flash effect? ? I made a simple little thing to share with you.

html and js part: 


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

css part:


##

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

Rendering display:

Related recommendations:


How to prevent Flash from blocking div elements in HTML

php method to obtain flash detailed data

Detailed explanation of the flash attributes of param and embed in the html tag


The above is the detailed content of H5 imitation flash effect example. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：vuejs uses $emit and $on to pass values ​​between componentsNext article：vuejs uses $emit and $on to pass values ​​between components

Related articles

See more