<!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. nginx-->基本使用

    Nginx基本使用   一.下载 http://nginx.org/en/download.html 二.解压文件 在当前文件夹下通过终端就可以操作nginx nginx -v 三.配置详解 #use ...

  2. python3.5+django2.0快速入门(二)

    昨天写了python3.5+django2.0快速入门(一)今天将讲解配置数据库,创建模型,还有admin的后台管理. 配置数据库 我们打开mysite/mysite/settings.py这个文件. ...

  3. [Markdown] 01 简单应用 第一弹

    目录 0. "调用函数前必先声明" 0.1 Table of Content 0.2 分割线 0.3 引用 0.4 标记 0.5 关于 html 0.6 代码块 用法 1 用法 2 ...

  4. 防止 iframe 的链接重定向父级页面

    项目中发现,多系统通过iframe嵌套时,如果iframe的请求是重定向会导致父级页面重定向,怎么破? 查找MDN(https://developer.mozilla.org/zh-CN/docs), ...

  5. Thinkphp 获取最大值id值

    有时候项目需要获取数据库最大的id值,比如生成订单,做排序号,那么Thinkphp 如何获取最大值id值. $info=D('Customer')->where('1=1')->order ...

  6. Angular ngTemplateOutlet

    虽然我们可以通过使用 ViewContainerRef 将 ElementRef创建的视图插入指定的位置,但是仍然希望有某中快捷的方式帮我们实现. ngTemplateOutlet与ngCompone ...

  7. MVC 与 MVP 并无两样

    关于 MVC 的定义介绍,摘一段百度百科介绍: MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式: Model(模型)表示应 ...

  8. VINS 估计器之外参初始化

    为何初始化外参 当外参完全不知道的时候,VINS也可以在线对其进行估计(rotation),先在processImage内进行初步估计,然后在后续优化时,会在optimize函数中再次优化. 如何初始 ...

  9. ES6——面向对象应用

    面向对象应用——React 特点:     1.组件化(模块化) --- class(一个组件就是一个class)     2.强依赖与JSX (JSX==babel==browser.js  是JS ...

  10. Vue简单封装axios—解决post请求后端接收不到参数问题

    1.在src/下新建api文件夹,api/下新建index.js和public.js 在public.js中: import axios from 'axios'; import qs from 'q ...