完美运动轮播图（无缝）

最新推荐文章于 2021-10-02 00:23:23 发布

西瓜味白桃汽水

最新推荐文章于 2021-10-02 00:23:23 发布

阅读量159

点赞数

文章标签： js html css javascript

本文链接：https://blog.csdn.net/weixin_51109349/article/details/109564760

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
<style>
	*{
		margin: 0px;
		padding: 0px;
	}
			body,ul,li{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			img{
				display: block;
				border: none;
			}
			#scrollBanner{
				width: 900px;
				height: 300px;
				overflow: hidden;
				position: relative;
				}
			#scrollList {
				position: absolute;
				height: 300px;
			}
			#scrollList li{
				float: left;
				width: 900px;
				height: 300px;
				
			}
			#scrollList img{
				width: 900px;
				height: 300px;
			}
			#btns div{
				position: absolute;
				top: 50%;
				width: 50px;
				height: 50px;
				margin-top: -25px;
				background: #000;
				opacity: .3;
				line-height: 50px;
				text-align: center;
				font-size: 50px;
				color: white;
				cursor: pointer;
			}
			#btns div:first-child{
				left:50px;
			}
			#btns div:last-child{
				right:50px;
			}
			#nums{
				position: absolute;
				bottom: 20px;
				right: 20px;
			}
			#nums li{
				float: left;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				background: white;
				color: red;
				cursor: pointer;
				margin:0 10px;
				border-radius: 50%;
			}
			#nums li.hover,#nums li:hover{
				background: red;
				color: white;
			}
		</style>

		</style>
	</head>
	<body>
		
		<div id="scrollBanner">
				<ul id="scrollList">
					<li><img src="../../img/img/0.JPG"></li>
					<li><img src="../../img/img/1.JPG"></li>
					<li><img src="../../img/img/2.JPG"></li>
					<li><img src="../../img/img/0.JPG"></li>
				</ul>
				<div id="btns">
					<div>&lt;</div>
					<div>&gt;</div>
				</div>
				<ul id="nums">
					<li class="hover">1</li>
					<li>2</li>
					<li>3</li>
				</ul>
		</div>

	</body>


		<script type="text/javascript">
			var oScrollBanner = document.getElementById("scrollBanner");
			var oScrollList = document.getElementById("scrollList");
			var aList  =oScrollList.children;
			var perWidth = aList[0].offsetWidth;
			oScrollList.style.width = perWidth * aList.length + "px";
			var i = 0;
			
			var timer = setInterval(function(){
				move();
			},3000);
			
			function move(){
				i++;
				if(i==aList.length){
					oScrollList.style.left = 0;
					i = 1;
				}
				if(i==-1){
					oScrollList.style.left = -perWidth * (aList.length-1) + "px";
					i = aList.length - 2;
				}
				
				//控制角标的变化
				for(var j = 0; j < aNumsList.length; j++){
					aNumsList[j].className = "";
				}
				if(i==aList.length - 1){
					aNumsList[0].className = "hover";
				}else{
					aNumsList[i].className = "hover";
				}				
				startMove(oScrollList,{left:-perWidth*i});
			}
			
			//左右按钮实现图片切换
			var oBtns = document.getElementById("btns");
			var oPrev = oBtns.children[0];
			var oNext = oBtns.children[1];
			
			oNext.onclick = function(){
				move();
			}
			oPrev.onclick = function(){
				i-=2;
				move();
			}
			
			oScrollBanner.onmouseover = function(){
				clearInterval(timer);
			}
			oScrollBanner.onmouseout = function(){
				timer = setInterval(function(){
					move();
				},3000);
			}
			//角标变化
			var oNums = document.getElementById("nums");
			var aNumsList = oNums.children;
			
			for(let j = 0; j < aNumsList.length; j++){
				aNumsList[j].onclick = function(){
					i = j-1;
					move();
				}
			}
			
			
			
			
	function startMove(obj, json, fn) {
	clearInterval(obj.timer);
	obj.timer = setInterval(function() {
		var flag = true; //假设所有属性都达到目标值
		for(var attr in json) {
			var iTarget = json[attr];
			if(attr == "opacity"){
				var iCur = parseInt(getStyle(obj, attr)*100);
			}else{
				var iCur = parseInt(getStyle(obj, attr));
			}
			
			var iSpeed = (iTarget - iCur) / 7;
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			
			if(attr == "opacity"){
				obj.style.opacity = (iCur + iSpeed)/100;
				obj.style.filter = "alpha(opacity="+(iCur + iSpeed)+")";	
			}else{
				obj.style[attr] = iCur + iSpeed + "px";
			}
			
			
			//只要有一个达到目标值，定时器就会被清除,会导致部分属性没有达到目标值
			//所有属性都达到目标值时，清除定时器
			if(iCur != iTarget) { //假设是否成立由此判断
				flag = false;
			}
		}

		if(flag) { //如果假设成立，清除定时器
			clearInterval(obj.timer);
			if(fn) {
				fn();
			}
		}

	}, 20)
}

//获取属性值
function getStyle(obj, attr) {
	if(obj.currentStyle) {
		return obj.currentStyle[attr];
	}
	return getComputedStyle(obj, null)[attr];
}

		</script>


	
</html>

西瓜味白桃汽水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完美运动轮播图（无缝）

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 192px; height: 120px; border: 1px solid gray; margin: 0 auto; position: relative; overflow
复制链接

扫一扫