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> < ...
随机推荐
- eclipse中的TODO和FIXME
最近使用eclipse开发代码时,公司要求按他们制定代码规范编写代码,其他都还好,因为基本都养成良好习惯了,但TODO和FIXME就有点陌生,查了一下资料,发现笔者寡闻了,果然学海无涯,好了,下边解释 ...
- DAY19-Django之form组件补充
问题1:注册页面输入为空,报错:keyError:找不到password def clean(self): print("---" ,self.cleaned_data) # if ...
- 【总结整理】openlayer
实时路况 http://www.cnblogs.com/gisvip/archive/2012/11/24/2787141.html
- js转化与排序
1.对象转化为数组 object.keys() var obj={a:3,b:7,c:8,d:false} alert(Object.keys(obj)) 注意此函数会把对象的key转化为数组 spl ...
- Python01 python入门介绍
1 python简介 1.1 为什么学python python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van ...
- jquery easyui datagrid/table 右边线显示不全
<table id="dg" style="height:400px"></table> 右边线显示不全 解决:在外面套一个panel, ...
- opencv3更换图片背景
#include <opencv2/opencv.hpp>#include <iostream> using namespace std;using namespace cv; ...
- Matlab 摄像机标定+畸变校正
博客转载自:http://blog.csdn.net/Loser__Wang/article/details/51811347 本文目的在于记录如何使用MATLAB做摄像机标定,并通过opencv进行 ...
- c++正确处理 is-a has-a关系
比如.我们想实现一个Set类,而已经有一个List类可提供给你使用,我们到底用is-a(public继承)关系还是用has-a(组合)关系呢? 1:如果使用is-a关系,则 class Set:pub ...
- python使用基础（win10）
1.安装 官网下载:https://www.python.org/ 请选择2.X版本 2.从命令提示符打开python 直接输入python点enter即可 查看python版本输入python -V ...