JQuery实现广告效果（滚动切换）
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");
}
} 相关推荐
落地窗前梦残夜 2019-06-28
whChina江城老温 2010-01-10
worldkun 2010-08-16
LeoNature 2017-03-27
weii 2015-11-06
iViOLeTi 2015-07-02
keyijing 2015-09-02
YUYISHARE 2010-12-08
AndrewFrank0zxy 2007-04-23
84533871 2008-11-19
人人都是产品经理 2018-05-08
急救室 2018-02-27
航通社 2018-01-22
航通社 2017-12-06
李叫兽 2017-11-29
W3C CSS 2017-06-16