JQuery实现广告效果（滚动切换）

时间：2022-11-30 12:00:48

JQuery实现广告效果（滚动切换）

 

JQuery实现广告效果（滚动切换）Html+css

 

效果如上图

  代码：

Java代码  JQuery实现广告效果（滚动切换）
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <script src="../jquery-2.1.4.min.js"></script>  
  7.     <script language='javascript' src="../JS/guanggao.js">  
  8.     </script>  
  9.     <style type="text/css">  
  10.         /*滚动广告样式*/  
  11.         .ad {margin:10px;width:586px; height:150px;overflow:hidden;border:1px solid #AAAAAA;position:relative;}  
  12.         .slider,.num{position:absolute;}  
  13.         .ad ul{;padding: 0;margin: 0}  
  14.         .slider li{ list-style:none;display:inline;}  
  15.         .slider img{ width:586px; height:150px;display:block;}  
  16.         .num{ right:5px; bottom:5px;}  
  17.         .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;#fff;}  
  18.         .num li.on{color: #fff;line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;border: 0;#FF7300;font-weight: bold;}  
  19.     </style>  
  20. </head>  
  21. <body>  
  22. <div class="ad" >  
  23.     <ul class="slider" >  
  24.         <li><a href="#"><img src="../PICTURE/P/asb-160219.gif" alt="ad1"/></a></li>  
  25.         <li><a href="#"><img src="../PICTURE/P/htlogo.png" alt="ad2"/></a></li>  
  26.         <li><a href="#"><img src="../PICTURE/P/hw-160405.gif" alt="ad3"/></a></li>  
  27.         <li><a href="#"><img src="../PICTURE/P/logo_network_power.gif" alt="ad4"/></a></li>  
  28.         <li><a href="#"><img src="../PICTURE/P/logo.jpg" alt="ad5"/></a></li>  
  29.     </ul>  
  30.     <ul class="num" >  
  31.         <li>1</li>  
  32.         <li>2</li>  
  33.         <li>3</li>  
  34.         <li>4</li>  
  35.         <li>5</li>  
  36.     </ul>  
  37. </div>  
  38. </body>  
  39. </html>  

 

  

JS代码：

Java代码  JQuery实现广告效果（滚动切换）
  1. window.onload = function () {  
  2.     anime()  
  3. };  
  4. function anime(){  
  5.     $(function() {  
  6.         var len = $(".num > li").length;  
  7.         var index = 0;  
  8.         var adTimer;  
  9.         $(".num li").mouseover(function() {  
  10.             index = $(".num li").index(this);  
  11.             showImg(index);  
  12.         }).eq(0).mouseover();  
  13.         //滑入 停止动画，滑出开始动画.  
  14.         $('.ad').hover(function() {  
  15.             clearInterval(adTimer);  
  16.         }, function() {  
  17.             adTimer = setInterval(function() {  
  18.                 showImg(index)  
  19.                 index++;  
  20.                 if (index == len) { index = 0; }  
  21.             }, 3000);  
  22.         }).trigger("mouseleave");  
  23.     })  
  24. // 通过控制top ，来显示不同的幻灯片  
  25.     function showImg(index) {  
  26.         var adHeight = $(".ad").height();  
  27.         $(".slider").stop(true, false).animate({ top: -adHeight * index }, 500);   //翻滚效果  
  28.         //$(".slider").css("top", -adHeight * index);     //跳转效果  
  29.         $(".num li").removeClass("on")  
  30.             .eq(index).addClass("on");  
  31.     }  
  32. }  
标签：

相关文章