H5实现仿flash效果的实现代码

这篇文章主要介绍了H5实现仿flash效果的实现代码的相关资料,希望通过本文能帮助到大家，实现这样的功能，需要的朋友可以参考下

H5实现仿flash效果的实现代码

随着H5的火热，flash即将被H5所代替，如何利用H5实现flash的效果呢？我做了一个简单的小东西分享给大家。

html和js部分：

   Title   
加载图片说明.....
计算图片数量.....

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-600"); 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-600"); 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; }

效果图展示：