javascript 轮播图(缓存效果)详细篇
对现在的我来说,这样的操作还是有点麻烦,综合使用的话还是有很多毛病,话不多说,做一个上下平移的轮播图(纯js),因为不会,所以可能比较冗余,以便复习到更多知识点
过程
1、生出数字按钮,就是呢个代表着图片的小圆点,就暂且当图片不知道几张
1.1通过获取图片数量用for()循环,最后的结果是ul>li>1\2\3\4的效果
2、按钮移动切换
3.1:当鼠标移动到图片对应的数字按钮时
3.2:初始化状态
3、初始化状态,包括两个部分
2.1:当前图片对应的数字显示不一样的样式
2.2:图片特效函数,参数是根据下标即数字按钮获得不同的长度,用作上或下移动的距离,可以通过 “-” 改变上或下的方向(最好在全部步骤完成后书写)
4、通过 playTimer = setInterval(next, 3000);每三秒更换数字,并修改样式
4.1:通过下标设置自动改变方向
4.2:初始化状态
5、鼠标移入展示区停止自动播放(clearInterval(playTimer))
6、鼠标离开展示区开始自动播放(playTimer = setInterval(next, 3000) )
实例:轮播图之缓存效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自动播放——幻灯片缓冲效果</title>
<style type="text/css">
body,
li,
ul,
div {
padding: 0;
margin: 0;
}
body {
background: #000000;
text-align: center;
font: 12px/20px Arial;
}
#box {
position: relative;
width: 492px;
height: 172px;
background: #fff;
border-radius: 5px;
border: 8px solid #fff;
margin: 10px auto;
cursor: pointer;
}
#box .list {
position: relative;
width: 490px;
height: 170px;
overflow: hidden; /* 删除显示区域 */
}
#box .list ul {
position: absolute;
top: 0;
left: 0;
}
#box .list li {
/* li上下之间有间隙,设置高度之后可以清楚 */
width: 490px;
height: 170px;
overflow: hidden;
}
#box .list li {
width: 490px;
height: 170px;
overflow: hidden;
}
#box .count {
position: absolute;
right: 0;
bottom: 5px;
}
#box .count li {
color: #fff;
float: left;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background: #F90;
opacity: 0.7;
filter: alpha(opacity=70);
border-radius: 20px;
}
#box .count li.current {
color: #fff;
opacity: 1;
filter: alpha(opacity=100);
font-weight: 700;
background: #f60;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oBox = document.getElementById("box");
var oList = oBox.getElementsByTagName("ul")[0];
var aImg = oBox.getElementsByTagName("img");
var timer = playTimer = null;
var index = i = 0;
var bOrder = true; /* order命令;顺序;规则 */
var aTmp = []; /* temporary暂时的 */
var aBtn = null;
//生成数字按钮
for (var i = 0; i < aImg.length; i++) {
aTmp.push("<li>" + i + "</li>")
// console.log(aTmp); /* 获取li>1\2\3\4\5 */
}
//创建数字按钮格式
var oUl = document.createElement("ul");
oUl.className = "count"
oUl.innerHTML = aTmp.join(""); /* 将数组直接输入 */
oBox.appendChild(oUl);
//获取创建节点的li
oBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li");
for (var i = 0; i < oBtn.length; i++) {
oBtn[i].index = i;
oBtn[i].onmouseover = function() {
//初始化
index = this.index
initial()
}
}
//初始化
function initial() {
for (var i = 0; i < oBtn.length; i++) {
oBtn[i].className = "";
oBtn[index].className = "current";
/* 注意是index,上面已经定义了index=0;
所以其实就是改变第一个的样式,而调用后index改变*/
//图片特效
startMove(-(index * aImg[0].offsetHeight))
}
}
//缓存效果,即图片移动逐渐变得缓慢
function startMove(imgTop) {
// 不加的图片不停闪烁,加载timer后的话,没有特效
clearInterval(timer); /* timer定时器 */
timer = setInterval(function() {
var speed= (imgTop - oList.offsetTop) / 10;
/* 使speed变小,不然假如speed=1000px,直接就换页了,就没缓冲效果
即被除数(10)越大,缓冲效果越明显
*/
if(speed>0){
speed=Math.ceil(speed);
}else{
speed=Math.floor(speed);
}
console.log(speed)
/* 缓冲的效果就是在这里实现的,我们将速度的大小与当前位置与终点之间的距离成正比,那么距离越小,速度也越小,
此外一定要注意这里我们要对速度进行向上,或者向下取整,而且对于正数我们要向上取整,对于负速度,我们要向下取整。 */
if(oList.offsetTop == imgTop){
clearInterval(timer)
}else{
oList.style.top = oList.offsetTop + speed + "px";
/* 由上可知,无论是上下,当距离越近时,speed的值越小,即上或下的速度越来越慢 */
}
}, 30)
}
initial()
//第一个时,最后一个时,判定,效果就是从1-5,然后从5-1
function next() {
bOrder ? index++ : index--;
if (index <= 0) {
index = 0;
bOrder = true;
}
if (index >= oBtn.length - 1) {
index = oBtn.length - 1;
bOrder = false
}
initial()
}
//每三秒更换数字,并修改样式
playTimer = setInterval(next, 3000);
//鼠标移入展示区停止自动播放
oBox.onmouseover = function() {
clearInterval(playTimer)
};
//鼠标离开展示区开始自动播放
oBox.onmouseout = function() {
playTimer = setInterval(next, 3000)
};
}
</script>
</head>
<body>
<div id="box">
<!-- 白色拼屏幕 -->
<div class="list">
<!-- 显示的图片 -->
<ul>
<li><img src="img/01.jpg" width="490" height="170" /></li>
<li><img src="img/02.jpg" width="490" height="170" /></li>
<li><img src="img/03.jpg" width="490" height="170" /></li>
<li><img src="img/04.jpg" width="490" height="170" /></li>
<li><img src="img/05.jpg" width="490" height="170" /></li>
</ul>
<!-- 数字按钮格式 -->
<!-- <ul class="count">
<li>1</li>
</ul> -->
</div>
</div>
</body>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库