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

    MinGW是windows版本的GCC和有用的GNU工具的集合 http://www.cnblogs.com/itech/archive/2010/04/08/1705592.html

  2. winform窗体最大化、最小化、还原

    //最大化 private void button_maxsize_Click(object sender, EventArgs e)        {            this.WindowS ...

  3. 如何在Linux中使用rz/sz工具进行文件传输

    在Linux中,使用rz/sz工具能够进行Linux和windows之间的文件传输,那么要如何使用rz/sz工具工具呢?下面小编就给大家介绍下Linux下如何使用rz/sz工具进行文件传输,一起来学习 ...

  4. 黑马程序员----java基础笔记上（毕向东）

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 笔记一共记录了毕向东的java基础的25天课程,分上.中.下 本片为上篇,涵盖前10天课程 1. ...

  5. [CareerCup] 17.1 Swap Number In Place 互换位置

    17.1 Write a function to swap a number in place (that is, without temporary variables). 这道题让我们交换两个数, ...

  6. HDU5831

    Rikka with Parenthesis II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Jav ...

  7. 不同版本strtotime("2016-09-04")输出不同问题

    在php版本改变后,突然发现查询没结果.然后发现是时间不同了,测试以后发现以前版本的php和现在版本的phpstrtotime输出不同.原来是时区配置问题,解决办法:http://zhidao.bai ...

  8. windows用户用VMware 虚拟机安装黑苹果Mac.OS.X操作系统

    使用的操作系统操作系统 windows7 SP1 X64 本教程所用 的软件的下载地址都在本教程中 ) 电脑内存低于 4G 的,加内存吧 … 1. SecurAble (检测你的 CPU 是否支持硬件 ...

  9. ul+li标签制作表格

    table标签制作表格代码繁琐,且不方便后期代码维护. li标签加上css的浮动样式可以制作多种样式的表格. 代码如下: <ul id="ttttt" style=" ...

  10. 有趣的BAT

    最近某个用到的第三方程序会产生很多日志文件在logs目录中,每天一个log文件,类似 2014-05-07001.log.日积月累这个目录文件数量非常多,手动清除还是比较麻烦的. 由于这个软件不是自己 ...