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. }  
  • 相关阅读:
    kendoUI行编辑器的使用grid.editRow($("#grid tr:eq(1)"))无效
    Kendo-UI学习 DataSource 数据源属性说明
    fineReport 下拉联动 js
    报表FineReport中单元格中各种颜色的标识说明
    keil DSP最新版本
    ESP8266固件烧录篇
    git 报错 时出现Clone failed early EOF错误解决
    STM32 HAL库、标准外设库、LL库（STM32 Embedded Software）
    再谈EPLAN 中的项目结构-帮助理解
    启动EPLAN时，应该选哪个版本？Compact/select start/professional/select/maintenance/professional+/ultimate
  • 原文地址：https://www.cnblogs.com/turbo12138/p/5568973.html
Copyright © 2011-2022 走看看