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. PHP面向对象学习七 总结

    1.对象描述的配置 方法名 __tostring() 我们可以直接打印对象句柄,从而获得该方法的基本信息或其他内容. class My{ function __tostring ( ){ echo & ...

  2. IOS中NSUserDefaults的用法（轻量级本地数据存储）

    NSUserDefaults适合存储轻量级的本地数据,比如要保存一个登陆界面的数据,用户名.密码之类的,个人觉得使用NSUserDefaults是首选.下次再登陆的时候就可以直接从NSUserDefa ...

  3. U-Boot编译过程解析

    解压u-boot-2010.03.tar.bz2就可以得到全部U-Boot源程序.在顶层目录下有29个子目录,分别存放和管理不同的源程序.这些目录中所要存放的文件有其规则,可以分为3类. ● 与处理器 ...

  4. Spring MVC过滤器-字符集过滤器（CharacterEncodingFilter）

    spring的字符集过滤通过用于处理项目中的乱码问题,该过滤器位于org.springframework.web.filter包中,指向类CharacterEncodingFilter,Charact ...

  5. JavaWeb动态导出Excel可弹出下载

    由于项目需求,需要将数据导出成Excel表格,并且可选择导出项,可下载.项目使用的Spring+Mybatis+SpringMVC框架,利用Apache POI导出Excel.POI具体使用请自行百度 ...

  6. 终于懂浏览器里面的cookies和session了

    在PHP开发中对比起Cookie,session 是存储在服务器端的会话,相对安全,并且不像 Cookie 那样有存储长度限制: (Php.Asp.Jsp)---: cookie(客户端)界面没有刷新 ...

  7. jquery控制文字内容溢出用点点点(…)省略号表示

    jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(“.text”).each(function(){ var maxwidth=23; if($(this).text( ...

  8. winform记事本初步实现

    public Form1() { InitializeComponent(); } private void 剪切TToolStripMenuItem_Click(object sender, Eve ...

  9. 集中式版本控制VS分布式版本控制

    CVS及SVN都是集中式的版本控制系统,而Git是分布式版本控制系统,集中式和分布式版本控制系统有什么区别呢? 集中式版本控制系统,版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所 ...

  10. Cookie工具类

    import javax.servlet.http.Cookie; import javax.servlet.http.HttpServletRequest; import javax.servlet ...