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 ...
随机推荐
- Console.Out 属性和 XmlDocument.Save 方法 (String)
Console.Out 属性 默认情况下,此属性设置为标准输出流. 此属性可以设置为另一个流SetOut方法. 请注意,调用Console.Out.WriteLine方法是等效于调用相应WriteLi ...
- VC调试方法大全
VC调试方法大全 一.调试基础 调试快捷键 F5: 开始调试 Shift+F5: 停止调试 F10: 调试到下一句,这里是单步跟踪 F11: 调试到下一句,跟进函数内部 Shift+F11: ...
- 解决：”ssh-keygen 不是内部或外部命令“ 的问题
相信大家在 码云生成/添加SSH公钥的过程中遇到一个比较常见的问题, 在cmd,命令行输入 ssh-keygen -t rsa -C "xxxxx@xxxxx.com" ; xxx ...
- Java实验报告（一）&&第三周学习总结
实验报告(一) 1. 打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个“水仙花数”. 源代码: public class Main { p ...
- VLAN 基础设置及Aceess接口
实验内容 本实验模拟企业网络场景.公司内网是一一个大的局域网,二层交换机S1放置在一楼,在一楼办公的部门有IT部和人事部;二层交换机S2放置在二楼,在二楼办公的部门有市场部和研发部.由于交换机组成的是 ...
- vps配置ipv6地址
1.修改配置文件 vim /etc/network/interfaces 2.添加以下内容 auto he-ipv6 iface he-ipv6 inet6 v4tunnel address 2001 ...
- JVM-堆内存
1. java堆内存介绍 java的堆内存可以类比于计算机的内存,是存储整个机器数据的地方. (1)jvm一起动就创建java堆.类比计算机一起动就加载内存. (2)所有的线程共享.类比计算机所有进程 ...
- 什么是http协议？？
一.http协议的定义: http(Hypertext transfer protocol)超文本传输协议,通过浏览器和服务器进行数据交互,进行超文本(文本.图片.视频等)传输的规定.也就是说,htt ...
- python 迭代器和生成器的区别
迭代器(iterator)是一个实现了迭代器协议的对象,python的一些内置数据类型(列表,数组,字符串,字典等)都可以通过for语句进行迭代,我们也可以自己创建一个容器,实现了迭代器协议,可以通过 ...
- python学习笔记(7)文件的访问与函数式编程
一.文件读写的3中方法 1.直接读入 fiel1=open('test.txt') file2=open('output.txt') while True: line=file1.readLine() ...