如何用jQuery做一个简单的轮播（一）
程序员文章站
2024-02-26 17:11:10
...
如何用jQuery做一个简单的轮播（一）
1.原理
利用两个div,一个包含三个图片，另一个则只有一个图片宽高，超过的部分则隐藏起来。
2.代码
2.1 HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="window">
<div class="images" id="images">
<img src="https://i.loli.net/2020/04/27/nuaQNsjp6zLZIEF.jpg" width=200px >
<img src="https://i.loli.net/2020/04/27/JGyoKpEjU3HBRwk.jpg" width=200px alt="">
<img src=" https://i.loli.net/2020/04/27/nUdie28WFrzVART.jpg" width=200px alt="">
</div>
</div>
<button id="p1">第一张</button>
<button id="p2">第二张</button>
<button id="p3">第三张</button>
</body>
</html>
2.2 CSS
.images{
display:flex;
border:1px solid red
}
.images>img{
}
.window{
border: 1px solid green;
width:200px;
overflow:hidden;
}
2.3 JS
$(p1).on('click',function(){
$(images).css({
transform: 'translateX(0)'
})
})
$(p2).on('click',function(){
$(images).css({
transform: 'translateX(-200px)'
})
})
$(p3).on('click',function(){
$(images).css({
transform: 'translateX(-400px)'
})
})
3. 效果图
上一篇： JQuery(2)：JQuery实现某宝放大镜效果
下一篇： 加载图片后自动居中