简单轮播图的实现

最新推荐文章于 2022-12-28 18:34:06 发布

孤独的天才

最新推荐文章于 2022-12-28 18:34:06 发布

阅读量954

点赞数

分类专栏：前端文章标签：简单轮播图实现

本文链接：https://blog.csdn.net/qq_40181206/article/details/89095668

版权

前端专栏收录该内容

34 篇文章 26 订阅

订阅专栏

简单轮播图的实现

现在一些网站上都会有轮播图的出现，对于我们看见的种类也有很多，说明自己对轮播图实现的思路也需要有一些掌握，今天就来看一下轮播图，并理清一下自己的思路

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				vertical-align: top;
			}
			
			.box {
				width: 730px;
				height: 454px;
				margin: 100px auto;
				border: 1px solid #ccc;
				padding: 5px;
			}
			
			.inner {
				width: 730px;
				height: 454px;
				position: relative;
				overflow: hidden;
			}
			
			ul {
				width: 1000%;
				position: absolute;
			}
			
			li {
				float: left;
			}
			
			.square {
				position: absolute;
				right: 10px;
				bottom: 10px;
			}
			
			span {
				display: inline-block;
				width: 20px;
				height: 20px;
				background-color: white;
				color: black;
				text-align: center;
				line-height: 20px;
				cursor: pointer;
			}
			
			span.current {
				color: #fff;
				background-color: orangered;
			}
		</style>
	</head>

	<body>
		<div class="box" id="box">
			<div class="inner">
				<ul>
					<li>
						<a href="#"><img src="images/1.jpg" /></a>
					</li>
					<li>
						<a href="#"><img src="images/2.jpg" /></a>
					</li>
					<li>
						<a href="#"><img src="images/3.jpg" /></a>
					</li>
					<li>
						<a href="#"><img src="images/4.jpg" /></a>
					</li>
					<li>
						<a href="#"><img src="images/5.jpg" /></a>
					</li>
					<li>
						<a href="#"><img src="images/6.jpg" /></a>
					</li>
				</ul>
				<div class="square">
					<span class="current">1</span>
					<span>2</span>
					<span>3</span>
					<span>4</span>
					<span>5</span>
					<span>6</span>
				</div>
			</div>
		</div>
		<script>
			var spanObjs = document.getElementsByTagName("span");
			var ulObj = document.getElementsByTagName("ul")[0];
			var imgWidth = document.getElementsByClassName("inner")[0].offsetWidth;
			for(var i = 0; i < spanObjs.length; i++) {
				spanObjs[i].setAttribute("index", i);
				spanObjs[i].onmouseover = function() {
					for(var j = 0; j < spanObjs.length; j++) {
						spanObjs[j].className = "";
					}
					this.className = "current";
					var index = this.getAttribute("index");
					animate(ulObj,-index*imgWidth);
					
				}
			}
			function animate(element,target){
			clearInterval(timeId);
				var timeId = setInterval(function() {
						var step = 10;
						var current = element.offsetLeft;
						step=current<target?step:-step;
						if(Math.abs(target-current)>Math.abs(step)) {
							current += step;
							element.style.left = current + "px";
						}else{
							element.style.left=target+"px";
							clearInterval(timeId);	
						}
					}, 20); 
			}
		</script>

	</body>

</html>

以上代码就是有关轮播图的实现，设计成一个函数，是为了以后其他元素对象想要进行移动时也可以进行调用，今天就到这里，也希望自己可以一天天的慢慢的提高，不怕嘲笑，加油

孤独的天才

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
简单轮播图的实现

简单轮播图的实现简单轮播图的实现现在一些网站上都会有轮播图的出现，对于我们看见的种类也有很多，说明自己对轮播图实现的思路也需要有一些掌握，今天就来看一下轮播图，并理清一下自己的思路<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></...
复制链接

扫一扫