<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>爆炸效果轮播</title>
<style>
*{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
.slid{
width:300px;
height:200px;
margin:200px auto;
position:relative;
-webkit-perspective:1500px;
transform-style:preserve-3d;
}
.slid .box{
width:300px;
height:200px;
}
.slid .box div{
width:300px;
height:200px;
position:absolute;
display:none;
}
.slid .box div:nth-of-type(1){
display:block;
}
.slid .box div img{
width:300px;
height:200px;
}
.slid #btn1{
width:20px;
height:20px;
position:absolute;
top:50%;
left:0px;
margin-top:-10px;
background: #5cff31;
border:none;
outline:none;
}
.slid #btn2{
width: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{
width:20px;
height:20px;
border-radius: 50%;
background:red;
float:left;
margin-left:20px;
}
.slid .list li:nth-of-type(1){
background:green;
}
.slid #ani{
width:300px;
height:200px;
transition:all 0.6s linear;
-webkit-transition:all 0.6s linear;
}
.slid #ani div{
width: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>
相关推荐
python开发_常用的python模块及安装方法
adodb：我们领导推荐的数据库连接组件bsddb3：BerkeleyDB的连接组件Cheetah-1.0：我比较喜欢这个版本的cheeta…
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接：http://www.codeforces.com/contest/660/problem/CDes…
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式，并且由于涉及到要把拍到的照片显…
