播放器图片html,来看下图片播放器（JavaScript）

Jq切换

/**********总体布局**************/

*{margin:0; padding:0; border:0;}

body{background-color:rgba(0,0,0,0.4);}

#content{position:relative; width:970px; height:550px; margin:20px auto; border:2px solid #FFF;}

#content:hover #tags img{opacity:1;}

/**********图片主要显示区**************/

#player{position:absolute; width:100%; height:100%; top:0; left:0;}

#player img{display:inline-block; position:absolute; float:left; width:970px; height:550px; top:0;}

/**********图片显示标签**************/

#tags{position:absolute; left:30px; bottom:20px;}

#tags img{display:inline-block; width:100px; height:61.8px; float:left; margin-right:10px; transition:1s; opacity:0.5;}

#tags img:hover{transform:scale(1.1); cursor:pointer;}

$(function(){

var same=0; //用于避免触碰到相同标签式是发生切换

var interval=5000; //图片切换时间(5秒)

var timer; //计时器

/*********显示和隐藏图片************/

$("#player img").hide();

$("#player img").eq(0).show();

$("#tags img").mouseover(function(){

var tags=$("#tags img").index(this);

if(same!=tags){

$("#player img").fadeOut();

$("#player img").eq(tags).fadeIn(500);

}

same=tags;

})

/*********自动播放图片***********/

function autoplay(){

same++;

if(same>=$("#tags img").length){

same=0;

}

$("#player img").fadeOut();

$("#player img").eq(same).fadeIn(500);

}

/**********播放图片切换**************/

function play(){

timer=setInterval(autoplay,interval);

}

/**********停止图片切换**************/

function stop(){

clearInterval(timer);

}

/*****鼠标悬浮或移出时播放或停止切换图片***/

$("#content").hover(function(){

stop();

},

function(){

play();

})

play();

})