用html jQuery实现广告轮播图自动切换 滚动页面
运行图片
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/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>
