大家都想自己的页面效果做得很炫,那么当然炫就要靠jQuery啦,我今天向大家介绍的是怎么通过jquery实现,仿京东和淘宝上的动画轮播的效果,好废话不多说,上代码
首先是主页面的代码:包含两个列表,一个是图像列表,一个是文字导航列表,注意一定要图像列表在上,不然后面会出现移动时覆盖了文字导航列表的情况。
<!DOCTYPE html>
<html>
<head>
<title>jdad.html</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/indexAd.js"></script>
</head>
<body>
<div id="contentAd">
<div id="listImg">
<!-- 用来存放的是图片的列表 -->
<ul>
<li><img src="images/image01.jpg"> </li>
<li><img src="images/image02.jpg"> </li>
<li><img src="images/image03.jpg"> </li>
<li><img src="images/image04.jpg"> </li>
<li><img src="images/image05.jpg"> </li>
</ul>
</div>
<div id="listAd">
<!-- 用来存放列表菜单 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>
接下来我上css的代码:这里不赘述
@CHARSET "UTF-8";
*{
margin: 0px;
padding: 0px;
font-size: 12px;
}
#contentAd{
width: 670px;
position: relative;
}
#listAd {
position: absolute;
right:10px;
bottom:10px;
}
#listAd ul{
list-style: none;
}
#listAd ul li{
display:block;
float: left;
width: 20px;
background:#000000;
height: 20px;
text-align: center;
margin: 0px 5px 0px 5px;
color:white;
padding-top: 3px;
padding-left: 2px;
padding-right: 2px;
}
#listImg{
width: 670px;
height: 240px;
overflow: hidden;
position: relative;
}
#listImg ul{
list-style: none;
position: absolute;
}
#listImg ul li{
line-height: 0px;
}
最后当然也是最关键的,jquery代码,需要解释的地方我都写了备注,不懂得可以在我文章下评论哦
$(function() {
// 通过鼠标的进出实现变化
var autospeed = 2000;
// 获取焦点图的高度
var focusHeight = $("#listImg").height();
// // 获取焦点图的张数
var len = $("#listImg ul li").length;
// 设置初始的索引值
var index = 0;
// 设置时间器
var timer;
// 为小按钮增加滑入事件
$("#listAd ul li").css("opacity",0.4).mouseenter(function() {
// 获取当前索引值
index = $("#listAd ul li").index(this);
showImg(index);
}).eq(0).trigger("mouseenter");// 当页面加载完成时就触发第一个按钮工作
// 创建自动播放的函数,当鼠标滑到焦点图上停止播放
$("#listImg").hover(function() {
// 清理定时器
clearInterval(timer);
}, function() {
// 创建定时器
timer = setInterval(function() {
showImg(index);
index++;
if (index == len) {
index = 0;
}
}, autospeed);
}).trigger("mouseleave");// 当页面加载完成后,自动触发定时器
// 设置一个根据索引值播放的函数
function showImg(index) {
// 传入的参数是图片的索引值
// 计算当前的高度
var nowHight = -focusHeight * index;
// 根据当前高度计算出ul的平移的距离
// stop()停止当前所有当前动画
$("#listImg ul").stop(true, false).animate({
"top" : nowHight
}, 300);
// 同时根据index进行联动效果,改变其透明度
$("#listAd ul li").stop(true, false).animate({
"opacity" : "0.4"
}, 300).eq(index).stop(true, false).animate({
"opacity" : "1"
}, 300);// 只让当前选中的元素进行高亮显示
}
});
注意:我们一般使用animate(param,duration)来实现自定义的动画效果