【前端】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& ...
随机推荐
- msc文件
MSC微软管理控制台(Microsoft Management Control)文件.可以点击开始/运行,然后输入下列文件名就可以打开相应的控制窗口. 除第三个文件外,其他均在C:\WINDOWS\s ...
- 数据库管理系统的ACID特性
数据库管理系统(DBMS)的事务都遵循着四种标准规格的约定.将这四种特性的首字母结合起来就统称为ACID特性.这些约定是所有DBMS都必须遵守的规则. 原子性 原子性是指在事务结束时,其中所包含的更新 ...
- flask中的信号量
一.在flask中自定义信号 from flask import Flask, current_app, flash, render_template from flask.signals impor ...
- 几种常用CSS3样式
在我们日常工作中,由于考虑到浏览器的兼容性,所以很少用CSS3样式.关于其标准,W3C 仍然在对 CSS3 规范进行开发.不过,现代浏览器已经实现了相当多的 CSS3 属性.最近学习了CSS3,发现功 ...
- 几种常见web攻击手段及其防御方式
XSS(跨站脚本攻击) CSRF(跨站请求伪造) SQL注入 DDOS web安全系列目录 总结几种常见web攻击手段极其防御方式 总结几种常见的安全算法 XSS 概念 全称是跨站脚本攻击(Cross ...
- Mirror--如何在主库上增加文件
由于各种原因,如磁盘不空不足,需要对主库增加数据库文件到其他磁盘上,而镜像服务器上没有对应盘符,很多人会选择删除镜像,重新完备还原来搭建镜像,这种方式耗时耗力. 在做此类操作时,需要对主服务器和镜像服 ...
- 【剑指offer】调整数组顺序使奇数位于偶数前面
一.题目: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 二.思路: 用 ...
- Debugging golang programs
https://ttboj.wordpress.com/2016/02/15/debugging-golang-programs/ I’ve been writing a lot of golang ...
- ssm后台开发及发布
本文详细讲解一下后台的创建及发布过程,包括踩过的坑 1:首先创建war包形式的maven工程 File>new>Maven project>Create a simple proje ...
- 实习培训——Servlet（6）
实习培训——Servlet(6) 1 Servlet 客户端 HTTP 请求 当浏览器请求网页时,它会向 Web 服务器发送特定信息,这些信息不能被直接读取,因为这些信息是作为 HTTP 请求的头的 ...