旋转木马（jQuery实现）

最新推荐文章于 2022-03-29 09:44:39 发布

diliedou4174

最新推荐文章于 2022-03-29 09:44:39 发布

阅读量403

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sunqq/p/7600543.html

版权

HTML页面

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css"/>

<script src="js/jquery-1.11.1.js"></script>
<script src="js/index.js"></script>
</head>
<body>

</body>
</html>

CSS内容

@charset "UTF-8";
/*初始化 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:10px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.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: 99;
}
.next{
right:0;
background-image: url(../images/next.png);
}

JS中index.js内容

jQuery(function () {
//旋转木马的逻辑包
//旋转木马思路：点击左侧或者右侧按钮，移动样式或者移动li标签的位置;
var arrOfJson = [
{ // 1
width:400,
top:70,
left:50,
opacity:0.2,
"z-index":2
},
{ // 2
width:600,
top:120,
left:0,
opacity:0.8,
"z-index":3
},
{ // 3
width:800,
top:100,
left:200,
opacity:1,
"z-index":4
},
{ // 4
width:600,
top:120,
left:600,
opacity:0.8,
"z-index":3
},
{ //5
width:400,
top:70,
left:750,
opacity:0.2,
"z-index":2
}
];

//需求1：页面加载的时候所有li标签按照arrOfJson中的样式滑动过去;
//鼠标进入显示左右按钮，移开隐藏;（用opacity控制）
//需求2：点击右侧按钮，删除数组中的第一个，添加到最末尾;
//需求3：点击左侧按钮，逻辑相反;

//需求1：页面加载的时候所有li标签按照arrOfJson中的样式滑动过去;
//鼠标进入显示左右按钮，移开隐藏;（用opacity控制）
$("#slide li").each(function (index,ele) {
//ele是DOM元素;
$(ele).css("z-index",arrOfJson[index]["z-index"]);
});
$("#slide li").each(function (index,ele) {
//ele是DOM元素;
$(ele).animate(arrOfJson[index],400);
})

$("#slide").mouseenter(function () {
$("#arrow").animate({"opacity":1});
})
$("#slide").mouseleave(function () {
$("#arrow").animate({"opacity":0});
})
//需求2：点击右侧按钮，删除数组中的第一个，添加到最末尾;
$(".next").on("click", function () {
//删除数组中的第一个，添加到最末尾;
var first = arrOfJson.shift();
arrOfJson.push(first);
//安装新数组在加载一次;
$("#slide li").each(function (index,ele) {
//ele是DOM元素;
$(ele).css("z-index",arrOfJson[index]["z-index"]);
});
$("#slide li").each(function (index,ele) {
//ele是DOM元素;
$(ele).stop().animate(arrOfJson[index],400);
})
});
//需求3：点击左侧按钮，逻辑相反;
$(".prev").on("click", function () {
//删除数组中的最后一个，添加到最前面;
var last = arrOfJson.pop();
arrOfJson.unshift(last);
//安装新数组在加载一次;
$("#slide li").each(function (index,ele) {
//ele是DOM元素;
$(ele).css("z-index",arrOfJson[index]["z-index"]);
});
$("#slide li").each(function (index,ele) {
//ele是DOM元素;
$(ele).stop().animate(arrOfJson[index],400);
})
});
})

转载于:https://www.cnblogs.com/sunqq/p/7600543.html

diliedou4174

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旋转木马（jQuery实现）

HTML页面<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css/css.css"/> <!...
复制链接

扫一扫