css3爆炸轮播效果
<!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爆炸轮播效果的更多相关文章
- 基于css3的轮播效果
花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- CSS3实现轮播图效果
CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...
- css3关键帧动画实现轮播效果
实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...
- css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用
<!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...
- 针对淡入淡出的定时轮播效果js
如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...
- 纯CSS3实现轮播图
前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...
- jQuery实现轮播效果(一) - 基础
前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...
- css3实现轮播图
css3动画属性简写: animation: name duration timing-function delay iteration-count direction fill-mode ...
随机推荐
- Linux命令整理 - 通用版
通用版 - 系统架构 /dev 设备文件夹 null 有去无回 mouse /sbin 系统管理必备程序 cfdisk.dhcpcd.dump.e2fsck.fdisk.halt.ifconfig.i ...
- java 历年版本特征(简化)
无论是学习任何新知识,我都是从历史的角度着手,这让我对这些新知识是如何孕育出来的,有一个很好的理解 只从java 5-8,之后我也开始转nodejs了,感谢java伴随的这几年 Java5的新特性 ...
- Hibernate的批量抓取
批量抓取理解:如果我们需要查找到客户的所有联系人的话,按照正常的思路,一般是首先查询所有的客户,得到返回的客户的List集合.然后遍历List集合,得到集合中的每一个客户,在取出客户中的联系人(客户表 ...
- Redis数据类型：Sorted Sets操作指令
Redis数据类型:Sorted Sets操作指令 Sorted Sets常用操作指令 Sorted Sets,本质是一个有序的Sets,其实在原来的Sets集合中对每一个元素新增了一个属性Score ...
- Maven依赖项Scope属性设置含义
Idea的File->Project Structure->左侧Modules: 选择自己的项目如图: 每个依赖项的Scope选项进行该jar包的相关操作设置,默认为compile,根据需 ...
- git多账号配置，同时使用多个代码托管平台
git多账号配置,同时使用多个代码托管平台:https://blog.csdn.net/pinnuli/article/details/81293071
- Mybatis-基本步骤
1.1Mybatis框架概述 Mybatis是基于Java的持久层框架,内部封装了jdbc,使开发者只需关注sql语句本身,而不需要花费精力去处理加载驱动.创建连接.创建Statement等繁杂的过程 ...
- Atman开发实习生的笔试题
坐标:山东 编程题(限时30分钟)如何判断一个字符串是否为合法的IP地址.要求:1. 不能使用正则表达式和自带的库函数.2. 列出全部测试用例,并给出原因.3. 把代码的后缀名改成txt后上传,不用压 ...
- 【Vue】通过自定义指令回顾 v-内置指令
Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式 ...
- 音频视频的播放的进度调整(以.net为例)
Background:对于音视频在线播放,一些小应用是靠nginx处理访问视频.音频文件的请求,对外应用的一般会托管至各种云上使用相关的服务.前者存在巨大的安全隐患,后者会有一定的成本.有的时候还是需 ...