<!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>

css3爆炸轮播效果的更多相关文章

  1. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  2. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  3. CSS3实现轮播图效果

    CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...

  4. css3关键帧动画实现轮播效果

    实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...

  5. css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用

    <!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...

  6. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  7. 纯CSS3实现轮播图

    前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...

  8. jQuery实现轮播效果(一) - 基础

    前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...

  9. css3实现轮播图

    css3动画属性简写: animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode ...

随机推荐

  1. C++笔记（6）——关于OJ的单点测试和多点测试

    单点测试 PAT使用的就是单点测试(LeetCode应该也是单点测试).单点测试中系统会判断每组数据的输出结果是否正确,正确则通过测试并获得这则测试的分值.题目的总得分等于通过的数据的分值之和. 代码 ...

  2. lvs三种负载均衡模式

    lvs模式 lvs nat模式 地址转换 nat模式 地址转发 ,数据全部集中在lvs处理,lvs压力大 lvs ip-tun模式 ip隧道 与nat模式差不多,差别有了隧道封装,轮询调度给后端服务器 ...

  3. Spring源码解析-核心类之XmlBeanFactory 、DefaultListableBeanFactory

    DefaultListableBeanFactory XmlBeanFactory 继承自 DefaultListableBeanFactory , 而 DefaultListableBeanFact ...

  4. 使用SSI框架写的简单Demo（查询模块）

    在网上看到好多个版本,自己有时间索性就写个Demo记录下整个框架的逻辑流程: 1.首先拷贝整个框架所需要的jar包到WEB-INF/lib包下(这个网上都可以搜到的) 2.配置文件的配置, 2.1.在 ...

  5. PHP中的异常和错误（转载）

    博客好久没有更新了,实在惭愧,最近在忙人生大事,哈哈!这段时间没有看什么新的东西,结合项目中遇到的PHP异常处理问题,我又重新梳理了之前模糊的概念,希望对大家理解PHP异常处理有所帮助. 请一定要注意 ...

  6. git的基本使用方法

    git的基本使用方法:https://blog.csdn.net/qq_33316091/article/details/82414389

  7. 问题 B: 傻鸡抓大闸蟹

    问题 B: 傻鸡抓大闸蟹 时间限制: 1 Sec  内存限制: 128 MB提交: 94  解决: 39[提交] [状态] [命题人:jsu_admin] 题目描述 背景又到了吃大闸蟹的季节,黄老师想 ...

  8. 经典的最大流题POJ1273（网络流裸题）

    http://poj.org/problem?id=1273 Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Subm ...

  9. 2019-4-21-Roslyn-通过-NuGet-库修改应用程序入口函数

    title author date CreateTime categories Roslyn 通过 NuGet 库修改应用程序入口函数 lindexi 2019-4-21 17:37:1 +0800 ...

  10. kali优化配置（3）--工具箱

    1.netcat 收集信息.Telnet/banner.传输文本信息.连接服务器端口. *通过IP,连接服务器端口: *信息通信: *重定向符号:> (e.g:>>ps.txt:重定 ...