H5实现仿flash效果的实现代码
程序员文章站
2022-09-02 15:24:36
h5实现仿flash效果的实现代码
随着h5的火热，flash即将被h5所代替，如何利用h5实现flash的效果呢？我做了一个简单的小东西分享给大家。
html和js部...
h5实现仿flash效果的实现代码
随着h5的火热，flash即将被h5所代替，如何利用h5实现flash的效果呢？我做了一个简单的小东西分享给大家。
html和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('*');
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 odiv=document.getelementbyid('playimages');
var obtnprev=getbyclass(odiv,'prev')[0];
var obtnnext=getbyclass(odiv,'next')[0];
var omarkleft=getbyclass(odiv,'mark_left')[0];
var omarkright=getbyclass(odiv,'mark_right')[0];
var odivsmall=getbyclass(odiv,'small_pic')[0];
var oulsmall=odivsmall.getelementsbytagname('ul')[0];
var alismall=odivsmall.getelementsbytagname('li');
var oulbig=getbyclass(odiv,'big_pic')[0];
var alibig=oulbig.getelementsbytagname('li');
var nowzindex=2;
var now=0;
oulsmall.style.width=alismall.length*alismall[0].offsetwidth+'px';
obtnprev.onmouseover=omarkleft.onmouseover=function () {
startmove(obtnprev,'opacity',100);
};
obtnprev.onmouseout=omarkleft.onmouseout=function () {
startmove(obtnprev,'opacity',0);
}
obtnnext.onmouseover=omarkright.onmouseover=function () {
startmove(obtnnext,'opacity',100);
};
obtnnext.onmouseout=omarkright.onmouseout=function () {
startmove(obtnnext,'opacity',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,'opacity',100);
}
alismall[i].onmouseout=function () {
if(this.index!=now){
startmove(this,'opacity',60)
}
}
}
function tab() {
alibig[now].style.zindex=nowzindex++;
for(var i=0;i<alismall.length;i++){
startmove(alismall[i],'opacity',60);
}
startmove(alismall[now],'opacity',100);
alibig[now].style.height=0;
startmove(alibig[now],'height',320);
if(now==0){
startmove(oulsmall,'left',0);
}
else if(now==alismall.length-1){
startmove(oulsmall,'left',-(now-2)*alismall[0].offsetwidth);
}
else {
startmove(oulsmall,'left', -(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);
odiv.onmouseover=function () {
clearinterval(timer);
}
odiv.onmouseout=function () {
timer=setinterval(obtnnext.onclick,2000);
}
}
</script>
</head>
<body>
<div id="playimages" class="play">
<ul class="big_pic">
<div class="prev"></div>
<div class="next"></div>
<div class="text">加载图片说明.....</div>
<div class="length">计算图片数量.....</div>
<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>
<div class="bg"></div>
<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>
<div 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>
</div>
</div>
</body>
</html>
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;
}
效果图展示：
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！