使用jQuery制作图片滚动栏,要求每张图片下方配有相应文字件
时间: 2023-08-06 14:01:52 浏览: 87
好的,制作图片滚动栏并且每张图片下方配有相应文字件,可以按照以下步骤进行:
1. 首先需要准备好需要展示的图片和对应的文字件,并将它们放在一个容器中。
2. 使用 jQuery 中的 `animate()` 函数,将容器中的所有图片和文字件向左移动一个固定的距离,形成滚动效果。
3. 当最后一张图片完全离开容器时,将它移动到容器的最右侧,并将第一张图片移动到容器的最左侧,从而形成循环滚动的效果。
4. 在每张图片的下方添加一个 `div` 元素,用于显示对应的文字件。可以使用 CSS 样式来设置文字件的样式。
下面是一个简单的示例代码,你可以参考一下:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片滚动栏</title>
<style type="text/css">
.container {
width: 600px;
height: 300px;
overflow: hidden;
position: relative;
}
.container img {
float: left;
width: 200px;
height: 300px;
}
.container div {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<img src="img1.jpg">
<div>这是第一张图片的文字说明</div>
<img src="img2.jpg">
<div>这是第二张图片的文字说明</div>
<img src="img3.jpg">
<div>这是第三张图片的文字说明</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var container = $('.container');
var images = container.find('img');
var captions = container.find('div');
var imgWidth = images.first().width();
var imgCount = images.length;
var totalWidth = imgWidth * imgCount;
var currentPosition = 0;
images.wrapAll('<div class="img-wrapper"></div>');
container.css({
'width': imgWidth,
'height': images.first().height()
});
$('.img-wrapper').css({
'width': totalWidth,
'position': 'relative',
'left': 0
});
captions.each(function(){
$(this).css({
'width': imgWidth,
'opacity': 0.7,
'display': 'none'
});
});
captions.first().show();
function moveLeft() {
currentPosition -= imgWidth;
if(currentPosition < -totalWidth + imgWidth) {
currentPosition = 0;
}
$('.img-wrapper').animate({
'left': currentPosition
}, 500);
var currentImage = Math.abs(currentPosition) / imgWidth;
captions.hide().eq(currentImage).fadeIn(500);
}
var timer = setInterval(moveLeft, 3000);
container.hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval(moveLeft, 3000);
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用了 jQuery 中的 `animate()` 函数来实现滚动效果,使用了 `setInterval()` 函数来定时触发滚动事件,使用了 `hover()` 函数来在鼠标悬停时停止滚动。同时,我们还使用了 CSS 样式来设置图片和文字件的样式,并使用了 `eq()` 函数来选中对应的文字件进行显示。