【前端】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& ...
随机推荐
- PowerSploit: The Easiest Shell You'll Ever Get - Pentest Geek - Penetration Testing - Infosec Professionals
PowerSploit: The Easiest Shell You'll Ever Get - Pentest... Sometimes you just want ...
- physics---hdu5826（积分）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5826 题意:有n个小球在一条直线上滚动,起始位置为xi, 方向为di(-1往左走,1往右走),初始速度 ...
- linux环境下python的部署
linux系统环境自带python2.6,但有时我们项目使用的版本可能是3.x以上等等,此时我们需要在linux中再安装项目所需的python版本,此时就涉及多版本共存问题了,很多同学在安装多个版本P ...
- 前端 HTML body标签相关内容 常用标签 换行标签 br
换行标签 <br> <br>标签用来将内容换行,其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行. 在第一行中间加上br <!DOCTYPE ht ...
- Mysql技术内幕——InnoDB存储引擎
Mysql技术内幕——InnoDB存储引擎 http://jingyan.baidu.com/article/fedf07377c493f35ac89770c.html 一．mysql体系结构和存储引 ...
- mysql 数据库数据订正
mysql 数据库数据订正 http://blog.itpub.net/22664653/viewspace-717175/ 工作过程中时常遇到数据订正的需求,该操作本身不难.操作时要求能够保持回滚~ ...
- 【Cocos2dx 3.3 Lua】导出Cocos2dx API文档
一.Doxygen导出Cocos2dx html doc 1.1 打开Doxygen软件,选择 File-->Open打开Cocos2dx docs目录下的doxyge ...
- (转载)【cocos2dx 3.x Lua] 注册事件函数详解
出处: http://www.2cto.com/kf/201409/338235.html coocs2dx 版本 3.1.1 registerScriptTouchHandler 注册触屏事件 re ...
- smali注入常用代码
注入代码需要注意寄存器个数.1.插入log信息 const-string v2,"SN" invoke-static {v2,v0}, Landroid/util/Log;-> ...
- unity3d-射线(Ray)
射线Ray 射线是一个点向另外一个点发生的一条线,一旦与其他模型发生碰撞,他将停止发射.注意这条件是逻辑上的,界面上看不到. 一般使用射线判断是否发射至某个游戏对象上或者获得鼠标点击的游戏对象等. 用 ...