html_jQuery__0">用html jQuery实现广告轮播图自动切换 滚动页面
运行图片
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
*{
margin:0px;
padding:0px;
}
#d1{
border : 1px solid #aaaaaa;
margin-left:200px;
margin-top:40px;
width:970px;
height:300px;
overflow:hidden;
position:relative;
}
#adv,#num{
position:absolute;
}
ul li{
list-style:none;
display:inline;
}
ul img{
width:970px;
height:300px;
display:block;
}
#num{
right:300px;
bottom:5px;
}
#num li{
float: left;
color: blue;
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;
}
.on{
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color:navajowhite;
font-weight: bold;
}
#main{text-align:center; width: 1014px; margin: 0 auto;}
#adver{
position:absolute;
left:10px;
top:30px;
z-index:2;
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var adverTop=parseInt($("#adver").css("top"));
var adverLeft=parseInt($("#adver").css("left"));
$(window).scroll(function(){
var scrollTop = parseInt($(this).scrollTop());//获取滚动条翻上去的距离
var scrollLeft = parseInt($(this).scrollLeft());//获取滚动条向右的距离
$("#adver").offset({top:scrollTop+adverTop});
$("#adver").offset({left:scrollLeft+adverLeft});
});
});
$(function(){
$('#num li').mouseenter(function(){
//取得光标指向的li的下标
var index = $('#num li').index(this);
//滚动图片
showImage(index);
}).eq(0).mouseenter();//鼠标进来的时候显示第一个
var i = 0;
var taskId;
$('#d1').hover(function(){
//光标进入，停止滚动
clearInterval(taskId);
},function(){
//设置间隔时间
taskId = setInterval(function(){
showImage(i);
i++;
if(i==5){//如果是最后
i = 0;//回到首张
}
},1000);//设置1秒
}).mouseleave();//光标离开，开始滚动
});
function showImage(index){
$('#adv').stop(true).animate({'top':-index * 300},1000);//stop(true):清空当前累积的所有的动画。
//取选中索引为index的来加样式on高亮且其余li同级元素来移除没有高亮光标
$('#num li').eq(index).addClass('on').siblings().removeClass('on');
}
</script>
</head>
<body>
<div id="d1">
<ul id="adv">
<li><img src="img/adver01.jpg"/></li>
<li><img src="img/adver02.jpg"/></li>
<li><img src="img/adver03.jpg"/></li>
<li><img src="img/adver04.jpg"/></li>
<li><img src="img/adver05.jpg"/></li>
</ul>
<ul id="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id="main"><img src="img/main1.jpg"/><img src="img/main2.jpg"/><img src="img/main3.jpg"/></div>
</body>
</html>
