使用jQuery实现旋转木马效果
程序员文章站
2022-05-27 16:01:54
...
/*该篇博文介绍一下旋转木马的做法,废话不多说,先来看看我们需要实现的效果*/
/*首先我们需要准备一个大盒子,包裹着一个ul和装有箭头的div,ul里准备5个li标签分别装着展示的图片
从图中看的效果,只显示三张图片,一张主图片,还有两张分别是上一页还有下一页的图片,
那么,从这里我们很容易能知道,图中所有的图片的样式都是固定的,那么我们可以用一个数组,数组里用对象存储这5张图片的css
属性,大概就是这样的属性:隐藏-小图-大图-小图-隐藏,我们现在index为2的第三张图片为大图属性,
这里以下一页为例子吧,点击下一页,只需要将数组里的最后一个对象属性删除,
再将刚删除的对应属性,添加回原来数组的最前面.那么此时,数组里第四个对象,就是大图属性的css属性,
换句话说,就是我们将数组里的对象属性换了位置,他记录着下一页每个图片的css属性,
那么我们只需要再次调用我们jQuery的animate属性就可以轻松完成需要实现的效果.*/
/*分析完思路,我们现在来确认需求,一步一步实现
需求1:我们刚进入网页的时候,图片会自己走到自己对应的位置
*这个简单,因为我们css样式已经记录了每个图片的位置,所以,我们只需要在交互之前调用一次animate方法即可
需求2:移入大盒子,显示上一页下一页箭头,移出消失
*这个简单,加移入移出事件即可,这里可以说下用jQuery的hover方法也不错
需求3:右箭头下一页,左箭头上一页
*还是以下一页为例吧,当我们点击下一页时,我们可以用数组的pop方法把最后一个元素删掉,把他得到的返回值,也就是刚删掉的元素
用unshift方法把他加到数组的第一个元素即可
*那么此时还有个问题,就是如果我们频繁的点击上一页下一页,那么效果可能不是很好,那么我们可以用一个变量记录一个布尔值
*当变量为true时,表示可以执行我们的动画效果,点击上一页或下一页时,将该变量变为false,阻止用户的多次点击,当动画
*播放结束时,利用animate的回调函数可以将布尔值赋值为true.
下面放出我们的代码,希望这篇博文能帮到你O(∩_∩)O...*/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>旋转轮播图效果</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="css/demo.css"/>
<script src="js/jquery-1.12.2.js"></script>
<script src="js/demo.js"></script>
</head>
<body>
<div class="wrap">
<div class="slide" id="slide">
<ul>
<li><img src="img/slidepic1.jpg" alt="" /></li>
<li><img src="img/slidepic2.jpg" alt="" /></li>
<li><img src="img/slidepic3.jpg" alt="" /></li>
<li><img src="img/slidepic4.jpg" alt="" /></li>
<li><img src="img/slidepic5.jpg" alt="" /></li>
</ul>
<div class="arrow">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>
</body>
</html>@charset "UTF-8";
/**
*
* @authors zengjiahao
* @date 2018-02-26
* @version 1.0
*/
/*初始化 reset*/
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
margin: 0;
padding: 0
}
body, button, input, select, textarea {
font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
color: #666;
}
ol, ul {
list-style: none
}
a {
text-decoration: none
}
fieldset, img {
border: 0;
vertical-align: top;
}
a, input, button, select, textarea {
outline: none;
}
a, button {
cursor: pointer;
}
.wrap {
width: 1200px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
}
.slide {
position: relative;
height: 500px;
}
.slide ul {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.slide li {
position: absolute;
width: 800px;
height: 500px;
left: 200px;
top: 0;
background-color: #6475ae;
}
.slide img {
width: 100%;
height: 100%;
}
.arrow {
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
display: none;
}
.arrow a {
position: absolute;
left: 100px;
top: 50%;
width: 76px;
height: 112px;
margin-top: -56px;
background: url(../img/prev.png) 0 0 no-repeat;
}
.arrow .next {
right: 100px;
left: auto;
background-image: url(../img/next.png);
}/**
* Created by zengjiahao on 2018/2/6.
*/
$(function(){
var pos = [
{
width:564,
height:330,
left:34,
top:0,
opacity:0,
z:2
},
{
width:564,
height:330,
left:34,
top:79,
opacity:0.8,
z:3
},
{
width:800,
height:500,
left:200,
top:0,
opacity:1,
z:4
},
{
width:564,
height:330,
left:605,
top:79,
opacity:0.8,
z:3
},
{
width:564,
height:330,
left:605,
top:0,
opacity:0,
z:2
}
];
// 1. 获得要操作的对象
var lis = $(".slide ul li");
var arrow = $(".arrow");
var flag = true;
// 2. 让每个li标签走到指定的位置
assign();
function assign(){
$.each(pos,function (index,ele){
// index是索引号 ele是数组中的对象
lis.eq(index).css("zIndex",ele.z).stop().animate(ele,500,function (){
flag = true;
});
});
}
// 3. 鼠标移入大盒子的时候，要显示左右按钮 ,离开大盒子，要隐藏左右按钮
$(".wrap").hover(function (){
arrow.fadeIn();
},function (){
arrow.fadeOut();
})
// 4. 给右侧按钮注册事件
$(".next").on("click",function (){
if(flag){
flag = false;
pos.unshift(pos.pop());
assign();
}
})
// 5. 给左侧按钮注册事件
$(".prev").on("click",function (){
if(flag){
flag = false;
pos.push(pos.shift());
// 数组现在是重新排列的了，再让li标签根据新的数组，重新生成自己的样式
assign();
}
})
})