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. Let It Be - The Beatles - Lyrics

    轉載自 https://www.youtube.com/watch?v=0714IbwC3HA When I find myself in times of trouble, Mother Mary ...

  2. winform退出或关闭窗体时弹窗提示代码：转

    winform退出或关闭窗体时弹窗提示代码,当我们点击窗体的 X 按钮时,会弹出一个对话框,询问我们是直接退出,还是最小化到托盘,还是取消这个行为.或是是否保存当前修改等等.以下以最小化到托盘为例. ...

  3. zk jquery的使用

    jQuery_effects.zul: <?page title="Jquery" contentType="text/html;charset=UTF-8&quo ...

  4. svn学习笔记（3）设置

    1.图标集

  5. 演示一个导致ora-01555错误的场景

    1创建一个undo表空间 2查看当前undo配置 3更该默认undo表空间 4确认更改的配置 5创建一张测试表 6模拟批量操作 7 查询2分钟前的数据 从这里可以到当查询2分钟前的数据时候,系统报出O ...

  6. c++之vector

    vector是STL中最常见的容器,它是一种顺序容器,支持随机访问.vector是一块连续分配的内存,从数据安排的角度来讲,和数组极其相似, 不同的地方就是:数组是静态分配空间,一旦分配了空间的大小, ...

  7. Interface => IDataErrorInfo

    Introduction to common Interfaces IDataErrorInfo Provides the functionality to offer custom error in ...

  8. apple mobile device服务无法启动，错误1053 解决

    我不想安装iTunes,于是下了iTunes64安装包,解压后得到6个文件 安装完 AppleMobileDeviceSupport64.msi 发现服务启动不起来,提示错误1053,网上搜了下发现出 ...

  9. 关于JavaScript的判断语句（1）

    if语句: if( 判断条件 ){ 判断结果为true执行语句: } if...else语句: if(判断条件){ 判断结果为true时执行的语句: }else{ 判断结果为false时执行语句: } ...

  10. ASCII字符对照表 不时之需

    ASCII可显示字符 二进制 十进制 十六进制 图形 0010 0000 32 20 (空格)(␠) 0010 0001 33 21 ! 0010 0010 34 22 " 0010 001 ...