html js图片轮播包含背景音乐,QQ音乐轮播图.html

QQ音乐轮播图

body{

margin:0;

padding:0;

}

i{

font-style:normal;

}

.box{

width:100%;

height:300px;

margin-top:100px;

position: relative;

}

.box_change{

width:70px;

height:100px;

position: absolute;

top:110px;

background:rgba(0,0,0,0.3);

font:30px/100px '黑体';

color:#fff;

text-align: center;

transition:0.5s;

}

#prev{

left:0;

}

.box_change:hover{

background:green;

width:80px;

cursor: pointer;

}

#next{

right:0;

}

.box_center{

width:1200px;

height:300px;

margin:0 auto;

position: relative;

}

.box_center img{

width:600px;

height:300px;

background-repeat: no-repeat;

position: absolute;

top:0;

transition:0.5s;

}

.box_center img.one{

transform:translateX(300px);

z-index: 5;

}

.box_center img.two{

transform:translateX(600px) scale(0.8);

z-index: 4;

}

.box_center img.there{

transform:translateX(450px) scale(0.8);

z-index: 3;

}

.box_center img.four{

transform:translateX(150px) scale(0.8);

z-index: 1;

}

.box_center img.five{

transform:scale(0.8);

z-index: 2;

}

〉

〈

var next=document.getElementById("next");

var prev=document.getElementById("prev");

var obtain=document.getElementById("obtain");

var obtain_img=obtain.getElementsByTagName("img");

var classIndex=["one","two","there","four","five"];

next.οnmοuseup=X_next;

prev.οnmοuseup=X_prev;

function X_next(){

var a=classIndex.splice(0,1)

classIndex=classIndex.concat(a);

for(var i=0;i

obtain_img[i].className=classIndex[i];

}

}

function X_prev(){

var a=classIndex.splice(-1,1);

classIndex=a.concat(classIndex);

for(var i=0;i

obtain_img[i].className=classIndex[i];

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史