下面是一个简单的使用 jQuery 实现的新闻图片上下轮播滚动的示例代码。这个例子中，我们使用了 setInterval 函数来定时切换新闻图片，同时使用 CSS 进行样式的设置。
首先，确保在HTML文档中包含以下结构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>新闻图片轮播</title> </head> <body> <div class="news-container"> <div class="news-slider"> <div class="news-item"><img src="news1.jpg" alt="News 1"></div> <div class="news-item"><img src="news2.jpg" alt="News 2"></div> <div class="news-item"><img src="news3.jpg" alt="News 3"></div> <!-- 添加更多新闻图片... --> </div> </div> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="script.js"></script> </body> </html>
接下来，添加CSS样式（styles.css）：
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.news-container {
overflow: hidden;
max-width: 100%;
}
.news-slider {
display: flex;
flex-direction: column;
transition: transform 0.5s ease-in-out;
}
.news-item {
height: 300px; /* 设置图片容器的高度 */
}
.news-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
最后，添加JavaScript文件（script.js）：
$(document).ready(function() {
var $newsSlider = $('.news-slider');
var slideHeight = $('.news-item').height();
var currentIndex = 0;
function nextSlide() {
currentIndex = (currentIndex + 1) % $('.news-item').length;
updateSlider();
}
function updateSlider() {
var newTransformValue = -currentIndex * slideHeight;
$newsSlider.css('transform', 'translateY(' + newTransformValue + 'px)');
}
var intervalId = setInterval(nextSlide, 3000); // 切换间隔为3秒
// 鼠标悬停时停止轮播
$newsSlider.hover(
function() {
clearInterval(intervalId);
},
function() {
intervalId = setInterval(nextSlide, 3000);
}
);
});
这个例子中，每张新闻图片的高度是固定的（通过设置 .news-item 的高度），而轮播容器的高度会随着新闻图片的高度变化。你可以根据需要调整图片的样式和动画参数。
本站资源均来源于互联网，仅限于学习研究，严禁从事商业或者非法活动！丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jquery做成新闻图片上下轮播滚动代码
