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. Nginx_查看并发连接数

    通过查看Nginx的并发连接,我们可以更清除的知道网站的负载情况.Nginx并发查看有两种方法(之所以这么说,是因为笔者只知道两种),一种是通过 web界面,一种是通过命令,web查看要比命令查看显示 ...

  2. CentOS VirtualBox启动虚拟及报错：VirtualBox error: Kernel driver not installed (rc=1908)

    VirtualBox error: Kernel driver not installed (rc=1908) Hi all, Let me first say that this is my fin ...

  3. 原创docker dcos 的安装

    原创哈,上个星期无意间发现了一个可以好东西 DC/OS https://dcos.io 这个是官网哈 然后就痛苦的折磨了一个多星期; 基本是参照到https://dcos.io/docs/1.7/ad ...

  4. JDBC学习笔记2

    数据库数据更新操作statement接口下操作:[代码] import java.sql.DriverManager;import java.sql.SQLException; public clas ...

  5. Nodejs正则表达式函数之match、test、exec、search、split、replace使用详解

    1. Match函数 使用指定的正则表达式函数对字符串惊醒查找,并以数组形式返回符合要求的字符串 原型:stringObj.match(regExp) 参数: stringObj 必选项,需要去进行匹 ...

  6. [LintCode] Integer to Roman 整数转化成罗马数字

    Given an integer, convert it to a roman numeral. The number is guaranteed to be within the range fro ...

  7. HTML5 Input 类型

    浏览器支持 Input type IE Firefox Opera Chrome Safari email No 4.0 9.0 10.0 No url No 4.0 9.0 10.0 No numb ...

  8. JQuery类型转换

    来自:http://blog.csdn.net/kfanning/archive/2010/04/14/5485412.aspx 转换成数字 ECMAScript提供了两种把非数字的原始值转换成数字的 ...

  9. MacPort 的使用

    MacPorts 的安装和使用   官网下载最版本的 安装包   自动安装  可能会出现很慢的情况   设置环境变量   vim ~/.bash_profile      i  插入修改  :wq 保 ...

  10. PHP版本VC6与VC9、Thread Safe与None-Thread Safe等的区别

    PHP版本VC6与VC9.Thread Safe与None-Thread Safe等的区别 [摘要]PHP 是一种 HTML 内嵌式的语言,是一种在服务器端执行的嵌入HTML文档的脚本语言,在PHP发 ...