js之图片轮播

最新推荐文章于 2023-11-15 10:47:08 发布

Vison_

最新推荐文章于 2023-11-15 10:47:08 发布

阅读量124

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Vison_/article/details/103462417

版权

js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

css

<style>
			.bigbox{
				width: 800px;
				height: 400px;
				margin: 0 auto;
				position: relative;
			}
			.bigbox img{
				width: 100%;
				height: 100%;
			}
			.btns{
				position: absolute;
				right: 100px;
				bottom:50px;
			}
			.btn{
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				color: #000000;
				background-color: #FFFFFF;
				float: left;
				margin-right:10px;
			}
			.btn-active{
				background-color:#000000;
				color: #FFFFFF;
			}
		</style>

<div class="bigbox" >
			<img src="../Demon/image/5.jpg" >
			<div class="btns">
			</div>
		</div>
		<script src="jquery-3.1.1.min.js"></script>

<script>
			const imgs=['../Demon/image/6.jpg','../Demon/image/7.jpg','../Demon/image/5.jpg',]
			//每隔1秒,换一张图片(改变图片的src),图片循环轮转
			for(let j=0;j<imgs.length;j++){
				$('.btns').append($('<div class="btn">'+(j+1)+'</div>'))
			}
					var i=0;
					function change(num){
						$(".bigbox img").attr("src",imgs[num])
						$('.btn').removeClass('btn-active')//删除class名
						$('.btn:eq('+num+')').addClass('btn-active')//添加class名
					}
					function intervalFun(){
						i++;
							if(i>=imgs.length){
								i=0
							} 
						change(i)
					}
					$('.btn:eq(0)').addClass('btn-active')
					let timer=setInterval(()=>{
							intervalFun()
						},2000)
					$('.btn').on('mouseenter',function(){
						clearInterval(timer)
						change(Number($(this).html())-1)
					})
					$('.btn').on('mouseleave',function(){
						
					})
		</script>