如何用jQuery做一个简单的轮播（一）

最新推荐文章于 2023-09-14 18:36:20 发布

JunerFan

最新推荐文章于 2023-09-14 18:36:20 发布

阅读量238

点赞数 1

文章标签： css html js jquery

本文链接：https://blog.csdn.net/weixin_43918109/article/details/105815140

版权

如何用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. 效果图

在这里插入图片描述

JunerFan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用jQuery做一个简单的轮播（一）

如何用jQuery做一个简单的轮播（一）1.原理利用两个div,一个包含三个图片，另一个则只有一个图片宽高，超过的部分则隐藏起来。2.代码2.1 HTML<!DOCTYPE html><html><head><script src="//code.jquery.com/jquery-2.1.1.min.js"></script...
复制链接

扫一扫