仿京东轮播的广告展示栏

来源：互联网发布：mac 修改文件夹权限编辑：程序博客网时间：2024/05/04 03:17

大家都想自己的页面效果做得很炫，那么当然炫就要靠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)来实现自定义的动画效果

0 0