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> < ...
随机推荐
- LNMP 1.3 测试php解析
测试解析LNMP的php解析 先打开nginx的配置文件 vim /usr/local/nginx/conf/nginx.conf location ~ \.php$ { root html; fas ...
- dp-矩阵连乘
参考:http://blog.csdn.net/liufeng_king/article/details/8497607 使用备忘录算法复杂度降至O(n^3) #include<stdio.h& ...
- git 删除本地分支和远程分支
(1)使用命令git branch -a 查看所有分支 其中,remote/origin/master表示的是远程分支 (2)删除远程分支 使用命令 git push origin --delete ...
- 在PyCharm 软件中设置你的项目 使用的Python版本
在PyCharm 软件中设置你的项目 使用的Python版本 python2 和 python3 有很大的不同,使用python2 编写的程序,如果使用python3 就运行不了:使用python3编 ...
- Linux共享对象之编译参数 -fPIC
转载自:https://www.cnblogs.com/cswuyg/p/3830703.html 在Linux系统中,动态链接文件称为动态共享对象(DSO,Dynamic Shared Ob ...
- 打印sql语句
root->trace hibernate->trace ,然后,改配置 全文搜索:show_sql,将所有的show_sql改为true. 这样,就会显示sql语句了.
- Socket编程--TCP粘包问题
TCP是个流协议,它存在粘包问题 产生粘包的原因是: TCP所传输的报文段有MSS的限制,如果套接字缓冲区的大小大于MSS,也会导致消息的分割发送. 由于链路层最大发送单元MTU,在IP层会进行数据的 ...
- ASP.NET常用数据绑定控件优劣总结
本文的初衷在于对Asp.net常用数据绑定控件进行一个概览性的总结,主要分析各种数据绑定控件各自的优缺点,以便在实际的开发中选用合适的控件进行数据绑定,以提高开发效率. 因为这些数据绑定控件大部分都已 ...
- Javascript的对象分类
返回索引 按W3CSchool分类 1.JS内置对象 在W3CShool中对应JavaScript对象 参考
- Linux计划任务 定时任务 Crond 配置详解 crond计划任务调试 sh -x 详解 JAVA脚本环境变量定义
一.Crond 是什么?(概述) crontab 是一款linux系统中的定时任务软件用于实现无人值守或后台定期执行及循环执行任务的脚本程序,在企业中使用的非常广泛. 现在开始学习linux计 ...