css3爆炸轮播效果

最新推荐文章于 2023-01-14 08:58:15 发布

weixin_30367543

最新推荐文章于 2023-01-14 08:58:15 发布

阅读量324

点赞数

原文链接：http://www.cnblogs.com/shangjun6/p/10826030.html

版权

<!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.οnclick=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.οnclick=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.οnmοuseοver=function(){
        clearInterval(o);
    }
    slid.οnmοuseοut=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].οnclick=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>

转载于:https://www.cnblogs.com/shangjun6/p/10826030.html

weixin_30367543

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3爆炸轮播效果

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>爆炸效果轮播</title> <style> *{ margin:0; padding:0; ...
复制链接

扫一扫