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> < ...
随机推荐
- jQuery的AJax异步加载
主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...
- sys模块 进度条百分比
用于提供对Python解释器相关的操作: sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit(0) ...
- 在异步回调中调用MessageBox.Show
public static void Test() { ThreadStart aThreadStart = delegate() { ); MessageBox.Show("Good!&q ...
- nodejs的POST请求
http://blog.csdn.net/puncha/article/details/9015317 Nodejs 发送HTTP POST请求实例 2013-06-03 17:55 71745人阅读 ...
- SQl Server 与数据库的第一次相遇
数据库就是 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,简单说就是存储在硬盘上的文件. 市面上常见数据库有<关系数据库系统>: ORACLE(甲骨文).DB2.S ...
- CMake 默认编译、链接选项
查看cmake默认编译和链接的参数设置 CMakeLists.txt 文件内容: cmake_minimum_required(VERSION 3.2) message(STATUS "CM ...
- sublime 配置 anaconda 环境
安装清单: 软件列表: anaconda sublime text sublime插件列表: package control Conda 安装 anaconda https://www.continu ...
- LeetCode第35题：搜索插入位置
题目描述: 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置. 你可以假设数组中无重复元素. 示例 1: 输入: [1,3,5,6 ...
- matlab任务：FCM分类
一个朋友让帮忙做图像分类,用FCM聚类算法,网上查了一下,FCM基本都是对一幅图像进行像素的分类,跟他说的任务不太一样,所要做的是将一个文件夹里的一千多幅图像进行分类.图像大概是这个样子的(是25*2 ...
- leetcode Jump Game I II 待续 贪心看不懂啊！！！！
下面是这两个题的解法: 参考博客:http://blog.csdn.net/loverooney/article/details/38455475 自己写的第一题(TLE): #include< ...