Jquery轮播图

疯掉就疯掉吧

已于 2023-03-02 08:08:43 修改

阅读量106

点赞数

分类专栏： web前端开发文章标签：前端 html javascript jquery css

于 2023-02-23 10:25:59 首次发布

本文链接：https://blog.csdn.net/qq_62512326/article/details/129176215

版权

web前端开发专栏收录该内容

25 篇文章 3 订阅

订阅专栏

文章目录

JQUERY轮播图
可以实现自动滑动

JQUERY轮播图

1.建文件夹

HTML CSS JS 和图片
在这里插入图片描述

2.引入CSS JS（自己的JS和外部）

在这里插入图片描述

3.HTML源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="demo.css" type="text/css">
		<script type="text/javascript" src="../jquery-3.6.3.js"></script>
		<script type="text/javascript" src="demo.js"></script>
		
	</head>
	<body>
		<!-- <button type="button" id="btn">滑动</button>
		<br />
		<img id="myimg" src="images/suho.jpg" width="500px"/> -->
		<div class="viewBox">
			<ul>
				<li>
					<img src="images/suho.jpg"/>
				</li>
				<li>
					<img src="images/suho2.jpg"/>
				</li>
				<li>
					<img src="images/suho3.jpg"/>
				</li>
				<li>
					<img src="images/suho4.jpg"/>
				</li>
			</ul>
			<div class="bots">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<!-- 左右箭头 -->
			<div class="leftArr"><</div>
			<div class="rightArr">></div>
		</div>
	</body>
</html>

4.css源代码

*{
	margin: 0;
	padding: 0;
}
.viewBox{
	width: 400px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	height: 300px;
}
.viewBox>ul{
	list-style: none;
	width: 400%;
	position: relative;
	
}
	
.viewBox>ul>li{
	float: left;
}
	
.viewBox>ul>li>img{
	width: 400px;
	height: 300px;
}
.viewBox>.bots{
	position: absolute;
	bottom: 10px;
	left: 45%;
	
}
.viewBox>.bots>span{
	width: 15px;
	height: 15px;
	background: rgba(255,255,255,.6);
	display: inline-block;
	border-radius: 50%;
}
.viewBox>.bots>span.active{
	background:rgba(255,0,0,.8);
}
.viewBox>.leftArr,.viewBox>.rightArr{
	color: gainsboro;
	position: absolute;
	top: 30%;
	font-size: 96px;
	font-weight: bold;
}
.viewBox>.rightArr{
	right: 0;
}

5.JS源代码

$(function(){
 //控制点被激活
 var num=0;
 var timer=setInterval(function() {
  //attr()获取和设置属性
  //removeAttr()移除属性
  //eq()
  $(".bots>span").removeAttr("class").eq(num).attr("class","active");
  $(".viewBox>ul").animate({
   "left":"-"+num*400+"px",
  },1000)
  
  num++;
  if(num>3){
   num=0
  }
 }, 2000)
})