定时器实现 banner图单个轮播

最新推荐文章于 2019-12-30 18:19:22 发布

暮辰邪

最新推荐文章于 2019-12-30 18:19:22 发布

阅读量389

点赞数

分类专栏：总结

本文链接：https://blog.csdn.net/weixin_37623470/article/details/90341070

版权

总结专栏收录该内容

26 篇文章 1 订阅

订阅专栏

每页一张banner图的实现，下方有对应图片的按钮，点击则跳转到对应的图片，要是要每页多张的实现则请看下一篇博客

下面是banner1的效果：

下面是代码（其中c:set是list数据循环计数使用，记得一定要引入jquery.min.js(百度云下载链接https://pan.baidu.com/s/1HvAuWXeBo3AMOf0Q0K__fw
提取码：0j95 )文件）：

<html>

<head>

<style type="text/css">

body{ text-align:center} 

/*  banner图*/
.banner01 {position: relative; height: 230px; }
.banner01 ul {position: absolute; top: 0; width: 5010px; height: 230px; list-style: none;}
.banner01 ul li {float: left; width: 1000px; height: 230px;margin-top:-16px;}
.banner01 img {width: 1000px;}
/*  banner图 悬浮按钮*/
.banner01 .indicator {position: absolute; bottom: 20px; width: 100%; text-align: center; z-index: 10px;}
.banner01 .indicator span {display: inline-block; width: 24px; height: 5px; margin: 0 2px; background-color: #fff; opacity: 0.4; filter: alpha(opacity=40); cursor: pointer;}
.banner01 .indicator span.sel {opacity: 1; filter: alpha(opacity=100);}


</style>

<script type="text/javascript" src="C:\Users\liangwenbo\Desktop\jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//轮播图
function Pager(mPage) {
	var page = 0;
	var loopInt;
	var animeInt;
	
	var _this = this;
	
	this.scrollToPage = function(p) {//设置每次翻页多大，p是传过来的参数
		try{
			while (p >= mPage) {//mPage是总共多少条，p是page，初始化为1，因为每页是有一个图片，所以mPage就是页数，如果当前页大于页数则p=第一页
				p -= mPage;
			}
			while (p < 0) {//如果当前页小于页数则p=p+mPage
				p += mPage;
			}
			
			clearInterval(loopInt);//清除第一个定时器
			
			var banner = $('.banner01>ul')[0];//获取banner下的第一个ul对象
			var count = 0;//每次count初始化
			
			var left = parseInt(banner.style.left);//初始化为0
			var tarLeft = p * -1000;//图片宽度为1000
			page = p;
			var diffLeft = tarLeft - left;//1000px;，2000px;3000px;
			var diff = diffLeft / 100;
			
			animeInt = setInterval(function () {
	            banner.style.left = parseInt(banner.style.left) + diff + 'px';
	            count++;
	            if (count == 100) {//当count为100时，往左偏移了1000了
	            	clearInterval(animeInt);//停止当前
	            	banner.style.left = tarLeft + 'px';
	            	$('#ban_' + page).addClass('sel').siblings().removeClass('sel');
	            	startScroll();
	            }
	        }, 5);
		}catch(e){
		}
	};
	
	function startScroll() {//设置定时器
		if(mPage!=1){//当数量大于一张时轮播
			loopInt = setInterval(function() {
				page++;
				_this.scrollToPage(page);
			}, 4000);
		}
	}
	
	startScroll();
	
	this.endAutoScroll = function() {
    	clearInterval(animeInt);
    	clearInterval(loopInt);
	};
}
//离开页面时结束轮播图
function pageEnd() {
	pager.endAutoScroll();
}

var pager;
function startup(){
	var size = 3;
	pager = new Pager(size);
	
}

</script>

</head>

<body  onload="startup();" onunload="pageEnd();"><!-- 进入页面加载startup()方法，离开页面加载：pageEnd()方法-->
<div align="center" style="width:1000px;overflow:hidden;border: 1px solid #CCC; margin:0 auto; "><!-- 最外层边框限制宽度-->
		<!-- banner图 -->
		<c:set var="banSize" value="0" /><!-- 计数 -->
		<div class="banner01" id="banner01">
			<ul style="left: 0;">
				<li style="margin-left:-40px;"><img src="E:\微信图片_20190516103349.png" /></li>
				<li><img src="E:\微信图片_20190516103344.png" /></li>
				<li><img src="E:\微信图片_20190516103337.png" /></li>
				<!-- <c:set var="banSize" value='${banSize+1 }' />-->
					
			</ul>
			<div class="indicator">
				<span id="ban_0" onclick="pager.scrollToPage(0);"></span>
				<span id="ban_1" onclick="pager.scrollToPage(1);"></span>
				<span id="ban_2" onclick="pager.scrollToPage(2);"></span>
			</div>
			
			<input type="hidden" id="BannerSize" name="BannerSize" value='<c:out value="${banSize}" />'/>
		</div>
</div>
</body>

</html>

下面是素材：