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> < ...
随机推荐
- Firemonkey Android IOS 图标
图标很多
- DAY13-前端之BOM和DOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- java多线程编程——同步器Exchanger
类java.util.concurrent.Exchanger提供了一个同步点,在这个同步点,一对线程可以交换数据.每个线程通过exchange()方法的入口提供数据给他的伙伴线程,并接收他的伙伴线程 ...
- MSSQL grant权限
--创建登录名 create login test_user with password='123456a.'; --创建用户 create user test_user for login test ...
- C++面向对象类的实例题目七
题目描述: 编写两个有意义的类,使一个类嵌套在另一个类中. 分析: 本题涉及两个类student和cdegree,前者为学生类,包含学生的学号(nubner),姓名(name)和成绩(degree), ...
- Python02 标准输入输出、数据类型、变量、随记数的生成、turtle模块详解
1 标准输出 python3利用 print() 来实现标准输出 def print(self, *args, sep=' ', end='\n', file=None): # known speci ...
- rest-framework组件 之 分页
分页 简单分页 from rest_framework.pagination import PageNumberPagination,LimitOffsetPagination class PNPag ...
- netty中的PoolChunk
数据结构学的烂,看这个类比较的吃力 PoolChunk主要使用long allocate(int normCapacity) 在buffer pool中分配buffer.这个类有几个重要的概念:pag ...
- Joda Time 使用
Joda Time 使用 对于系统的一些时间操作很是不方便,为了方便转化,有时候用date,有时候用timestmp,有时候用calendar,忍不住想更改了. 但是任务巨大,先把笔记收藏了,后面有机 ...
- 2014年第五届蓝桥杯省赛试题（JavaA组）
1.结果填空 (满分2分)2.结果填空 (满分6分)3.结果填空 (满分7分)4.代码填空 (满分4分)5.代码填空 (满分12分)6.结果填空 (满分12分)7.结果填空 (满分9分)8.程序设计( ...