JS之实现简单的图片轮播

最新推荐文章于 2024-05-01 02:45:00 发布

___Alive___

最新推荐文章于 2024-05-01 02:45:00 发布

阅读量372

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/YU_M_K/article/details/83346997

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

复制即可使用

1：代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>简单的图片轮播</title>
		<style type="text/css">
			/*图片下数字的整体样式*/
			#myUl li {
				list-style-type: none;
				display: inline-block;
				font-size: 24px;
			}
			/*当前数字的单个样式*/
			.current {
				display: inline-block;
				height: 30px;
				width: 30px;
				border-radius: 50%;
				text-align: center;
				border: 2px dotted red;
			}
			/*轮播图片的样式*/
			img{
				width:500px;
				height:350px;
				border-radius: 6px;
				box-shadow:2px 3px 2px grey;
			}
		</style>

	</head>
	<body>
		<img alt="" src="img/1.jpg" id="myImg">
		<ul id="myUl">
			<li class="current" onclick="selectImg(event);">1</li>
			<li onclick="selectImg(event);">2</li>
			<li onclick="selectImg(event);">3</li>
			<li onclick="selectImg(event);">4</li>
			<li onclick="selectImg(event);">5</li>
			<li onclick="selectImg(event);">6</li>
			<li onclick="selectImg(event);">7</li>
			<li onclick="selectImg(event);">8</li>
		</ul>
		
	    <script type="text/javascript">
			    // 1、周期性的切换图片，会有个指示器来指明当前是第几个图片
				var currentIndex = 0;//当前图片指示器
				var myImg = document.getElementById("myImg");
				var lis = document.getElementsByTagName("li");
				var intervalID;
				var imgs = [ "1.jpg", "2.jpg", "3.jpg","4.jpg", "5.jpg","6.jpg", "7.jpg", "8.jpg"];
				
				function chgImg() {
					currentIndex = (++currentIndex) % imgs.length;
					//切换图片
					 myImg.src = "img/" + imgs[currentIndex];
					//修改指示器的样式,在设置之前我们需要清空已有样式为默认。
					chgInditor();
				}
				
				intervalID = setInterval(chgImg, 2000);
				
				//2、当鼠标移动到图片上时，停止周期性切换图片
				myImg.onmouseover = function() {
					clearInterval(intervalID);
				}
				
				//3、当鼠标移开时，继续切换图片
				myImg.onmouseout = function() {
					intervalID = setInterval(chgImg, 2000);
				}
				
				//4、当单击某个图片时，直接切换到那张图片
//				for (var j = 0; j < lis.length; j++) {
//					lis[j].onclick = function(event) {
//						currentIndex = parseInt(event.target.innerHTML) - 1;//我希望从我单击的地方往下循环
//						myImg.src = "img/" + imgs[currentIndex];
//						chgInditor();
//					}
//				}
				
				//添加1,2,3,4,5,6,7,8的点击事件
				function selectImg(event){
					currentIndex = parseInt(event.target.innerHTML) - 1;//我希望从我单击的地方往下循环
					myImg.src = "img/" + imgs[currentIndex];
					chgInditor();
				}
				
				//添加1,2,3,4,5,6,7,8的边框样式
				function chgInditor() {
					for (var i = 0; i < lis.length; i++) {
						lis[i].className = "";
					}
					lis[currentIndex].className = "current";
		
				}
				
		</script>

	</body>
</html>

2：效果图

___Alive___

关注

1
点赞
踩
3

收藏

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

复制即可使用1：代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;简单的图片轮播&lt;/title&gt; &lt;style type="text/css"&gt; /*图片下数字的整
复制链接

扫一扫