<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>爆炸效果轮播</title>
<style>
*{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
.slid{
300px;
height:200px;
margin:200px auto;
position:relative;
-webkit-perspective:1500px;
transform-style:preserve-3d;
}
.slid .box{
300px;
height:200px;
}
.slid .box div{
300px;
height:200px;
position:absolute;
display:none;
}
.slid .box div:nth-of-type(1){
display:block;
}
.slid .box div img{
300px;
height:200px;
}
.slid #btn1{
20px;
height:20px;
position:absolute;
top:50%;
left:0px;
margin-top:-10px;
background: #5cff31;
border:none;
outline:none;
}
.slid #btn2{
20px;
height:20px;
position:absolute;
top:50%;
right:0px;
margin-top:-10px;
background: #5cff31;
border:none;
outline:none;
}
.slid .list{
position:absolute;
bottom:20px;
left:50px;
}
.slid .list li{
20px;
height:20px;
border-radius: 50%;
background:red;
float:left;
margin-left:20px;
}
.slid .list li:nth-of-type(1){
background:green;
}
.slid #ani{
300px;
height:200px;
transition:all 0.6s linear;
-webkit-transition:all 0.6s linear;
}
.slid #ani div{
20px;
height:20px;
position:absolute;
transition:all 0.6s linear;
-webkit-transition:all 0.6s linear;
}
</style>
</head>
<body>
<div class="slid" id="slid">
<div class="box">
<div>
<img src="1.jpg" alt="">
</div>
<div>
<img src="6.jpg" alt="">
</div>
<div>
<img src="7.jpg" alt="">
</div>
<div>
<img src="8.jpg" alt="">
</div>
</div>
<button id="btn1"></button>
<button id="btn2"></button>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="ani">
<!--存放爆炸图的区域-->
</div>
</div>
</body>
</html>
<script>
var ani=document.getElementById("ani")
//爆炸的函数
function zha(a,b){
for(var i=0;i<15;i++){
for(var j=0;j<10;j++){
var div=document.createElement("div");
div.style.left=i*20+"px";
div.style.top=j*20+"px";
div.className="xi";
div.style.background="url("+b+") no-repeat";
div.style.backgroundSize="300px 200px";
div.style.backgroundPosition=(-i*20)+"px "+(-j*20)+"px";
a.appendChild(div);
}
}
var divs=ani.getElementsByTagName("div");
var t=setTimeout(function(){
for(var i=0;i<divs.length;i++){
divs[i].style.webkitTransform="rotateZ("+Math.random()*180+"deg) translateZ(1600px)";
divs[i].style.opacity=0;
}
},30)
}
function fx(){
var t=setTimeout(function(){
ani.innerHTML="";
},500)
}
//点击事件
var btn2=document.getElementById("btn2");
var divs=document.getElementsByClassName("box")[0].getElementsByTagName("div");
var lis=document.getElementsByClassName("list")[0].getElementsByTagName("li");
var num=0;
btn2.onclick=function(){
num++;
if(num>divs.length-1){
num=0;
}
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
lis[i].style.background="red";
}
divs[num].style.display="block";
lis[num].style.background="green";
var es=divs[num].getElementsByTagName("img")[0];
zha(ani,es.src);
fx();
}
var btn1=document.getElementById("btn1");
btn1.onclick=function(){
num--;
if(num<0){
num=divs.length-1;
}
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
lis[i].style.background="red";
}
divs[num].style.display="block";
lis[num].style.background="green";
var es=divs[num].getElementsByTagName("img")[0];
zha(ani,es.src);
fx();
}
//自动轮播
var o=setInterval(function(){
num++;
if(num>divs.length-1){
num=0;
}
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
lis[i].style.background="red";
}
divs[num].style.display="block";
lis[num].style.background="green";
var es=divs[num].getElementsByTagName("img")[0];
zha(ani,es.src);
fx();
},1000)
var slid=document.getElementById("slid");
slid.onmouseover=function(){
clearInterval(o);
}
slid.onmouseout=function(){
clearInterval(o);
o=setInterval(function(){
num++;
if(num>divs.length-1){
num=0;
}
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
lis[i].style.background="red";
}
divs[num].style.display="block";
lis[num].style.background="green";
var es=divs[num].getElementsByTagName("img")[0];
zha(ani,es.src);
fx();
},1000)
}
//点击事件
for(var u=0;u<lis.length;u++){
lis[u].index=u;
lis[u].onclick=function(){
for(var m=0;m<lis.length;m++){
divs[m].style.display="none";
lis[m].style.background="red";
}
this.style.background="green";
divs[this.index].style.display="block";
var es=divs[num].getElementsByTagName("img")[0];
zha(ani,es.src);
fx();
num=this.index;
}
}
</script>