Js 旋转木马 轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转木马</title>
<style>
ul{
list-style: none;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #000;
}
.wrap{
width: 1200px;
margin: 0 auto;
}
.slide{
width: 1200px;
height: 500px;
/*background: pink;*/
position: relative;
}
.slide ul li{
position: absolute;
}
.slide ul li img{
width: 100%;
height: 100%;
}
.arrow a{
position: absolute;
text-align: center;
line-height: 76px;
top: 50%;
height: 76px;
width: 112px;
margin-top: -56px;
font-size: 40px;
font-weight: bold;
z-index: 100;
background: rgba(0,0,0,0.5);
color: #fff;
display: none;
}
.arrow a.pre{
left: 0;
}
.arrow a.next{
right: 0;
} </style>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body> <div class="wrap">
<div class="slide">
<ul>
<li><img src="imgs/1.jpg" alt=""></li>
<li><img src="imgs/2.jpg" alt=""></li>
<li><img src="imgs/3.jpg" alt=""></li>
<li><img src="imgs/4.jpg" alt=""></li>
<li><img src="imgs/5.jpg" alt=""></li>
</ul>
<div class="arrow">
<a href="javascript:;" class="pre"><</a>
<a href="javascript:;" class="next">></a>
</div>
</div>
</div> <script> $(function(){
/*避免多次点击出现bug，只能在点击后动画完后才能再点击*/
var status=true;
var timer=null;
/*核心,把会变化的值存起来，然后动态循环这些值，然后添加到对应索引值的li标签里*/
var json=[{
width:400,
height:200,
top:20,
left:50,
opacity:0.2,
z:2
},{
width:600,
height:300,
top:70,
left:0,
opacity:0.8,
z:3
},{
width:800,
height:400,
top:0,
left:200,
opacity:1,
z:4
},{
width:600,
height:300,
top:70,
left:600,
opacity:0.8,
z:3
},{
width:400,
height:200,
top:20,
left:800,
opacity:0.2,
z:2
}];
move();
clearInterval(timer);
timer=setInterval(function(){
move(true);
},2000);
$(".slide").hover(function(){
/*为什么添加stop()，为了多次触发不断触发BUG，所以每次触发前都
*把之前的动画停止掉
*/
$(".arrow a").stop().fadeIn();
clearInterval(timer);
},function(){
$(".arrow a").stop().fadeOut();
timer=setInterval(function(){
move(true);
},2000);
})
$(".arrow .pre").on("click",function(){
if(status){
status=false;
move(true)
}
});
$(".arrow .next").on("click",function(){
if(status){
status=false;
move(false)
}
}); function move(offOn){
/*一开始调用时没有传值，但会走动一下，所以要判断没传值时，不走if语句里的内容*/
if(offOn!=undefined){
if(offOn){
/*使用数组删除会返回删除值，而它是删除最后一个，所以就是
*返回最后一个值
，然后数组的前追加*/
json.unshift(json.pop());
}else{
/*这个同样原理，只是它是数组的后追加，把数组的第一个追加到最后*/
json.push(json.shift());
}
}
$.each(json,function(i,v){
/*历遍json，添加到对应索引的li标签，使用animate实现动画效果*/
$(".slide ul li").eq(i).css("z-index",v.z).stop().animate({"width":v.width,"opacity":v.opacity,"left":v.left,"top":v.top,"height":v.height},500,function(){
/*这里就是动画完后执行的回调函数*/
status=true;
});
})
}
}) </script>
</body>
</html>
Js 旋转木马 轮播的更多相关文章
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- js实现轮播图动画
在网页浏览中,可以看到轮播图是无处不在的,这是一个前端工程最基本的技巧.首先看看几个网页的呈现的效果. QQ音乐: 网易云音乐: 天猫: 接下来将从简到难总结几种实现轮播图的方法. 1.样式一:鼠标滑 ...
- js编写轮播图，广告弹框
1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...
- js原生轮播
js原生轮播 今天用js做了轮播图,做的不怎么好,希望大家能够看懂. 效果: 1.鼠标放在轮播图上自动停止 2.鼠标离开轮播图自动播放 3.鼠标点击轮播图上的小圆点跳转到相应的图上. 代码: < ...
- js实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
随机推荐
- caller和callee
我们先来看下caller. caller:返回一个对函数(该函数调用了当前函数)的引用. functionName.caller:functionName对象是所执行函数的名称. 说明 对于函数来说, ...
- [转]Informatica vs SSIS
转自 http://blog.csdn.net/thy822/article/details/8489779 这篇文章, 我不能同意更多, 所以转在这里. Here is my thinking af ...
- oracle数据库表空间扩容方法
1. 先查询表空间在物理磁盘上存放的位置,注意使用sysdba的账号登陆. SELECT tablespace_name, file_id, file_name, ), ) total_space F ...
- C#面向对象思想计算两点之间距离
题目为计算两点之间距离. 面向过程的思维方式,两点的横坐标之差,纵坐标之差,平方求和,再开跟,得到两点之间距离. using System; using System.Collections.Gene ...
- Mean Shift Tracking: 2000-2012回顾 (新论文更新)
参考: Mean Shift Tracking: 2000-2012回顾 (新论文更新) ECCV2016要来了,估计深度学习要一统天下了吧
- sublime text3 package control 安装
1.安装 package control 按快捷键ctrl+` 或使用菜单 View->Show Console 打开控制台,然后粘贴如下安装代码 import urllib.request,o ...
- div 加滚动条
div 加滚动条的方法: <div style="position:absolute; height:400px; overflow:auto"></div> ...
- 2016年11月3日--Window.document对象
五.相关元素操作: var a = document.getElementById("id");找到a: var b = a.nextSibling,找a的下一个同辈元素,注意包含 ...
- UML统一建模编程
PowerDesigner 可以通过类图直接可视化生成代码 UML模型元素: 表示模型中的某个概念(类.对象.用例.结点.组件.包.接口等等): 表示模型间相互连接的关系(关联.泛化.依赖.聚集).
- MySQL Errcode 13 with SELECT INTO OUTFILE Can't create/write to file
这是由于权限问题导致的,最主要的问题是搞清楚权限是如何设置的.Ubuntu 使用 AppArmor 作为程序权限限制, Fedora 使用 selinux 作为程序权限限制. 在linux中,以往的权 ...