<!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=utf-8" />
<link rel="stylesheet" href="css/index.css" type="text/css">
<script language="javascript" src="scripts/jquery-1.4.2.js"> </script>
<script language="javascript">
$(function(){
var len = $('.num > li').length;
//获取图片个数 alert(len)
var index = 0;
var adTimer;
$('.num li').mouseover(function(){
//主要是获取要显示的图片 index[0,1,2,3,4]
index = $(".num li").index(this);
//alert(index);
showImg(index);
}).eq(0).mouseover();
//添加进入时 自动切换图片效果
$('.ad').hover(
function(){
//方法可取消由 setInterval() 设置的 timeout。
clearInterval(adTimer);
},
function(){
//setInterval() 方法会不停地调用函数
//setInterval(code,millisec[,"lang"]) millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
adTimer = setInterval(
function(){
showImg(index)
index++;
if(index==len){index=0;}
},
3000);
}).trigger("mouseleave");
//在每一个匹配的元素上触发某类事件
//mouseleave 在离开该元素区域时触发。
});
function showImg(index){
//height 取得第一个匹配元素当前计算的高度值
var adHeight = $(".content_right .ad").height();//alert(adHeight);alert(index);
//animate用于创建自定义动画
$(".slider").stop(true,false).animate({top : -(adHeight*index + 16)},1000);
//给数字添加鼠标划过效果 [添加 移除]
$(".num li").removeClass("on").eq(index).addClass("on");
}
</script>
<title>无标题文档</title>
</head>
<body>
<div class="content_right">
<!-- 广告效果 -->
<div class="ad" >
<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>
</div>
<!--add by wangbin,2011-09-28 -->
</body>
</html>
javascript 实现新闻咨询图片滚动效果
5星 · 超过95%的资源 需积分: 10 32 浏览量
2011-09-28
13:32:51
上传
评论
收藏 292KB RAR 举报 
广告效果.rar （8个子文件） 
广告效果 images ads 
1.gif 60KB 5.gif 56KB 2.gif 42KB 4.gif 34KB 3.gif 58KB css 
index.css 905B scripts jquery-1.4.2.js 160KB
index.html 2KB资源评论
毛驴锅锅2014-09-02不是demo。只能参考- sx_dbsoft2014-02-18不错，已参考 了
- qq_268689172015-04-02非常不错，已用到项目中，谢谢分享
- 潇潇雨_雨潇潇2014-04-17不错，参考了
一品茉莉2014-02-20效果挺好的，学习了，谢谢！
wbandzlhgod
- 粉丝: 70
- 资源: 14
