利用javaScript实现图片轮播器

最新推荐文章于 2021-05-01 14:32:25 发布

SnakeMoving

最新推荐文章于 2021-05-01 14:32:25 发布

阅读量1.2k

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/snakeMoving/article/details/53046396

版权

WEB 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

最近刚学js，就做了一个可以点击切换图片，和自动播放图片的小例子，献给需要的初学者

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/index.css">
	<script type="text/javaScript" src="js/index.js"></script>
</head>
<body>	
	<p>图片轮播器小实例</p>
	<div id="showPic">
		<img src="image/jpg-1.jpg" alt="" id="Pic">
	</div>
	<div  class="page">
		<div id="page1" class="page1">1</div>
		<div id="page2" class="page2">2</div>
	</div>
</body>
</html>

@charset "utf-8";
#Pic{
	width: 200px;
	height: 200px;
}
.page{
	width: 200px;
	height: 20px;
}
.page1{
	float: left;
}
.page2{
	float: left;
}
.page div{
	width: 20px;	
	line-height: 20px;
	border: 1px solid;
}
.page div:hover{
	background: blue;
}

//把整个js文件理解成一个类，然后count是一个静态变量；
var count = 1;

function showPictureByTime(){

	if(count<2){
		count++;
	}else{
		count=1;
	}

	var pic = document.getElementById("Pic");	

	pictureName = "image/jpg-"+count+".jpg";

	pic.src = pictureName;	

	setTimeout(showPictureByTime,2000);

}

function showPicture(pictureName,Count){
	count = Count;
	var pic = document.getElementById("Pic");	
	pic.src = pictureName;	
}



window.onload = function(){
	
				
		page = document.getElementById("page1");

		pictureName = "image/jpg-1.jpg";	
		page.addEventListener("mouseover",function(){
			showPicture(pictureName,1);
		},false);

		page2 = document.getElementById("page2");
		
		pictureName2 = "image/jpg-2.jpg";	
		page2.addEventListener("mouseover",function(){
			showPicture(pictureName2,2);
		},false);
		
		showPictureByTime();

	
	



}

代码有些不足，在图片自动切换和手动切换之间不是很融洽，有兴趣的朋友可以去改善它。

SnakeMoving

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用javaScript实现图片轮播器

最近刚学js，就做了一个可以点击切换图片，和自动播放图片的小例子，献给需要的初学者 Document 图片轮播器小实例 1 2 @charset "utf-8";#Pic{ width: 200px; height: 200px;}.page{ width: 200px; height: 20px;}.page
复制链接

扫一扫

专栏目录