Html+css

效果如上图

代码：

  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代码：

  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. }

JQuery实现广告效果（滚动切换）的更多相关文章

  1. Jquery仿百度经验左右滚动切换效果(转)

    http://www.xwcms.net/webAnnexImages/fileAnnex/201608/61342/index.html

  2. 使用jQuery仿淘宝商城多格焦点图滚动切换效果

    1.效果及功能说明 图片滚动切换特效,高仿2012淘宝商城首页多格子焦点图切换,鼠标滑过焦点图片各个格子区域聚光灯效果展示 2.实现原理 在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...

  3. 分享一款页面视差滚动切换jquery.localscroll插件

    今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...

  4. jCarousel,jQuery下的滚动切换传送插件

    转自:http://www.zhangxinxu.com/jq/jcarousel_zh/#Examples 介绍 jCarousel是一款 jQuery 插件, 用来控制水平或垂直排列的列表项. 这 ...

  5. jQuery手机端触摸卡片切换效果

    效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <htm ...

  6. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  8. 实例源码--Android图片滚动切换效果

    下载源码 技术要点:  1.图片滚动切换技术 2.详细的源码注释 ...... 详细介绍: 1.图片滚动切换技术 本套源码实现了类似于网站图片滚动推广效果,效果不错,很不错的参考源码 2.源码目录 运 ...

  9. JS平滑无缝滚动实现———实现首页广告自动滚动效果（附实例）

    本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...

随机推荐

  1. C语言与水仙花数

    C语言与水仙花数 水仙花数:前提三位数,"个位数的立方"加上"十位数的立方"加上"百位数的立方"恰好等于这个数. 我们来用C语言书写水仙花数 ...

  2. Linux分区练习（1）

    1.作业描述: 4个主分区. 具体实现过程: 打开Linux,在终端中输入:fdisk -uc /dev/sda 可以查看到                   :Command (m for hel ...

  3. RCA：未注意Curl-library Post 1024以上字节时的HTTP/1.1特性导致 HessianPHP 传输数据失败

    先列出 HessianPHP 的错误提示: CURL transport error: transfer closed with outstanding read data remaining 基础知 ...

  4. 李洪强经典面试题136-KVO-KVC

    李洪强经典面试题136-KVO-KVC   KVC-KVO KVC的底层实现? 当一个对象调用setValue方法时,方法内部会做以下操作: ①检查是否存在相应key的set方法,如果存在,就调用se ...

  5. Android事件处理

    含义:为用户动作提供响应就是事件处理. Android提供了强大的事件处理机制:基于监听的事件处理.基于回调的事件处理. 一.基于监听的事件处理 监听的处理模型主要涉及三类对象 >Event S ...

  6. java抽象类和接口的区别

    抽象类特点:1.抽象类中可以构造方法2.抽象类中可以存在普通属性,方法,静态属性和方法.3.抽象类中可以存在抽象方法.4.如果一个类中有一个抽象方法,那么当前类一定是抽象类:抽象类中不一定有抽象方法. ...

  7. JPA入门例子(采用JPA的hibernate实现版本)

    (1).JPA介绍: JPA全称为Java Persistence API ,Java持久化API是Sun公司在Java EE 5规范中提出的Java持久化接口.JPA吸取了目前Java持久化技术的优 ...

  8. Unity学习疑问记录之新GUI

    学习Unity 4.6新GUI系统 http://segmentfault.com/a/1190000000642686

  9. 一次与iptables有关的Openstack排错

    先说下环境: 宿主机A(192.168.1.242)上运行着实例a(192.168.1.176), 宿主机B(192.168.1.56)上运行着实例b(192.168.1.50). 用户说从实例b上t ...

  10. equals和=，==的区别

    一. ==和equals的区别 1. ==是运算符 2. equals是String对象的方法 一般有两种类型的比较 1. 基本数据类型的比较 2. 引用对象的比较 1. 基本数据类型的比较 ==和e ...