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 ...
随机推荐
- JMeter学习笔记16-如何输出HTML格式的性能测试报告
文本来学习下,如何输入HTML格式的JMeter测试报告.前面已经介绍, 如果要做性能测试,需要在GUI上设计好你的Test Plan,设置各种场景和负载值,包括多少个线程,多少个用户,循环多少次.设 ...
- 多线程07-Monitor.TryEnter
); Console.WriteLine())) { Console.WriteLine ...
- [Git] 007 三棵树以及向本地仓库加入第一个文件
1. "三棵树" 1.1 前言 理论上要稍稍复杂一点 我在这里说得简化一点 顺道挖个坑 下回具体介绍 坑号编码:Git07-1 1.2 看图 1.3 简介 树左:工作区(平时写代码 ...
- MySql-8.0.16版本部分安装问题修正
本帖参考网站<https://blog.csdn.net/lx318/article/details/82686925>的安装步骤,并对8.0.16版本的部分安装问题进行修正 在MySQL ...
- [2019杭电多校第六场][hdu6638]Snowy Smile(维护区间最大子段和)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6638 题意为在一个平面上任意选择一个长方形,使得长方形内点权和最大. 因为长方形可以任意选择,所以上下 ...
- [BZOJ4358]Permu(回滚莫队)
[BZOJ4358]Permu(回滚莫队) 题面 给出一个长度为n的排列P(P1,P2,...Pn),以及m个询问.每次询问某个区间[l,r]中,最长的值域连续段长度. 分析 最简单的方法显然是用线段 ...
- 让网站动起来！12款优秀的 jQuery 动画
Textillate.js 介绍:Textillate.js 是一个简单的 CSS3 文本动画插件.结合了一些非常棒的库,把 CSS3 动画轻松应用到任何文本.只需要在项目中简单地引入 textill ...
- IDEA中Java目录结构
IDEA中Java的目录结构 1.首先新建Project,选择Empty,新建空的项目 2.选择Module时候,需要选择JDK,JDK只需要选择到Java Home目录就可以了 3.创建好Modul ...
- jQuery淡入淡出瀑布流效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Linux常用指令全集
Linux简介及Ubuntu安装 常见指令 系统管理命令 打包压缩相关命令 关机/重启机器 Linux管道 Linux软件包管理 vim使用 用户及用户组管理 文件权限管理 大牛笔记-www.weix ...