Html+css
效果如上图
代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-2.1.4.min.js"></script> <script language='javascript' src="../JS/guanggao.js"> </script> <style type="text/css"> /*滚动广告样式*/ .ad {margin:10px;width:586px; height:150px;overflow:hidden;border:1px solid #AAAAAA;position:relative;} .slider,.num{position:absolute;} .ad ul{;padding: 0;margin: 0} .slider li{ list-style:none;display:inline;} .slider img{ width:586px; height:150px;display:block;} .num{ right:5px; bottom:5px;} .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;background-color: #fff;} .num li.on{color: #fff;line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;border: 0;background-color: #FF7300;font-weight: bold;} </style> </head> <body> <div class="ad" > <ul class="slider" > <li><a href="#"><img src="../PICTURE/P/asb-160219.gif" alt="ad1"/></a></li> <li><a href="#"><img src="../PICTURE/P/htlogo.png" alt="ad2"/></a></li> <li><a href="#"><img src="../PICTURE/P/hw-160405.gif" alt="ad3"/></a></li> <li><a href="#"><img src="../PICTURE/P/logo_network_power.gif" alt="ad4"/></a></li> <li><a href="#"><img src="../PICTURE/P/logo.jpg" alt="ad5"/></a></li> </ul> <ul class="num" > <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>
JS代码:
window.onload = function () { anime() }; function anime(){ $(function() { var len = $(".num > li").length; var index = 0; var adTimer; $(".num li").mouseover(function() { index = $(".num li").index(this); showImg(index); }).eq(0).mouseover(); //滑入 停止动画,滑出开始动画. $('.ad').hover(function() { clearInterval(adTimer); }, function() { adTimer = setInterval(function() { showImg(index) index++; if (index == len) { index = 0; } }, 3000); }).trigger("mouseleave"); }) // 通过控制top ,来显示不同的幻灯片 function showImg(index) { var adHeight = $(".ad").height(); $(".slider").stop(true, false).animate({ top: -adHeight * index }, 500); //翻滚效果 //$(".slider").css("top", -adHeight * index); //跳转效果 $(".num li").removeClass("on") .eq(index).addClass("on"); } }
相关推荐
jQuery 控制网页整屏横向、垂直滚动切换,意思是,它与Tab大体上类似,但是TAB只控制某个Division标签,这一个控制的是整个网页,点击页面询问的序号,当前网页会滚动出去,然后第二屏滚动进来,形成连贯的滚屏效果...
jQuery电影广告图片上下滚动切换代码 jQuery电影广告图片上下滚动切换代码
jQuery仿动感flash自动滚动图片切换广告插件 jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) jquery仿苏宁易购商城产品图片全方位展示功能 jquery制作漂亮按钮示例打包 jQuery动态切换网页背景的大块...
jquery实现的某汽车网站全屏广告鼠标滚动切换特效源码.zip
非常实用的购物商城常用jQuery商品图片左右滚动切换代码,以及左侧限时抢购秒杀倒计时代码,还有右侧的广告焦点图切换效果。
jQuery实例教程,滚动、导航、轮换、广告切换、图片轮换、弹出层、隔行换色、收缩展开效果、图片展示
jQuery 三幅banner切换 大图广告滚动切换.zip
71. 一款jQuery左右箭头控制大图滚动切换的代码 72. 一款jquery常用产品图片放大效果插件下载 73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款...
jQuery扁平数字按钮图片滚动切换特效
71. 一款jQuery左右箭头控制大图滚动切换的代码 72. 一款jquery常用产品图片放大效果插件下载 73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery...
71. 一款jQuery左右箭头控制大图滚动切换的代码 72. 一款jquery常用产品图片放大效果插件下载 73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery...
71. 一款jQuery左右箭头控制大图滚动切换的代码 72. 一款jquery常用产品图片放大效果插件下载 73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery...
本文实例讲述了jQuery实现的无缝广告图片左右滚动功能。分享给大家供大家参考,具体如下: 先是写了一个此功能的jQuery插件,但是一时写不出如何使用鼠标进行滚动方向的切换,于是又写了另一个可以实现切换的版本… ...
jQuery仿动感flash自动滚动图片切换广告插件.rar
27.jquery自由滚动切换 标签式导航菜单示例 28.博客Blog横向jquery动态滑动菜单插件示例 29.打包50种实例的大型树形菜单控件JSTree(基于jQuery)下载 30.打包两款实用jquery+div横向滑动的下滑菜单代码(兼容性...
jQuery鼠标滚动全屏切换预览特效是一款基于fullPage.js插件实现的全屏网站切换特效。
实现效果: jQuery上下滚动banner广告代码,这个我觉得在企业网站里面用会比较好点点击上下键,来切换广告的信息,这个不错,php中文网推荐下载!
先静态布局好HTML结构,使用伪类:hover模拟动画效果,再使用jQuery 控制动画类名的切换来实现效果!主要判断滚动的方向,以及相应方向上加载动画的时机(即何时才加载动画的判断条件!关键点!)。 2.思维草稿图: ...
多边形箭头滚动切换jQuery焦点图是一款带由左右切换箭头,上一张下一张缩略图,自动轮播切换的jQuery焦点图代码。