[Web]通⽤轮播图代码⽰例
⾸先是准备好的⼏张图⽚, 它们的路径是: "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg"代码
最基本的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/index.css" />  <!--引⼊样式表-->
<script src="js/index.js"></script>              <!--引⼊JS脚本, 脚本⽤来切换图-->
</head>
<body>
<div id="test" class="slider">
<img id="img1" src="img/1.jpg" class="current">
<img id="img2" src="img/2.jpg">
<img id="img3" src="img/3.jpg">
</div>
<button onclick="setCurrent(0)">1</button>      <!--在这⾥, onClick调⽤的是⽤于设置当前图⽚的⽅法, 传⼊参数为图⽚节点的索引-->
<button onclick="setCurrent(1)">2</button>
<button onclick="setCurrent(2)">3</button>
<button onclick="setCurrent(3)">4</button>
<button onclick="setCurrent(4)">5</button>
<button onclick="setCurrent(5)">6</button>
<script>
setInterval(moveNext, 5000);      // 每隔5s, 切换到下⼀张图⽚
</script>
</body>
</html>
引⼊的样式表:
.slider {                /* 指定轮播图容器尺⼨, 相对定位, 隐藏溢出内容 */
width: 750px;
height: 450px;
position: relative;
overflow: hidden;
}
.slider img {            /* 指定每⼀个图⽚的尺⼨, 过渡时间, 绝对定位 */
width: 100%;
height: 100%;
transition: all 0.5s;
position: absolute;
}
.slider img {                          /* 指定所有图⽚⽔平位移-100% */
transform: translateX(-100%);
}
.
slider img.current {                  /* 指定带有current类的图⽚不进⾏⽔平移动 */
transform: translateX(0);
}
.slider img.current~img{                /* 指定位于带有current类的图⽚之后的所有图⽚⽔平位移为100% */
transform: translateX(100%);
}
.slider img.current,                    /* 指定带有current或last类的图⽚置顶 */
.slider img.last{
z-index: 999;
}
引⼊的JavaScript:
function getImages() {
ElementById("test").querySelectorAll("img");      // 搜该页⾯下轮播图容器中的所有img
}
function getCurrent() {
ElementById("test").querySelector("img.current");  // 搜该页⾯下轮播图容器中当前展⽰的img
}
function setCurrent(index) {
var imgs = getImages();
var cur = getCurrent();
imgs.forEach(v => v.className = "");  // 清空所有图⽚的类名
cur.className = "last";                // 设置当前展⽰的图⽚的类名为 "last", 意为: "上⼀次展⽰的图⽚"
imgs[index].className = "current";    // 设置要设置的图⽚的类名为 "current"
js实现轮播图最简代码}
function moveNext() {          // 移动展⽰图⽚到下⼀个
var imgs = getImages();
var curIndex;
for (curIndex = 0; curIndex < imgs.length; curIndex++) {
if (imgs[curIndex].className == "current") {
break;
}
}
if (curIndex + 1 < imgs.length) {
setCurrent(curIndex + 1);
} else {
setCurrent(0);
}
}
原理
图⽚集为⼀个序列, 当前展⽰的图⽚在中间, 展⽰图⽚之前的图⽚则是在左边, ⽽之后的图⽚则是在右边.
任意设置⼀个图⽚为当前展⽰的图⽚(即设置类名为current), 那么该图⽚将移动到中间. ⽽其它的图⽚, ⾃然也会移动到它两边.
由于滑动时, 需要显⽰将要展⽰的图⽚, 以及将要隐藏的图⽚, 所以这两张图⽚需要置顶, 否则, 进⾏多张图⽚的切换时, 将由于默认层级关系⽽导致异常, 故设置 .current 与 .last 的 z-index 为 999.
效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。