下面我将详细讲解“Jquery图片滚动与幻灯片的实例代码”的完整攻略。
1. 效果介绍
首先，我们来了解一下实现的效果。本文将介绍两种效果。
1.1 图片滚动效果
图片滚动效果是指图片自动向左（或向右）滚动，当鼠标悬停在图片上时，滚动停止，离开后继续滚动。
1.2 幻灯片效果
幻灯片效果是指图片轮番展示，每张图片停留一段时间后自动切换到下一张。
2. 示例代码
下面为大家提供两条示例代码，分别实现了图片滚动和幻灯片效果。
2.1 图片滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片滚动</title>
<style type="text/css">
#scrollBox{
width: 500px;
height: 150px;
overflow: hidden;
position: relative;
border: 1px solid #ccc;
}
#scrollList{
width: 5000px;
height: 150px;
position: absolute;
left: 0;
top: 0;
}
#scrollList li{
width: 500px;
height: 150px;
float: left;
}
</style>
</head>
<body>
<div id="scrollBox">
<ul id="scrollList">
<li><img src="https://picsum.photos/id/1/500/150"></li>
<li><img src="https://picsum.photos/id/2/500/150"></li>
<li><img src="https://picsum.photos/id/3/500/150"></li>
<li><img src="https://picsum.photos/id/4/500/150"></li>
<li><img src="https://picsum.photos/id/5/500/150"></li>
<li><img src="https://picsum.photos/id/6/500/150"></li>
<li><img src="https://picsum.photos/id/7/500/150"></li>
</ul>
</div>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var speed = 50; //图片滚动的速度
var scrollBox = $("#scrollBox");
var scrollList = $("#scrollList");
var cloneBox = scrollList.clone();
var w = cloneBox.width();
cloneBox.append(scrollList.clone()); //克隆滚动列表
scrollBox.append(cloneBox); //将克隆的列表添加到滚动框中
var timer;
function roll(){
if (scrollBox.scrollLeft() >= w) {
scrollBox.scrollLeft(0);
} else {
scrollBox.scrollLeft(scrollBox.scrollLeft() + 1);
}
}
timer = setInterval(roll, speed); //定时器滚动
//鼠标悬停时，停止滚动；离开时，继续滚动
scrollBox.hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval(roll, speed);
});
});
</script>
</body>
</html>
上述代码实现了一个包含7张图片的滚动列表，滚动速度为50。当鼠标悬停在滚动框上时，滚动停止；当鼠标移开时，继续滚动。
2.2 幻灯片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>幻灯片</title>
<style type="text/css">
#slider{
width: 500px;
height: 150px;
position: relative;
border: 1px solid #ccc;
}
#slider img{
width: 500px;
height: 150px;
position: absolute;
left: 0;
top: 0;
display: none; //初始隐藏第一张图片
}
#slider img:first-child{
display: block; //显示第一张图片
}
#slider .dots{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
#slider .dot{
display: inline-block;
width: 8px;
height: 8px;
margin: 0 5px;
cursor: pointer;
background: #ccc;
border-radius: 50%;
}
#slider .dot.active{
background: #f00;
}
</style>
</head>
<body>
<div id="slider">
<img src="https://picsum.photos/id/1/500/150">
<img src="https://picsum.photos/id/2/500/150">
<img src="https://picsum.photos/id/3/500/150">
<img src="https://picsum.photos/id/4/500/150">
<img src="https://picsum.photos/id/5/500/150">
<img src="https://picsum.photos/id/6/500/150">
<img src="https://picsum.photos/id/7/500/150">
<div class="dots"></div>
</div>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var index = 0; //当前显示的图片索引
var slider = $("#slider");
var imgList = slider.find("img");
var dotList = slider.find(".dots");
var timer;
//自动切换图片
function slide(){
index++;
if (index >= imgList.length) {
index = 0;
}
imgList.eq(index).fadeIn().siblings().fadeOut();
dotList.find(".dot").eq(index).addClass("active").siblings().removeClass("active");
}
timer = setInterval(slide, 3000); //定时器切换
//点击圆点切换图片
dotList.on("click", ".dot" ,function(){
index = $(this).index();
imgList.eq(index).fadeIn().siblings().fadeOut();
$(this).addClass("active").siblings().removeClass("active");
clearInterval(timer); //清除定时器
timer = setInterval(slide, 3000); //重新设置定时器
});
});
</script>
</body>
</html>
上述代码实现了一个包含7张图片的幻灯片，每张图片停留3秒后自动切换到下一张。同时，底部也添加了7个圆点，可通过点击圆点切换图片。
3. 结语
上述是本文对Jquery图片滚动与幻灯片的实例代码的详细讲解，希望能够对大家有所帮助。如有不足之处，请不吝指出。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jquery图片滚动与幻灯片的实例代码 - Python技术站
微信扫一扫 
支付宝扫一扫 