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

最新推荐文章于 2024-09-17 21:49:02 发布

wbandzlhgod

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量886

点赞数 1

文章标签： javascript 咨询 function stylesheet class xhtml

本文链接：https://blog.csdn.net/wbandzlhgod/article/details/6829680

版权

html/js/css/div 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>