用jquery写一个水平滑动
时间: 2023-11-18 22:11:14 浏览: 42
以下是一个简单的水平滑动的jQuery代码示例:
HTML:
```
<div class="slider-container">
<div class="slider-wrapper">
<div class="slider-item"><img src="image1.jpg"></div>
<div class="slider-item"><img src="image2.jpg"></div>
<div class="slider-item"><img src="image3.jpg"></div>
</div>
</div>
```
CSS:
```
.slider-container {
width: 100%;
overflow: hidden;
}
.slider-wrapper {
display: flex;
transition: transform 0.3s ease-in-out;
}
.slider-item {
flex: 1;
margin-right: 10px;
}
.slider-item:last-child {
margin-right: 0;
}
```
jQuery:
```
$(document).ready(function() {
var sliderWrapper = $('.slider-wrapper');
var sliderItemWidth = $('.slider-item').width() + 10; // 10为margin-right的宽度
var sliderItemCount = $('.slider-item').length;
var sliderWidth = sliderItemCount * sliderItemWidth;
sliderWrapper.width(sliderWidth);
var position = 0;
setInterval(function() {
position -= sliderItemWidth;
if (position <= -(sliderWidth - sliderItemWidth)) {
position = 0;
}
sliderWrapper.css('transform', 'translateX(' + position + 'px)');
}, 3000);
});
```
解释:
1. 获取slider-wrapper元素和每个slider-item的宽度,以及slider-item的数量和总宽度。
2. 设置slider-wrapper的宽度为slider-item的总宽度。
3. 定义一个变量position,用来记录slider-wrapper的当前位置。
4. 使用setInterval()函数实现定时滑动效果。
5. 在每次滑动时,将position减去一个slider-item的宽度,如果超过了slider-wrapper的总宽度,则将position重置为0。
6. 使用css()函数将slider-wrapper的transform属性设为translateX(),实现水平滑动效果。