<!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. 【Unity Shader】---Alpha Blending的意义

    Alpha Blending 即Alpha混合 Blending 就是处理透明度的,处理光栅化最后阶段,显示在屏幕上的颜色 1 Blend Off 关闭alpha混合 2 混合公式:Blend Src ...

  2. El 表达式和 Jstl 标签库

    El 表达式学习 1. 什么是 EL 表达式 全称:Expression Language,一种写法非常简介的表达式.语法简单易懂,便于使用.表达式语言的灵感来自于 ECMAScript 和XPath ...

  3. Java 类在 Tomcat 中是如何加载的？

    作者 :xingoo https://www.cnblogs.com/xing901022/p/4574961.html 说到本篇的Tomcat类加载机制,不得不说翻译学习Tomcat的初衷. 之前实 ...

  4. HDU 6631 line symmetric（枚举）

    首先能想到的是至少有一对相邻点或者中间间隔一个点的点对满足轴对称,那么接下来只需要枚举剩下的点对是否满足至多移动一个点可以满足要求. 第一种情况,对于所有点对都满足要求,那么Yes. 第二种情况,有一 ...

  5. shutdown的几种方法和利弊

    1.shutdown normal      正常方式关闭数据库. 2.shutdown immediate      立即方式关闭数据库.      在SVRMGRL中执行shutdown imme ...

  6. HNUSTOJ-1696 简单验证码识别(模拟)

    1696: 简单验证码识别 时间限制: 2 Sec  内存限制: 128 MB 提交: 148  解决: 44 [提交][状态][讨论版] 题目描述 验证码是Web系统中一种防止暴力破解的重要手段.其 ...

  7. Mysql共享锁、排他锁、悲观锁、乐观锁

    一.相关名词 |--表级锁(锁定整个表) |--页级锁(锁定一页) |--行级锁(锁定一行) |--共享锁(S锁,MyISAM 叫做读锁) |--排他锁(X锁,MyISAM 叫做写锁) |--间隙锁( ...

  8. IDEA错误: 找不到或无法加载主类 com.xxx.freight.dofreight.doFreight解决办法

    1.右键点击工程,选择open Module Settings或点击File选择Project Structure,进入页面 2.选择Artifacts->JAR->From module ...

  9. Neo4j : 通过节点的 id属性 对节点进行查，改，删操作

    1. "查"操作 , 查找 id 属性 为 501的节点: MATCH (r) WHERE id(r) = 501 RETURN r 2. "改"操作, 更改 ...

  10. 模块学习笔记-IR2110/IR2130（上）

    引言 IR2110 / IR2113是高压,高速功率MOSFET和IGBT驱动器,具有独立的高端和低端参考输出通道.逻辑输入与标准CMOS或LSTTL输出兼容,低至3.3V逻辑.浮动通道可用于驱动高端 ...