<!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. elementUi--->实现上传图片效果（upload+formData）

    现在谈一下elelmentui中使用Upload 上传通过点击或者拖拽上传文件(图片) <el-upload name="multfile"    //上传的文件字段名 cl ...

  2. VC调试方法大全

    VC调试方法大全 一.调试基础 调试快捷键 F5:  开始调试 Shift+F5: 停止调试 F10:   调试到下一句,这里是单步跟踪 F11:   调试到下一句,跟进函数内部 Shift+F11: ...

  3. Windows 中下载 Android Q 源码

      1.  安装软件 1.1.  安装 git A.git官网下载:https://git-scm.com/downloads/ 安装git到如下路径 C:/Program Files/Git B.图 ...

  4. C# 判断文件夹与文件是否存在

    //在上传文件时经常要判断文件夹是否存在,如果存在就上传文件,否则新建文件夹再上传文件 判断语句为 if (System.IO.Directory.Exists(Server.MapPath(&quo ...

  5. MVC中easyui的easyui-combobox的使用

    一,如下代码,赋值 @{string json = ""; foreach (var dic in EnumCouponDic) //EnumCouponDic是一个字典类型Dic ...

  6. Spring、Spring MVC、Struts2、、优缺点整理（转）

    Spring 及其优点 大部分项目都少不了spring的身影,为什么大家对他如此青睐,而且对他的追捧丝毫没有减退之势呢 Spring是什么: Spring是一个轻量级的DI和AOP容器框架. 说它轻量 ...

  7. Solr的学习使用之（九）facet.pivot实战

    facet.pivot自己的理解,就是按照多个维度进行分组查询,以下是自己的实战代码,按照newsType,property两个维度统计: public List<ReportNewsTypeD ...

  8. Solr的学习使用之（七）Solr高级查询facet、facet.pivot简介

    以下转载自:http://hongweiyi.com/2013/03/apache-solr-facet-introduction/ 1.什么是Faceted Search Facet['fæsɪt] ...

  9. ReactiveObjC（RAC）的使用汇总

    RAC 指的就是 RactiveCocoa ,是 Github 的一个开源框架,能够帮我们提供大量方便的事件处理方案,让我们更简单粗暴地去处理事件,现在分为 ReactiveObjC 和 Reacti ...

  10. python面向对象的三大特征--封装

    #coding:utf-8 __author__="tang" #第一个层面的封装:类就是麻袋,本身就是一种封装 #第二个层面的封装:类中定义私有的,只在类的内部使用,外部无法访问 ...