基于jQuery的轮播图效果实现

终将老去的穷苦程序员

已于 2022-11-22 09:40:10 修改

阅读量224

点赞数

分类专栏：技术文章标签： jquery javascript 前端

于 2022-11-22 09:39:10 首次发布

本文链接：https://blog.csdn.net/r081r096/article/details/127976563

版权

技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<style type="text/css">
		*{
			margin: 0px;
			padding:0px;
		}
		.item{
			float: right;margin-right: 15px;
			/*color: transparent;*/
			text-align: center;
			background: white;
			margin-top: 5px;
			margin-bottom: 5px;
			width: 22px;
			height: 22px;
			display: inline-block;
		}
		.items{
			background: RGBA(145, 35, 5, 1)!important;
			color: white;
		}
	</style>
</head>
<body>

	<div id="bg" style="width: 100%;height: 100vh;background-image: url(p0.jpeg);background-size: cover;position: relative;">
		<img id="zuo" src="左.png" style="float: left;margin-top: 50vh;margin-left: 15px">
		<img id="you" src="右.png" style="float: right;margin-top: 50vh;margin-right: 15px">
		<div style="position: absolute;bottom: 0px;width: 100%;background: RGBA(246, 246, 246, 0.5);">
			<span class="item " id="7">7</span>
			<span class="item " id="6">6</span>
			<span class="item " id="5">5</span>
			<span class="item " id="4">4</span>
			<span class="item" id="3">3</span>
			<span class="item" id="2">2</span>
			<span class="item items" id="1">1</span>
		</div>
	</div>
	
	<script type="text/javascript">
		var c = 0 
		$('#zuo').click(function(){
			c=c-1
			if (c<0) {
				c=7
			}
			$('#bg').css('background-image','url(p'+c+'.jpeg)')

			$('.item').each(function(i,o){
				$(o).removeClass('items')
			})
			$('#'+(c+1)).addClass('items')
		})
		$('#you').click(function(){
			c=c+1
			if (c>7) {
				c=0
			}
			$('#bg').css('background-image','url(p'+c+'.jpeg)')
			$('.item').each(function(i,o){
				$(o).removeClass('items')
			})
			$('#'+(c+1)).addClass('items')

		})

		$('.item').click(function(){
			$('.item').each(function(i,o){
				$(o).removeClass('items')
			})
			$(this).addClass('items')
			c=parseInt($(this).attr('id'))-1
			$('#bg').css('background-image','url(p'+c+'.jpeg)')

		})

		setInterval(function(){
			c=c+1
			if (c>3) {
				c=0
			}
			$('#bg').css('background-image','url(p'+c+'.jpeg)')
			$('.item').each(function(i,o){
				$(o).removeClass('items')
			})
			$('#'+(c+1)).addClass('items')
		},3000)

		$('#bo').click(function(){
			$('#play')[0].play()
		})
				$('#ting').click(function(){
			$('#play')[0].pause()
		})

	</script>
</body>
</html>