广告定时滚动，点标签跳转

最新推荐文章于 2020-02-04 14:48:08 发布

guwen1991

最新推荐文章于 2020-02-04 14:48:08 发布

阅读量547

点赞数

本文链接：https://blog.csdn.net/oGuWen1/article/details/12716757

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery.min.js"></script>
<script>
/*首页广告效果*/
$(function(){
     var len  = $(".num > li").length;
	 var index = 0;
	 var adTimer;
	 $(".num li").mouseover(function(){	  
		index  =   $(".num li").index(this);		
		showImg(index);
	 }).eq(0).mouseover();	
	 //滑入 停止动画，滑出开始动画.
	 $('.slider').hover(function(){
		 clearInterval(adTimer);
		 },function(){
			 adTimer = setInterval(function(){
			    showImg(index);
				index++;
				if(index==len){index=0;}
			  } , 1000);
	 }).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片
function showImg(index){
        var adHeight = $(".content_right").height();
		$(".slider").stop(true,false).animate({top : -adHeight*index},1000);
		$(".num li").removeClass("on")
			.eq(index).addClass("on");
}
</script>
<style>
*{ 
margin:0;
padding:0;
}
.content_right{
	background:#eee;
	border : 1px solid #AAAAAA;
	width: 586px;
	height:150px; 
	float:left;	
	overflow:hidden;
	position:relative;
}
.slider,.num{
	position:absolute;
}
.slider li{ 
	list-style:none;
	display:inline;
}
.slider img{ 
	width:586px; 
	height:150px;
	display:block;
}
.num{ 
	right:5px; 
	bottom:5px;
}
.num li{
	float: left;
	color: #FF7300;
	text-align: center;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-family: Arial;
	font-size: 12px;
	cursor: pointer;
	overflow: hidden;
	margin: 3px 1px;
	border: 1px solid #FF7300;
	background-color: #fff;
}

.content_right .num li.on{
	color: #fff;
	line-height: 21px;
	width: 21px;
	height: 21px;
	font-size: 16px;
	margin: 0 1px;
	border: 0;
	background-color: #FF7300;
}
</style>
</head>
<body>
<div class="content_right">
  <ul class="slider">
    <li><img src="images/ads/1.gif" /></li>
    <li><img src="images/ads/2.gif" /></li>
    <li><img src="images/ads/3.gif" /></li>
    <li><img src="images/ads/4.gif" /></li>
    <li><img src="images/ads/5.gif" /></li>
  </ul>
  <ul class="num" >
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>
</body>
</html>

效果图：

guwen1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
广告定时滚动，点标签跳转

无标题文档/*首页广告效果*/$(function(){ var len = $(".num > li").length; var index = 0; var adTimer; $(".num li").mouseover(function(){ index = $(".num li").index(this); sho
复制链接

扫一扫