仿京东轮播的广告展示栏

最新推荐文章于 2022-07-26 15:12:47 发布

zzjmay

最新推荐文章于 2022-07-26 15:12:47 发布

阅读量1.8k

点赞数

文章标签： jQuery 图片预览图片轮播

本文链接：https://blog.csdn.net/zzjmay/article/details/22984635

版权

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