手写轮播图

最新推荐文章于 2024-01-11 17:17:13 发布

jtniu123

最新推荐文章于 2024-01-11 17:17:13 发布

阅读量206

点赞数 2

文章标签：轮播图

本文链接：https://blog.csdn.net/jtniu123/article/details/82850880

版权

css+jquery实现轮播图效果

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style>
h1,h4{
	text-align:center;
	font-family: "华文行楷";
}

div {
	border: none; 
	height: 200px;
	overflow-x: scroll;
	/* 内容会被裁剪，会以滚动条显示 */
	overflow-y: hidden; /* 超出内容不可见 */
	white-space: nowrap;
	width: 400px; /* 不换行 */
	margin:0 auto;
}

img {
	border: none;
	width: 400px;
	height: 200px;
}

 div::-webkit-scrollbar {
	display: none;
} 
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
var wid=0;
	 $(function(){
		setInterval(() => {
			$("div").scrollLeft(400+wid);
			wid+=400;
			if(wid>=1200){
				wid=-400;
			}
		}, 1000);
		}) 
</script>

</head>
<body>
	<h1>手写轮播图</h1>
	<div>
		<img src="img/1.jpg"><img src="img/2.jpg"><img src="img/3.jpg">
	</div>
	<h4>作者：jtniu</h4>
</body>
</html>

gif

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jtniu123

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手写轮播图

css+jquery实现轮播图效果html&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;轮播&lt;/title&gt;&lt;style&gt;h1,h4{ text-align:center; font-family: &q
复制链接

扫一扫