js点击切换图片

最新推荐文章于 2025-06-05 13:05:28 发布

大可&不必

最新推荐文章于 2025-06-05 13:05:28 发布

阅读量4.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： js点击切换图片

本文链接：https://blog.youkuaiyun.com/style201904/article/details/92003659

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个带有自动滚动、鼠标悬停暂停及指示器切换功能的轮播图组件。通过设置元素的定位、尺寸和过渡效果，以及利用定时器和事件监听器，实现了流畅的图片轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.content{
				width: 390px;
				height: 300px;
				position: relative;
				margin: auto;
				overflow: hidden;
			}
			.imgContent{
				position: absolute;
				width: 1950px;
				left: 0px;
			}
			img{
				float: left;
				width: 390px;
				height: 300px;
			}
			p,.box{
				position: absolute;
				width: 100%;
			}
			p{
				background-color: rgba(0,0,0,0.5);
				left: 0;
				top: 0;
				height: 30px;
				text-align: center;
				line-height: 30px;
				color: white;
				z-index: 2;
			}
			.box{
				bottom: 10px;
				text-align: center;
			}
			.box span{
				display: inline-block;
				background-color: pink;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				cursor: pointer;
				color: white;
			}
			.spanActive{
				background-color: red !important;
			}
			
		</style>
	</head>
	<body>
		<div class="content">
			<p>美女1</p>
			<div class="imgContent">
				<img src="img/1.jpg"/>
				<img src="img/2.jpg"/>
				<img src="img/3.jpg"/>
				<img src="img/4.jpg"/>
				<img src="img/1.jpg"/>
			</div>
			<div class="box">
				<span class="spanActive">1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
			</div>
		</div>
	</body>
	<script src="js.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var content = document.getElementsByClassName('content')[0];
		var imgContent = document.getElementsByClassName('imgContent')[0];
		var spanArr = document.getElementsByClassName('box')[0].getElementsByTagName('span');
		var timer;
		var ind = 0;
		//0 0px
		//1 -390px
		//2 -780px
		//3 -1170px
		timer = setInterval(autoNext,2000)
		
		//鼠标移入的事件
		content.onmouseover = function () {
			clearInterval(timer);
		}
		
		//鼠标移出的事件
		content.onmouseout = function () {
			timer = setInterval(autoNext,2000);
		}
		
		for(var i=0;i<spanArr.length;i++){
			spanArr[i].index = i;
			spanArr[i].onclick = function () {
				move(imgContent, 'left', 30, -390*this.index)
				
				for(var j=0;j<spanArr.length;j++){
					spanArr[j].className = '';
				}
				this.className = 'spanActive';
				ind = this.index;
				
			}
		}
		
		function autoNext() {
			ind = ind + 1;
			
			//滚到第5张图片的时候 ind=4
			if(ind == 5){
				//当图片已经到达最后一张  把图片容器的位置放到 第一张
				imgContent.style.left = '0px';
				ind = 1;
			}
			var n = ind;
			move(imgContent, 'left', 30, -390*ind);
			
			if(ind == 4){
				n = 0;
			}
			for(var j=0;j<spanArr.length;j++){
				spanArr[j].className = '';
			}
			spanArr[n].className = 'spanActive';
			
		}
		
		
		
	</script>