简单轮播

最新推荐文章于 2025-09-08 17:59:21 发布

转载最新推荐文章于 2025-09-08 17:59:21 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5af81c5bf265da0b7b35ffd8

文章标签：

#javascript #ViewUI

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			*{ margin: 0;
			padding: 0;}
			.show-img-box{margin: 0 auto;
				width: 960px;
				overflow: hidden;
				
				}
			.show-img{width: 960px;
						display: flex;
						align-items: flex-start;
						transition: all 0.5S;}
			.show-img-button{ width: 160px;
								margin: 0 auto;
								position: relative;
								margin-top: -40px;
								}
			.show-img-button>button{
				border-radius:100%;
				line-height: 18px;
				border: none;
				opacity: 0.5;
				width: 24px;
				height: 24px;
			}
			
							
		</style>
	</head>
	<body>
		<div class="show-img-box">
			<div class="show-img" id="images">
				<img src="img/star5.jpg"/>
				<img src="img/star4.jpg"/>
				<img src="img/star3.jpg"/>
				<img src="img/star2.jpg"/>
				<img src="img/star1.jpg"/>
			</div>
		</div>
		<div class="show-img-button">
			<button id="star5">1</button>
			<button id="star4">2</button>
			<button id="star3">3</button>
			<button id="star2">4</button>
			<button id="star1">5</button>
		</div>

	</body>
	<script type="text/javascript">
		$(star5).on('click',function(){
			$(images).css({
				transform:'translateX(0)'
			})
		})
		$(star4).on('click',function(){
			$(images).css({
				transform:'translateX(-960px)'
			})
		})
		$(star3).on('click',function(){
			$(images).css({
				transform:'translateX(-1920px)'
			})
		})
		$(star2).on('click',function(){
			$(images).css({
				transform:'translateX(-2880px)'
			})
		})
		$(star1).on('click',function(){
			$(images).css({
				transform:'translateX(-3840px)'
			})
		})
	</script>
</html>
复制代码

1.0 优化版本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播</title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.show-img-box{
				width: 960px;
				margin: 0 auto;
				overflow: hidden;
			}
			.show-img{
				display: flex;
				align-items: flex-start;
				transition:all 0.5s;
					
            }
            .reds{ color:red;}
		</style>
	</head>
	<body>
		<div class="show-img-box" >
			<div class="show-img" id="images">
			<img src="img/star5.jpg" width="960" />
			<img src="img/star4.jpg" width="960"/>
			<img src="img/star3.jpg" width="960"/>
			<img src="img/star2.jpg" width="960"/>
			<img src="img/star1.jpg" width="960"/>
			</div>
			<span id="buttons">
				<span >第一张</span>
				<span>第二张</span>
				<span>第三张</span>
				<span>第四张</span>
				<span>第五张</span>
			</span>
			
		</div>
	</body>
	<script>
		var allbuttons=$('#buttons>span')
			console.log(allbuttons)

			for(let i=0;i<allbuttons.length;i++){
			$(allbuttons[i]).on('click',function(x){
			var  index=$(x.currentTarget).index()  //判断 被点击的按钮排行 由此算出图片位移距离
			console.log(index)
			var n=index*-960
			$('#images').css({
		 	transform: 'translateX('+ n +'px)'
		 })
		  //按钮添加样式
		  n=index
		 allbuttons.eq(n)
		 .addClass('reds')
		 .siblings('.reds').removeClass('reds')  
	})
}
//自动滚动代码
var s=0
size=allbuttons.length
allbuttons.eq(s%size).trigger('click')  //.on('click')
.addClass('reds')
.siblings('.reds').removeClass('reds')
//parent.children[n]
setInterval(()=>{
	s +=1
	allbuttons.eq(s%size).trigger('click') 
	.addClass('reds')
	.siblings('.reds').removeClass('reds')
},1500)
</html>

复制代码

1.1 mouseenter mouseleave

var s=0
size=allbuttons.length
allbuttons.eq(s%size).trigger('click')  //.on('click')
.addClass('reds')
.siblings('.reds').removeClass('reds')
//parent.children[n]
//闹钟
var timerId=setInterval(()=>{
	s +=1
	allbuttons.eq(s%size).trigger('click') 
	.addClass('reds')
	.siblings('.reds').removeClass('reds')
},1500)
$('.show-img-box').on('mouseenter',function(){
	window.clearInterval(timerId)
})
$('.show-img-box').on('mouseleave',function(){
		timerId=setInterval(()=>{
		s +=1
		allbuttons.eq(s%size).trigger('click') 
		.addClass('reds')
		.siblings('.reds').removeClass('reds')
	},1500)
})

复制代码

2.0 自动滚动 mouseenter/leave 代码优化

### HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播</title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div class="show-img-box" >
			<div class="show-img" id="images">
			<img src="img/star5.jpg" width="960" />
			<img src="img/star4.jpg" width="960"/>
			<img src="img/star3.jpg" width="960"/>
			<img src="img/star2.jpg" width="960"/>
			<img src="img/star1.jpg" width="960"/>
			</div>
			<span id="buttons">
				<span>第一张</span>
				<span>第二张</span>
				<span>第三张</span>
				<span>第四张</span>
				<span>第五张</span>
			</span>
			
		</div>
	</body>
	<script src="js/lunbo.js" type="text/javascript" charset="utf-8"></script>
	
</html>


### JQuery  JS


//获取所有按钮
var allbuttons=$('#buttons>span')
console.log(allbuttons)
//监听所有按钮
for(let i=0;i<allbuttons.length;i++){
	 //当点击这个按钮 添加样式
	$(allbuttons[i]).on('click',function(x){
		var  index=$(x.currentTarget).index()  //判断 被点击的按钮排行 由此算出图片位移距离
		 console.log(index)
		 var n=index*-960
		 $('#images').css({
		 	transform: 'translateX('+ n +'px)'
		 })
		 //激活俺就  添加样式
		 s=index
		 activeButton( allbuttons.eq(s))  //找到相应的 按钮 添加样式
	})
}
//自动播放

//获取第0个图片
var s=0
//播放0个
size=allbuttons.length
playSlide(s%size)
//parent.children[n]
//设置闹钟
var timerId=setTimer()
//没3秒钟出发一下按钮
function setTimer(){
		return setInterval(()=>{
		s +=1
		playSlide(s%size)
	},2000)
}

function playSlide(index){
	allbuttons.eq(index).trigger('click') 
}

function activeButton($button){
$button.addClass('spanActive')
	.siblings('.spanActive').removeClass('spanActive')
}
//当鼠标移入  砸掉闹钟
$('.show-img-box').on('mouseenter',function(){
	window.clearInterval(timerId)
})
//鼠标移除  设置闹钟
$('.show-img-box').on('mouseleave',function(){
		timerId=setTimer()
})


### CSS
.show-img-box{
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}
.show-img{
	display: flex;
	align-items: flex-start;
	transition:all 0.5s;
		
}
.buttons{ width: 290px;
	/*left: calc(50% + 0);
	transform: translateX(40%);*/
	height: 30px;
	margin: 0 auto;
	}

.reds{ color:red;}



复制代码