【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果：
实现原理：
- 技术栈:
javascript+jQuery+html+css
- 实现步骤：
// 0. 获取元素
// 1. 鼠标放置到轮播图上，显示两侧的控制按钮，移开后隐藏
// 2. 为两侧控制按钮绑定事件（调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转）
实现代码：
<!DOCTYPE html>
<html>
<head>
<title>旋转木马效果轮播图</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
font: 12px/1.5 "微软雅黑";
background-color: #2f2f2f;
}
a{
text-decoration: none;
outline: none;
cursor: pointer;
}
.warp{
width: 1000px;
margin: 10px auto;
border: 1px solid red;
}
.slide{
height: 200px;
margin: 150px auto;
position: relative;
}
.slide li{
position: absolute;
left: 200px;
top: 0;
}
.slide li img{
width: 100%;
border: 0;
vertical-align: top;
}
ul{
list-style: none;
}
.arrow{
opacity: 0;
}
.prev, .next{
width: 76px;
height: 112px;
position: absolute;
top: 50%;
margin-top: -56px;
background: url('images/prev.png') no-repeat;
z-index: 999;
}
.next{
right: 0;
background-image: url('./images/next.png');
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<!-- 五张图片 -->
<li><a href="#"><img src="./images/01.jpg"></a></li>
<li><a href="#"><img src="./images/02.jpg"></a></li>
<li><a href="#"><img src="./images/03.jpg"></a></li>
<li><a href="#"><img src="./images/04.jpg"></a></li>
<li><a href="#"><img src="./images/05.jpg"></a></li>
</ul>
<!-- 左右切换按钮 -->
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>
<!-- 引入jQuery -->
<script src="jquery1.0.0.1.js"></script>
<script type="text/javascript">
window.onload = function(){
var arr = [
{ // 1
width:400,
top:0,
left:170,
opacity:20,
zIndex:2
},
{ // 2
width:600,
top:70,
left:80,
opacity:80,
zIndex:3
},
{ // 3
width:800,
top:50,
left:250,
opacity:100,
zIndex:4
},
{ // 4
width:600,
top:70,
left:600,
opacity:80,
zIndex:3
},
{ //5
width:400,
top:0,
left:720,
opacity:20,
zIndex:2
}
]; // 0. 获取元素
var slide = document.getElementById("slide");
var liArr = slide.getElementsByTagName("li");
var arrow = slide.children[1];
var arrowChildren = arrow.children; // 设置一个开闭变量，点击以后修改这个值
var flag = true; // 1. 鼠标放置到轮播图上，显示两侧的控制按钮，移开后隐藏
slide.onmouseenter = function(){
animate(arrow,{"opacity":100});
}
slide.onmouseleave = function(){
animate(arrow, {"opacity":0});
} move(); // 3. 为两侧控制按钮绑定事件（调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转）
arrowChildren[0].onclick = function(){
if(flag){
flag = false;
move(true);
}
}
arrowChildren[1].onclick = function(){
if(flag){
flag = false;
move(false);
}
} // 书写slider移动函数
function move(bool){
// 判断，如果等于undefined，那么不执行这两个if语句
if(bool === true || bool === false){
if(bool){
// 将最后一个添加到第一个位置
arr.unshift(arr.pop());
}
else{
// 将第一个添加到最后一个位置
arr.push(arr.shift());
}
}
// 再次为页面的所有li赋值属性，利用缓动框架
for(var i=0; i<liArr.length; i++){
animate(liArr[i], arr[i], function(){
flag = true;
});
}
}
}
</script>
</body>
</html>
【前端】javascript+jQuery实现旋转木马效果轮播图slider的更多相关文章
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
- 前端框架之jQuery（二）----轮播图,放大镜
事件 页面载入 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){}) -----------> ...
- 【前端】javascript实现带有子菜单和控件的轮播图slider
实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // ...
- 【jQuery】全功能轮播图的实现（本文结尾也有javascript版）
轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery实现todo及轮播图
内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...
- jquery实现漂亮的轮播图
今天工作中要用到一个轮播功能,在网上找了一些,觉得有些过于繁琐,于是自己动手写了一个,效果如图: 代码如下: <!DOCTYPE html> <html lang="en& ...
随机推荐
- 浏览器指纹 - HTTP cookie 浏览器指纹 欺诈检测 浏览器id hash 浏览器插件信息 canvas 字体信息
详解浏览器cookie和浏览隐私之间的关系http://www.iefans.net/cookie-yinsi-guanxi/ 详解浏览器cookie和浏览隐私之间的关系 浏览器相关 互联网 2013 ...
- find a way to escape--hdu1593
题目链接 : http://acm.hdu.edu.cn/showproblem.php?pid=1593 找到二者角速度相等时水中人的R,在此之前二者保持在一条直线上,之后水中的人沿直线到岸边S点匀 ...
- 解决VMware虚拟机的CentOS无法上网
1)点击 VM->Settings Hardware选项卡下面 2)点击Network Adapter 设置如下图所示,首先我们在虚拟机中将网络配置设置成NAT 在服务中开启: VMware D ...
- 【HTML5】HTML5的自学路线
HTML5的开发市场已越来越火爆,他已经与我们的生活息息相关,它也成为了我们生活中的一部分,比如我们在网上购物,玩手游等等,都存在html5的影子,也正是因为html5的高度影响力,吸引了许多人开始关 ...
- SeaJS 与 RequireJS 的差异对比
这篇文章主要介绍了SeaJS 与 RequireJS 的差异对比,本文主要对CMD规范和AMD规范的弊端做了对比,并做出了一个总结,需要的朋友可以参考下 “历史不是过去,历史正在上演.随着 W3C 等 ...
- R中基本函数学习[转载]
转自:https://www.douban.com/note/511740050/ 1.数据管理 numeric:数值型向量 logical:逻辑型向量 character:字符型向量list:列表 ...
- AngularJS 事件广播与接收 $emit $broadcast $on
AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...
- iOS UI基础-5.0 QQ框架（Storyboard）
1.拉入TabBarController和4个Navigation 2.TabBarController关联Navigation 3.设置消息,拉入一个Button,设置背影 4.联系人,拉入一个Se ...
- set的一些数学运算
python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交), difference(差)和 ...
- javascript利用jquery-1.7.1来判断是否是谷歌Chrome浏览器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...