zoukankan      html  css  js  c++  java

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

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

     

    Html+css

    效果如上图

      代码：

    Java代码  收藏代码
    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;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{ 586px; height:150px;display:block;}  
    16.         .num{ right:5px; bottom:5px;}  
    17.         .num li{float: left;color: #FF7300;text-align: center;line-height: 16px; 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; 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代码  收藏代码
    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. }  
  • 相关阅读:
    linux file命令小记
    利用actionscript访问wfs服务
    在C/C++中static有什么用途？（请至少说明两种）
    单元测试、集成测试、系统测试的侧重点是什么？
    测试计划工作的目的是什么？测试计划文档的内容应该包括什么？其中哪些是最重要的？
    简述什么是静态测试、动态测试、黑盒测试、白盒测试、α测试&#160;β测试
    一台客户端有三百个客户与三百个客户端有三百个客户对服务器施压，有什么区别?
    BUG管理工具的跟踪过程（用BugZilla为例子）
    软件测试分为几个阶段&#160;各阶段的测试策略和要求是什么?
    软件质量保证体系是什么&#160;国家标准中与质量保证管理相关的几个标准是什么?他们的编号和全称是什么?
  • 原文地址：https://www.cnblogs.com/turbo12138/p/5568973.html
Copyright © 2011-2022 走看看