前端-css-js，简易轮播图

tl110110tl

已于 2022-06-27 21:49:21 修改

阅读量1.3k

点赞数

分类专栏：前端文章标签： javascript css

于 2022-04-05 21:48:11 首次发布

本文链接：https://blog.csdn.net/tl110110tl/article/details/123978137

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

先把代码列出，详情注意事项等有空再说。可以直接百度外链图片试试效果

1.轮播图的思想：是将所有要轮播的图片，横向放到一行【纵向放到一列】的box中，然后让这个bos定位，改变这个box的left【或者top】值，从而实现换图效果。

2.第一张图被复制到了最后一张图后面。（也就是说轮播图中虽然表面看有5张，但实际有6张）

mspaint画的向上滚动的图的逻辑

（1）到（2）正常改变盒子top值

（2）到（3）因为多加了一张图1，所以最后一张图滑动到第一张图看起来很丝滑【因为这里实际是滑动到了下一张，而不是退回到第一张】

（3）到（4）直接改变盒子的top值，一瞬间完成，因为两张图长得一毛一样，所以眼睛根本分辨不出来。

最后就这样循环，可以造成一直在滚动图片的假象。

方法animate是jq中经常用到的方法。这里用js仿写个简单的，就是让盒子的left值，每次加（减）10px，直到盒子的位置走到下一张图的距离。【做好边界条件判断即可】

3.这里，大图的index和小circle的index，最好分开判断，我这里好像有点，不太好-0 -。老师是分开的，各判断各的。

4.像大图上有左右箭头的实现方式，就是让盒子目标位置+-图片宽度，盒子移动时判断好边界就行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{margin: 0;padding: 0;}
	img{
		vertical-align: top;
		width: 500px;
		height: 200px;
	}
	ul , ol {
		list-style: none;
		position: absolute;
	}
	.banner{
		width: 500px;
		height: 200px;
		margin: 100px auto;
		padding: 10px;
		border: 1px solid #000;
		position: relative;
	}
	.innerbanner {
		width: 500px;
		height: 200px;
		overflow: hidden;
		position: relative;
	}
	ul{
		width: 1000%;
		top:0;
		left:0;
	}
	ul li, ol li {
		float: left;
	}
	ol{
		right: 20px;
		bottom: 20px;
	}
	ol li {
		width: 30px;
		height: 20px;
		background-color: #ccc;
		cursor: pointer;
		margin-right: 5px;
		text-align: center;
		line-height: 20px;
	}
	ol li.current{
		background-color: yellow;
	}

	</style>
	<script type="text/javascript">
	onload = function(){
		var ol = document.getElementById("circle");
		var innerbanner = document.getElementsByClassName("innerbanner")[0];
		var ul = innerbanner.children[0];
		ul.index = 0;
		var ulLis = ul.children;
		var autoTimer = 0;
		for (var i = 0; i < ulLis.length; i++) {
			var li = document.createElement("li");
			if(i==0){
				li.className= "current";
			}
			li.innerHTML = i+1;
			li.index = i;
			li.onmouseover = function(){
				clearInterval(autoTimer);
				olindex(this.index);
				ul.index = this.index;
				animateX(ul,-1*this.index*ul.children[0].offsetWidth,20);
			}
			li.onmouseout = function(){
				autoTimer = setInterval(autoBanner, 1000);
			}
			ol.appendChild(li);
		};
		ul.appendChild(ul.children[0].cloneNode(true));


		function animateX (obj , target, speed){
			speed = target > obj.offsetLeft? speed : speed *-1;
			clearInterval(obj.timer);
			obj.timer = setInterval(function(){
				obj.style.left = obj.offsetLeft+speed +"px";
				// console.log(target +"_"+obj.offsetLeft);
				if(Math.abs(target-obj.offsetLeft) <= Math.abs(speed) ){
					clearInterval(obj.timer);
					obj.style.left = target +"px";
				}
			}, 10)
		}

		function olindex(currentindex){
			var ollis = ol.children;
			for (var j = 0; j < ollis.length; j++) {
				ollis[j].className = "";
			}
			ollis[currentindex].className = "current";
		}

		function autoBanner(){
			if(!ul.index){
				ul.index = 0;
			}
			ul.index = ul.index+1;

			if(ul.index >= ul.children.length){
				ul.index = 1;
				ul.style.left = 0;
			}
			if(ul.index ==ul.children.length-1){
				olindex(0);
			}else{
				olindex(ul.index);
			}
			animateX(ul,-1*ul.index*ul.children[0].offsetWidth,20);
		}

		autoTimer = setInterval(autoBanner, 1000);


	}
	</script>
</head>
<body>
	<div class="banner">
		<div class="innerbanner">
			<ul>
				<li><img src="1.jpg" alt="" /></li>
				<li><img src="2.jpg" alt="" /></li>
				<li><img src="3.jpg" alt="" /></li>
				<li><img src="4.jpg" alt="" /></li>
				<li><img src="5.jpg" alt="" /></li>
			</ul>
		</div>
		<ol class="circle" id="circle"></ol>
	</div>
</body>
</html>