JavaScript完成轮播图

最新推荐文章于 2024-06-29 23:13:31 发布
最新推荐文章于 2024-06-29 23:13:31 发布
阅读量710 收藏 5
点赞数 1
分类专栏： JavaScript JS面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongtaochi0464/article/details/89441319
版权

轮播图的思想

在这里插入图片描述
轮播图的思想,最简单的描述就是通过修改不可见框的left值,来实现滑动播放的效果。
这篇文章从三大步骤来写一下轮播图的实现。
(一)完成轮播图界面
(二)完成点击按钮切换图片的功能
(三)使用定时器完成轮播图的功能

完成轮播图的界面

不可见框

不可见框中应该把图片连成横向一排，像胶卷一样。

<body>
	<!-- #outer为不可见框部分 将所有的图片连成一排 -->
	<div id = "outer">
		<ul id = "imgList">
			<li><img src="img/1.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/2.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/3.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/4.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/5.jpg"/ style="width:500px;height:333px"></li>
		</ul>
	</div>
</body>

在body中，我们放入了五张照片，但现在的图片是成列显示的(li为块级元素)。我们进一步用CSS来进行样式的修改。

<style type="text/css">
*
		{
			margin:0;
			padding:0;
		}
		/*设置outer可见框的样式*/
		#outer
		{
			width:520px;
			height: 333px;
			margin: 50px auto;
			background-color: yellowgreen;
			padding:10px 0;
		}
		/*设置不可见框的样式 将图片排成一行*/
		#imgList
		{
			list-style: none; /*去除li自带的小圆点*/
			width:2600px;/*共有5张照片和margin10px--写死不好 后面用js动态修改*/
		}

		#imgList li
		{
			float:left;/*设置float后图片并没有成一行排列，原因是ul的大小被outer限制住了。*/
			margin:0 10px; 
		}
	</style>

进行设置后的页面如下所示：
在这里插入图片描述
这时我们存在一个问题，如果我们希望图片的数量是能够动态改变的话。在CSS样式中直接写死ul的宽度是不合理的。
这时我们可以借助js来实现动态修改ul的宽度

window.onload = function()
		{
			//设置imgList的宽度
			var imgList = document.getElementById("imgList");
			var imgArr = document.getElementsByTagName("img");
			imgList.style.width = 520*imgArr.length+"px";
		}

ul不可见框的左移

在这里插入图片描述
想要让图片实现轮播的效果，想象一下一个人将红色框往左拉，图片是不是就动起来了~想要实现这个效果，我们就需要left属性的帮助了！

		#outer
		{
			width:520px;
			height: 333px;
			margin: 50px auto;
			background-color: yellowgreen;
			padding:10px 0;
			position:relative;/*让ul能相对于可见框来偏移*/
		}
		/*设置不可见框的样式 将图片排成一行*/
		#imgList
		{
			list-style: none; /*去除li自带的小圆点*/
			/*width:2600px;*/
			/*共有5张照片和margin10px*/
			position:absolute;/*开启绝对定位，并为父元素开启相对定位*/
			left:-100px;
		}

我们先来看看设置了-100px偏移量的效果是怎样的。
在这里插入图片描述
效果很显而易见了吧~如果我们想要让第二张图片显示在可见框上，应该设置-520px的偏移量。具体的原理我想看到这儿应该就懂了。那么就可以让不可见框真正的不可见了。为outer设置overflow:hidden;属性。

创建导航按钮

对于轮播图来讲，都会有一些导航按钮来实现切换图片的功能。我们先在界面上将导航按钮创建出来~
其中html结构为：

<div id = "outer">
		<ul id = "imgList">
			<li><img src="img/1.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/2.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/3.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/4.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/5.jpg"/ style="width:500px;height:333px"></li>
		</ul>
		<!-- 创建导航按钮 -->
		<div id="navDiv">
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
		</div>
	</div>

新增的css样式为：

#navDiv
		{
			position: absolute;/*设置导航栏所在的位置*/
			bottom:15px;
			left: 197px;
		}

		#navDiv a
		{
			float:left;/*a为内联元素，应设置浮动*/
			width: 15px;
			height: 15px;
			background-color: red;
			margin: 0 5px;
			opacity: 0.5;/*设置半透明*/
		}
		
		#navDiv a:hover
		{
			background-color: black;/*设置鼠标移入效果*/
		}

页面的显示效果如下：
在这里插入图片描述
这时又存在一个问题了，如果我们希望图片的多少是动态的变化的话，我们也希望这个导航块的数量也是可以动态变化的。js又出来救场了~

	//设置导航按钮居中
	var imgDiv = document.getElementById("navDiv");
	var outer = document.getElementById("outer");
	navDiv.style.left=(outer.offsetWidth - navDiv.offsetWidth)/2+"px";

还有一个问题就是我们默认进入时显示的是第一张图片，这时第一个导航块应该是黑色的。这也需要js来救场~

	var index = 0;//设置图片的索引 默认第一张
	var allA = document.getElementsByTagName("a");
	allA[index].style.backgroundColor = "black";

到了这一步，(一)完成轮播图界面 算是完成了。下面是到这一步的所有代码。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>轮播图</title>
	<style type="text/css">
		*
		{
			margin:0;
			padding:0;
		}
		/*设置outer可见框的样式*/
		#outer
		{
			width:520px;
			height: 333px;
			margin: 50px auto;
			background-color: yellowgreen;
			padding:10px 0;
			position:relative;/*让ul能相对于可见框来偏移*/
			overflow: hidden;/*让不可见框真正的不可见*/
		}
		/*设置不可见框的样式 将图片排成一行*/
		#imgList
		{
			list-style: none; /*去除li自带的小圆点*/
			/*width:2600px;*//*共有5张照片和margin10px*/
			position:absolute;/*开启绝对定位，并为父元素开启相对定位*/
			left:-520px;/*每向左移动520px,可见框中就会显示下一张图片*/
		}

		#imgList li
		{
			float:left;/*设置float后图片并没有成一行排列，原因是ul的大小被outer限制住了。*/
			margin:0 10px; 
		}

		#navDiv
		{
			position: absolute;/*设置导航栏所在的位置*/
			bottom:15px;
			/*left: 197px;*//*通过js来动态设置居中*/
		}

		#navDiv a
		{
			float:left;/*a为内联元素，应设置浮动*/
			width: 15px;
			height: 15px;
			background-color: red;
			margin: 0 5px;
			opacity: 0.5;/*设置半透明*/
		}

		#navDiv a:hover
		{
			background-color: black;/*设置鼠标移入效果*/
		}
	</style>
	<script type="text/javascript">
		window.onload = function()
		{
			//设置imgList的宽度
			var imgList = document.getElementById("imgList");
			var imgArr = document.getElementsByTagName("img");
			imgList.style.width = 520*imgArr.length+"px";

			//设置导航按钮居中
			var imgDiv = document.getElementById("navDiv");
			var outer = document.getElementById("outer");
			navDiv.style.left=(outer.offsetWidth - navDiv.offsetWidth)/2+"px";

			var index = 0;//设置图片的索引 默认第一张
			var allA = document.getElementsByTagName("a");
			allA[index].style.backgroundColor = "black";

		}
	</script>
</head>
<body>
	<!-- #outer为可见框部分-->
	<div id = "outer">
		<ul id = "imgList">
			<li><img src="img/1.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/2.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/3.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/4.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/5.jpg"/ style="width:500px;height:333px"></li>
		</ul>
		<!-- 创建导航按钮 -->
		<div id="navDiv">
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
		</div>
	</div>
</body>
</html>

完成点击按钮切换图片的功能

实现点击按钮切换照片

想要实现这个功能，我们的重点在于：
(1)知道我们点击的按钮代表着第几张照片。
(2)将不可见框移动相应的偏移量，使得可见框中可以看到想要看到的图片。
在js中，添加这样一段代码。

for(var i = 0; i<allA.length;i++)
	{
		//为每一个超链接都添加一个num属性,记录下点击第几张图片。
		allA[i].num = i;
		allA[i].onclick=function()
		{
			index = this.num;
			//根据index设置偏移量，可以让可见框中显示图片。
			imgList.style.left = -520*index+"px"
		}
	}

这时已经可以实现点击按钮切换照片了。但是仍然是有些问题的，如：
*选中导航块后，该导航块的颜色应该改变。

选中图片，导航块颜色改变

我们定义了一个方法来实现这个功能，在设置所选导航块颜色为黑色前，应该遍历所有的导航块让其恢复红色。

	function setA(){
		//遍历全部的导航块，让其变红
		for(var i = 0; i<allA.length; i++)
		{
			allA[i].style.backgroundColor="";
			//不能直接设置为红色，因为内联样式优先级太高，会使hover失效。
		}
		//将选中的导航块变黑
		allA[index].style.backgroundColor="black";
	}

再在上面的单击响应事件中调用这个方法即可。

切换时添加动画效果

我们定义了一个move函数，用来实现图片以某个速度滑动的效果。将这个函数放到tool.js中，再引入。

function move(obj,attr,target,speed,callback)
		{
			
				//在每次开启定时器之前，关闭掉之前的定时器。
				clearInterval(obj.timer);
				//获取当前的left值
				var current = parseInt(getStyle(obj,attr));
				/*
					判断速度的正负，如果是从0->800移动，speed为正；
					如果是从800->0移动，speed为负。
				*/
				if(current > target)
				{
					speed = -speed;
				}
				//开启一个定时器，用来执行动画效果
				//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识。
				obj.timer = setInterval(function()
				{
					//获取box1的原来的left值
					var oldvalue = parseInt(getStyle(obj,attr));
					//在oldvalue的基础上增加。
					var newvalue = oldvalue + speed;
					//向左移动时，需要判断newvalue是否小于target
					//向右移动时，需要判断newvalue是否大于target					
					if((speed<0 && newvalue < target) || (speed>0 && newvalue > target))
					{
						newvalue = target;
					}
					//attr为变量，需要用[]的形式而不能是.的形式
					obj.style[attr] = newvalue + "px";
					//当元素移动到800px时停止执行动画
					if(newvalue == target)
					{
						clearInterval(obj.timer);
						//动画执行完毕，调用回调函数；
						callback && callback();
					}
				},30);
		}

修改js中的代码，调用move函数实现缓慢切换图片
这时，完整的页面代码是这样的：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>轮播图</title>
	<style type="text/css">
		*
		{
			margin:0;
			padding:0;
		}
		/*设置outer可见框的样式*/
		#outer
		{
			width:520px;
			height: 333px;
			margin: 50px auto;
			background-color: yellowgreen;
			padding:10px 0;
			position:relative;/*让ul能相对于可见框来偏移*/
			overflow: hidden;/*让不可见框真正的不可见*/
		}
		/*设置不可见框的样式 将图片排成一行*/
		#imgList
		{
			list-style: none; /*去除li自带的小圆点*/
			/*width:2600px;*//*共有5张照片和margin10px*/
			position:absolute;/*开启绝对定位，并为父元素开启相对定位*/
			/*left:-520px;*//*每向左移动520px,可见框中就会显示下一张图片*/
		}

		#imgList li
		{
			float:left;/*设置float后图片并没有成一行排列，原因是ul的大小被outer限制住了。*/
			margin:0 10px; 
		}

		#navDiv
		{
			position: absolute;/*设置导航栏所在的位置*/
			bottom:15px;
			/*left: 197px;*//*通过js来动态设置居中*/
		}

		#navDiv a
		{
			float:left;/*a为内联元素，应设置浮动*/
			width: 15px;
			height: 15px;
			background-color: red;
			margin: 0 5px;
			opacity: 0.5;/*设置半透明*/
		}

		#navDiv a:hover
		{
			background-color: black;/*设置鼠标移入效果*/
		}
	</style>
	<script type="text/javascript" src="./tool.js"></script>
	<script type="text/javascript">
		window.onload = function()
		{
			//设置imgList的宽度
			var imgList = document.getElementById("imgList");
			var imgArr = document.getElementsByTagName("img");
			imgList.style.width = 520*imgArr.length+"px";

			//设置导航按钮居中
			var imgDiv = document.getElementById("navDiv");
			var outer = document.getElementById("outer");
			navDiv.style.left=(outer.offsetWidth - navDiv.offsetWidth)/2+"px";

			var index = 0;//设置图片的索引 默认第一张
			var allA = document.getElementsByTagName("a");
			allA[index].style.backgroundColor = "black";

			for(var i = 0; i<allA.length;i++)
			{
				//为每一个超链接都添加一个num属性,记录下点击第几张图片。
				allA[i].num = i;
				allA[i].onclick=function()
				{
					index = this.num;
					//根据index设置偏移量，可以让可见框中显示图片。
					// imgList.style.left = -520*index+"px"
					setA();
					//使用move函数切换图片
					move(imgList,"left",-520*index,20,function(){

					})
				}
			}

			//创建一个方法用来设置选中的a
			function setA(){
				//遍历全部的导航块，让其变红
				for(var i = 0; i<allA.length; i++)
				{
					allA[i].style.backgroundColor="";
					//不能直接设置为红色，因为内联样式优先级太高，会使hover失效。
				}
				//将选中的导航块变黑
				allA[index].style.backgroundColor="black";
			}
		}
	</script>
</head>
<body>
	<!-- #outer为可见框部分-->
	<div id = "outer">
		<ul id = "imgList">
			<li><img src="img/1.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/2.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/3.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/4.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/5.jpg"/ style="width:500px;height:333px"></li>
		</ul>
		<!-- 创建导航按钮 -->
		<div id="navDiv">
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
		</div>
	</div>
</body>
</html>

使用定时器完成轮播图的功能

使用定时器，开启定时移动图片

为了实现这个功能，我们来创建一个函数用来开启自动切换图片。(通过定时器的帮助。)

	function autoChange()
	{
		//开启定时器，用于定时去切换图片
		setInterval(function(){
			index++;
			//执行动画，切换图片
			move(imgList,"left",-520*index,20,function(){
						
			})
		},3000);
	}

我们可以看到，调用这个函数后，图片可以实现自动切换。但存在着两个问题：
(1)图片虽然切换了，但是导航块的颜色没有改变。
(2)图片不停的左移，移到index为最后一张图片时无法回到第一张图片。索引一直在自增。

我们先来解决第一个问题，我们想到了move函数最后一个参数是一个回调函数。这个回调函数可以让我们在动画执行完后，执行一些操作。我们在回调函数中执行之前定义的setA()方法。就可以轻松的解决(1)问题啦~
我们再来思考一下第二个问题，想要实现轮播的功能，当然不能仅仅从第一张图片轮播到最后一张图片，还需要能够从最后一张图片播到第一张图片。这时我们就想，能不能加一个判断，让index==最后一张图片时，回到第一张图片呢？于是我们将上面的方法改成：

function autoChange()
	{
		//开启定时器，用于定时去切换图片
		setInterval(function(){
			index++;
			index=index%imgArr.length;
			//执行动画，切换图片
			move(imgList,"left",-520*index,20,function(){
				setA();	
			})
		},3000);
	}

这时，更加鬼畜的事情发生了，虽然图片从最后一张到第一张了，但是呈现的效果是“嗖”的一下从最后一张->倒数第二张->……->第二张->第一张这样切换的。显然不符合我们的要求。

解决从最后一张到第一张图的切换

原理图如下，我们在不可见框ul的最后一张图后面，添加第一张图片。当我们切换到最后一张照片时，下一张应该移到第一张照片。当移稳后，我们瞬间将整个不可见框框移到头部。实现视觉上的最后一张到第一张图片的平稳切换。
在这里插入图片描述
我们现在最后一张图片后面增加第一张图片,html结构变为

<ul id = "imgList">
			<li><img src="img/1.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/2.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/3.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/4.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/5.jpg"/ style="width:500px;height:333px"></li>
			<!-- 向最后一张图的后面补上第一张图片 -->
			<li><img src="img/1.jpg"/ style="width:500px;height:333px"></li>
		</ul>

这时，还需要去设定setA()方法，使图片移动到最后一张(1)图片的时候，第一个导航块出现被选中的效果。
这时~当index为最后一张(1)图片，再立刻设置偏移量，使整个不可见框变为初始那样。

function setA()
{
	if(index>=imgArr.length - 1)
	{
		index=0;
		//实现一瞬间从最后一张照片跳回第一张照片
		imgList.style.left=0;
	}
	//遍历全部的导航块，让其变红
	for(var i = 0; i<allA.length; i++)
	{
		allA[i].style.backgroundColor="";
		//不能直接设置为红色，因为内联样式优先级太高，会使hover失效。
	}
	//将选中的导航块变黑
	allA[index].style.backgroundColor="black";
}

这样就图片就能实现从轮播的平缓切换啦~

吹毛求疵

其实代码如上那样修改就已经达到了我们轮播图的效果了，但是我们要更加吹毛求疵一点。由于我们实现了“轮播”和“点击切换图片”的效果。所以这两个动画是有可能“打架”的。我们应该对代码进行进一步的优化。
即，当我们“点击切换图片”的时候，“轮播”这个定时器应当关闭，避免“打架”。我们修改一下“点击切换图片”的方法

allA[i].onclick=function()
{
	//当“点击切换图片时”，关闭“轮播功能”
	clearInterval(timer)
	index = this.num;
	//根据index设置偏移量，可以让可见框中显示图片。
	// imgList.style.left = -520*index+"px"
	setA();
	//使用move函数切换图片
	move(imgList,"left",-520*index,20,function(){
		//当切换图片成功后，再次开启自动切换。
		autoChange();
	})
}

这样功能也得到进一步优化啦~

最终代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>轮播图</title>
	<style type="text/css">
		*
		{
			margin:0;
			padding:0;
		}
		/*设置outer可见框的样式*/
		#outer
		{
			width:520px;
			height: 333px;
			margin: 50px auto;
			background-color: yellowgreen;
			padding:10px 0;
			position:relative;/*让ul能相对于可见框来偏移*/
			overflow: hidden;/*让不可见框真正的不可见*/
		}
		/*设置不可见框的样式 将图片排成一行*/
		#imgList
		{
			list-style: none; /*去除li自带的小圆点*/
			/*width:2600px;*//*共有5张照片和margin10px*/
			position:absolute;/*开启绝对定位，并为父元素开启相对定位*/
			/*left:-520px;*//*每向左移动520px,可见框中就会显示下一张图片*/
		}

		#imgList li
		{
			float:left;/*设置float后图片并没有成一行排列，原因是ul的大小被outer限制住了。*/
			margin:0 10px; 
		}

		#navDiv
		{
			position: absolute;/*设置导航栏所在的位置*/
			bottom:15px;
			/*left: 197px;*//*通过js来动态设置居中*/
		}

		#navDiv a
		{
			float:left;/*a为内联元素，应设置浮动*/
			width: 15px;
			height: 15px;
			background-color: red;
			margin: 0 5px;
			opacity: 0.5;/*设置半透明*/
		}

		#navDiv a:hover
		{
			background-color: black;/*设置鼠标移入效果*/
		}
	</style>
	<script type="text/javascript" src="./tool.js"></script>
	<script type="text/javascript">
		window.onload = function()
		{
			//设置imgList的宽度
			var imgList = document.getElementById("imgList");
			var imgArr = document.getElementsByTagName("img");
			imgList.style.width = 520*imgArr.length+"px";

			//设置导航按钮居中
			var imgDiv = document.getElementById("navDiv");
			var outer = document.getElementById("outer");
			navDiv.style.left=(outer.offsetWidth - navDiv.offsetWidth)/2+"px";

			var index = 0;//设置图片的索引 默认第一张
			var allA = document.getElementsByTagName("a");
			allA[index].style.backgroundColor = "black";

			for(var i = 0; i<allA.length;i++)
			{
				//为每一个超链接都添加一个num属性,记录下点击第几张图片。
				allA[i].num = i;
				allA[i].onclick=function()
				{
					//当“点击切换图片时”，关闭“轮播功能”
					clearInterval(timer)
					index = this.num;
					//根据index设置偏移量，可以让可见框中显示图片。
					// imgList.style.left = -520*index+"px"
					setA();
					//使用move函数切换图片
					move(imgList,"left",-520*index,20,function(){
						//当切换图片成功后，再次开启自动切换。
						autoChange();
					})
				}
			}
			//自动切换图片
			autoChange()
			
			//创建一个方法用来设置选中的a
			function setA(){
				if(index>=imgArr.length - 1)
				{
					index=0;
					//实现一瞬间从最后一张照片跳回第一张照片
					imgList.style.left=0;
				}
				//遍历全部的导航块，让其变红
				for(var i = 0; i<allA.length; i++)
				{
					allA[i].style.backgroundColor="";
					//不能直接设置为红色，因为内联样式优先级太高，会使hover失效。
				}
				//将选中的导航块变黑
				allA[index].style.backgroundColor="black";
			}
			var timer;
			//创建一个函数，用来开启自动切换图片
			function autoChange()
			{
				//开启定时器，用于定时去切换图片
				timer = setInterval(function(){
					index++;
					index=index%imgArr.length;
					//执行动画，切换图片
					move(imgList,"left",-520*index,20,function(){
						setA();	
					})
				},3000);
			}
		}
	</script>
</head>
<body>
	<!-- #outer为可见框部分-->
	<div id = "outer">
		<ul id = "imgList">
			<li><img src="img/1.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/2.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/3.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/4.jpg"/ style="width:500px;height:333px"></li>
			<li><img src="img/5.jpg"/ style="width:500px;height:333px"></li>
			<!-- 向最后一张图的后面补上第一张图片 -->
			<li><img src="img/1.jpg"/ style="width:500px;height:333px"></li>
		</ul>
		<!-- 创建导航按钮 -->
		<div id="navDiv">
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
		</div>
	</div>
</body>
</html>

tool.js文件

function move(obj,attr,target,speed,callback)
{
	//在每次开启定时器之前，关闭掉之前的定时器。
	clearInterval(obj.timer);
	//获取当前的left值
	var current = parseInt(getStyle(obj,attr));
	/*
		判断速度的正负，如果是从0->800移动，speed为正；
		如果是从800->0移动，speed为负。
	*/
	if(current > target)
	{
		speed = -speed;
	}
	//开启一个定时器，用来执行动画效果
	//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识。
	obj.timer = setInterval(function()
	{
		//获取box1的原来的left值
		var oldvalue = parseInt(getStyle(obj,attr));
		//在oldvalue的基础上增加。
		var newvalue = oldvalue + speed;
		//向左移动时，需要判断newvalue是否小于target
		//向右移动时，需要判断newvalue是否大于target					
		if((speed<0 && newvalue < target) || (speed>0 && newvalue > target))
		{
			newvalue = target;
		}
		//attr为变量，需要用[]的形式而不能是.的形式
		obj.style[attr] = newvalue + "px";
		//当元素移动到800px时停止执行动画
		if(newvalue == target)
		{
			clearInterval(obj.timer);
			//动画执行完毕，调用回调函数；
			callback && callback();
		}
	},30);
}
我是刺猬姑娘
关注
专栏目录
js实现轮播图的完整代码
10-18
主要为大家详细介绍了js实现轮播图的完整代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript轮播图片的实现
06-07
使用第三方Swiper插件写的手机端的轮播效果图；使用第三方Swiper插件写的手机端的轮播效果图；
原生js实现轮播图基本功能——左进右出
最新发布
m0_72684019的博客
06-29 228
【代码】原生js实现轮播图基本功能——左进右出
JS实现图片轮播效果(绝对可用）
03-30
绝对可用，利用javasScript实现图片轮播，具有1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换 3.底下小按钮切换 等功能
使用JavaScript完成网易云轮播图效果+图片
03-20
使用JavaScript完成网易云轮播图效果
JavaScript实现轮播图效果代码实例
10-16
主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
纯js代码实现轮播图
03-13
纯js代码实现轮播图
JavaScript实现图片轮播图
09-09 201
<!DOCTYPE html><html> <head> <script > var time; function init(){ //设置定时操作 time=setInterval("show()",0); //3秒执行一次 setInterval("show1()",1000); } var nu...
js实现图片轮播
qq_43194919的博客
04-30 214
主要思路：用li存储图片并用绝对定位将图片重叠在一起，要将哪张图片显示在最上面就用js方法对其添加一个类，设置z-index属性；最关键的是图片的index，图片的轮播，右下角图标的改变和点击图标跳转到相应图片也是通过改变index来实现的。 主要框架： <body> <div class="wrap"> <ul class="list"&gt...
JS实现轮播图的三种简单方法。
热门推荐
m0_67392409的博客
03-11 1万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
使用js来实现轮播图
CQXXTXX的博客
12-31 314
使用js制作轮播图
使用JS和html5实现图片轮播
06-13
点击顺序轮播按钮或倒序轮播按钮可实现每秒顺序轮播一张图片或每秒倒序轮播一张图片，点击停止轮播按钮可停止当前轮播形式。不可连续按两次顺序轮播按钮或倒序轮播按钮，但可以按完顺序轮播按钮，再按倒序轮播按钮，反过来亦可。
JavaScript实现轮播图特效
10-15
在本文中，我们将探讨如何使用JavaScript实现一个基本的轮播图特效。轮播图是一种常见的网页元素，用于展示多张图片或内容，并通过自动播放和用户交互来循环显示。以下是实现这个功能的关键知识点： 1. **HTML 结构...
原生JavaScript实现轮播图效果
05-06
本示例将深入探讨如何使用原生JavaScript来实现一个功能完备的轮播图效果，无需依赖任何外部库如jQuery或其他框架。下面我们将详细讨论实现这个功能所需的关键知识点。 1. **HTML结构**： - 轮播图的基本结构通常...
【JavaScript】轮播图的实现
2202_75462083的博客
12-07 601
前端JavaScript轮播图的实现
轮播图JS代码
weixin_47675736的博客
04-22 2456
<div class="wrapper"> <ul class="sliderPage"> <li><img src="image/1.jpg" alt=""></li> <li><img src="image/2.jpg" alt=""></li> <li><img src="image/3.jpg" al
js实现轮播图
qq_65528486的博客
08-09 1637
具有以下功能：1.自动图片轮播 2.鼠标移入当前页面暂停，移出继续播放 3.底下小按钮切换图片。
JavaScript实现轮播图
再中二也会被现实打败
10-16 240
JavaScript实现轮播图
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值