js 多张爆炸效果轮播图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
a{text-align:center;}
img{vertical-align:middle;}
ul,ol{list-style:none;}
table{border-collapse:collapse}
input,select,button,textarea{outline:none;} #box{width:680px;height:460px;border:1px solid #333;margin:100px auto 0;position:relative;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
#box .img-wrap{width:100%;height:100%;}
#box .img-wrap a{display:block;width:100%;height:100%;perspective:500px;background:url(img/1.jpg) no-repeat center center;}
#box .img-wrap a div{float:left;}
#box .ol{height:30px;position:absolute;right:10px;bottom:10px;}
#box .ol li{width:30px;height:30px;margin-left:10px;float:left;background:#999;border-radius:50%;cursor:pointer;}
#box .ol .active{background:#f60;cursor:default;}
#box .prev,#box .next{width:40px;height:80px;background:rgba(0,0,0,0.7);position:absolute;top:50%;margin-top:-40px;border-radius:10px;text-align:center;line-height:80px;font:30px/80px "宋体";color:#fff;cursor:pointer;}
#box .prev{left:5px;}
#box .next{right:5px;}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oBox=document.getElementById('box');
var oImgWrap=oBox.getElementsByClassName('img-wrap')[0];
var aA=oImgWrap.getElementsByTagName('a')[0];
var aADiv=aA.getElementsByTagName('div');
var oOl=oBox.getElementsByClassName('ol')[0];
var oOlLi=oOl.getElementsByTagName('li');
var oPrev=oBox.getElementsByClassName('prev')[0];
var oNext=oBox.getElementsByClassName('next')[0];
var iOlLiLen=oOlLi.length;
var hrefArr=['#1','#2','#3','#4','#5'];//a标签的href
var imgArr=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];//图片url
var aAWid=aA.offsetWidth;//大图宽
var aAHei=aA.offsetHeight;//大图高
var smallWid=136;//小图宽
var smallHei=92;//小图高
var col=Math.ceil(aAWid/smallWid);//多少列
var row=Math.ceil(aAHei/smallHei);//多少行
var surplusWid=aAWid-smallWid*(col-1);//每一行最后一个的宽
var surplusHei=aAHei-smallHei*(row-1);//每一列最后一个的高
var iNow=iNow2=0;//当前图和点击后出现的图
var timer=0;//延时器
var timer2=0;//定时器
//初始化第一次数据
if(iNow!==0){
aA.href=hrefArr[iNow2];
aA.style.background='url('+imgArr[iNow2]+') no-repeat center center';
}
oOlLi[iNow2].className='active';
//将大图分割成若干个小图(创建若干个div)
var strDiv='';
for(var i=0;i<row;i++){
var newWid=smallWid;
var newHei=smallHei;
if(i==row-1)newHei=surplusHei;
for(var k=0;k<col;k++){
if(k==col-1)newWid=surplusWid;
strDiv+='<div style="width:'+newWid+'px;height:'+newHei+'px;background:url('+imgArr[iNow2]+') -'+k*smallWid+'px -'+i*smallHei+'px;"></div>';
}
}
aA.innerHTML=strDiv;
//转换主要函数
function lesgo(){
for(var i=0;i<aADiv.length;i++){
aADiv[i].style.backgroundImage='url('+imgArr[iNow]+')';
aADiv[i].style.transition=aADiv[i].style.OTransition=aADiv[i].style.MozTransition=aADiv[i].style.WebkitTransition='none';
aADiv[i].style.transform=aADiv[i].style.OTransform=aADiv[i].style.MozTransform=aADiv[i].style.WebkitTransform='none';
aADiv[i].style.opacity=1;
aADiv[i].style.visibility='visible';
}
oOlLi[iNow].className='';
oOlLi[iNow2].className='active';
aA.href=hrefArr[iNow2];
aA.style.backgroundImage='url('+imgArr[iNow2]+')';
clearTimeout(timer);
timer=setTimeout(function(){
for(var i=0;i<aADiv.length;i++){
aADiv[i].style.transition=aADiv[i].style.OTransition=aADiv[i].style.MozTransition=aADiv[i].style.WebkitTransition='transform 500ms,opacity 500ms,visibility 500ms';
aADiv[i].style.transform=aADiv[i].style.OTransform=aADiv[i].style.MozTransform=aADiv[i].style.WebkitTransform='translateZ(350px) rotate('+((Math.random()*2-1)*180)+'deg) rotateX('+((Math.random()*2-1)*180)+'deg) rotateY('+((Math.random()*2-1)*180)+'deg)';
aADiv[i].style.opacity=0;
aADiv[i].style.visibility='hidden';
}
},100);
iNow=iNow2;
}
//右下角按钮
for(var i=0;i<iOlLiLen;i++){
oOlLi[i].index=i;
oOlLi[i].addEventListener('click',function(){
iNow2=this.index;
if(iNow==iNow2)return;
lesgo();
},false);
}
//上一张按钮
oPrev.addEventListener('click',function(){
if(iOlLiLen==1)return;
if(iNow2==0){
iNow2=iOlLiLen-1;
}else{
iNow2--;
}
lesgo();
},false);
//下一张按钮
oNext.addEventListener('click',nextFn,false);
function nextFn(){
if(iOlLiLen==1)return;
if(iNow2==iOlLiLen-1){
iNow2=0;
}else{
iNow2++;
}
lesgo();
}
//自动播放
timer2=setInterval(nextFn,5000);
oBox.addEventListener('mouseenter',function(){
clearInterval(timer2);
},false);
oBox.addEventListener('mouseleave',function(){
timer2=setInterval(nextFn,5000);
},false);
},false);
</script>
</head>
<body style="overflow-x:hidden;height:1200px;">
<div id="box">
<div class="img-wrap">
<a href="#1"></a>
</div>
<ol class="ol">
<li><img src="img/1.jpg" style="display:none;"></li>
<li><img src="img/2.jpg" style="display:none;"></li>
<li><img src="img/3.jpg" style="display:none;"></li>
<li><img src="img/4.jpg" style="display:none;"></li>
<li><img src="img/5.jpg" style="display:none;"></li>
</ol>
<span class="prev"><</span>
<span class="next">></span>
</div>
</body>
</html>
js 多张爆炸效果轮播图的更多相关文章
- js代码跑马灯效果-----轮播图字效果！
文字元素: <p id="yc-msg">你有本事来打我呀!</p> js执行代码: function ycMsg() { // 获取 标签 var pOb ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
- js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- JS应用实例2：轮播图
在学习轮播图之前,要先会切换图片: 找三张图片,命名1.jpg,2.jpg,3.jpg 示例: <!DOCTYPE html> <html> <head> < ...
随机推荐
- java代码调用数据库存储过程
由于前边有写java代码调用数据库,感觉应该把java调用存储过程也写一下,所以笔者补充该篇! package testSpring; import java.sql.CallableStatemen ...
- Android 媒体编解码器(转)
媒体编解码器 MediaCodec类是用来为低级别的媒体编码和解码的媒体编解码器提供访问.您可以实例化一个MediaCodec类通过调用createEncoderByType()方法来进行对媒体文件进 ...
- hadoop-2.7.3.tar.gz + spark-2.0.2-bin-hadoop2.7.tgz + zeppelin-0.6.2-incubating-bin-all.tgz（master、slave1和slave2）（博主推荐）（图文详解）
不多说,直接上干货! 我这里,采取的是ubuntu 16.04系统,当然大家也可以在CentOS6.5里,这些都是小事 CentOS 6.5的安装详解 hadoop-2.6.0.tar.gz + sp ...
- centos 安装 python flask 和python3安装flask
pip install Flask python3安装 pip3 install flask
- BuilderPattern（23种设计模式之一）
设计模式六大原则(1):单一职责原则 设计模式六大原则(2):里氏替换原则 设计模式六大原则(3):依赖倒置原则 设计模式六大原则(4):接口隔离原则 设计模式六大原则(5):迪米特法则 设计模式六大 ...
- SimpleFactoryPattern（23种设计模式之一）
设计模式六大原则(1):单一职责原则 设计模式六大原则(2):里氏替换原则 设计模式六大原则(3):依赖倒置原则 设计模式六大原则(4):接口隔离原则 设计模式六大原则(5):迪米特法则 设计模式六大 ...
- GCD 学习(四) dispatch_group
如果想在dispatch_queue中所有的任务执行完成后在做某种操作,在串行队列中,可以把该操作放到最后一个任务执行完成后继续,但是在并行队列中怎么做呢.这就有dispatch_group 成组操作 ...
- Luogu 1445 樱花
BZOJ 2721 唔,太菜了弄不来. 先通分:得到 $\frac{x + y}{xy} = \frac{1}{n!}$ 两边乘一下 $(x + y)n! - xy = 0$ 两边加上$(n!)^2$ ...
- Excel课程学习第二课单元格格式设置
今天要讲的是单元格格式的设置,字体字号的设置,边框设置,合并单元格之类的. 下面看看具体的内容: 1.使用单元格格式工具美化表格 1.1设置单元格格式的对话框在哪里? 下图中三个小箭头都能打开设置单元 ...
- 缓存淘汰算法之LRU
1. LRU1.1. 原理 LRU(Least recently used,最近最少使用)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高”. ...