javascript实现新闻咨询图片滚动效果资源-CSDN文库

共8个文件

gif：5个

js：1个

html：1个

javascript

实现新闻咨询图片滚动效果

5星 · 超过95%的资源需积分: 10 154 浏览量 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

<!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>  </body> </html>

评论收藏

内容反馈