方法二具有图片滑动效果，具体实现代码如下所示：
- HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播</title>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div id="app">
<!-- 图片 -->
<ul class="scroll">
<li><a href="#"><img src="images/1.png" alt=""></a></li>
<li><a href="#"><img src="images/2.png" alt=""></a></li>
<li><a href="#"><img src="images/3.png" alt=""></a></li>
<li><a href="#"><img src="images/4.png" alt=""></a></li>
<li><a href="#"><img src="images/5.png" alt=""></a></li>
</ul>
<!-- 左右箭头 -->
<div class="arrow">
<span class="lf"><</span>
<span class="lr">></span>
</div>
<!-- 小圆点 -->
<div class="dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</body>
</html>
- CSS代码
*{
margin: 0;
padding: 0;
}
#app,ul,a{
width: 600px;
height: 400px;
}
#app{
position: absolute;
border: 2px solid black;
margin: 10px 0 0 10px;
overflow: hidden;
}
ul{
position: absolute;
list-style: none;
width: 6000px;
}
li{
float: left;
}
a{
display: inline-block;
}
img{
width: 100%;
height: 100%;
}
.arrow{
position: absolute;
width: 100%;
height: 50px;
top: calc(50% - 25px);
/* display: none; */
}
.arrow span{
position: absolute;
width: 50px;
height: 50px;
font-size: 40px;
text-align: center;
line-height: 50px;
background-color: rgba(0, 0, 0, 0.2);
color: white;
}
.lf{
left: 0px;
cursor: pointer;
}
.lr{
right: 0px;
cursor: pointer;
}
.app:hover .arrow{
display: block;
}
/* 小圆点 */
.dots{
position: absolute;
width: 150px;
height: 30px;
line-height: 30px;
bottom: 0;
left: calc(50% - 75px);
text-align: center;
}
.dot{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 100%;
background-color: white;
cursor: pointer;
}
.dot.active{
background-color: red;
}
- JS代码
var autoplay = true;
var autoplay_Delay = 2000; //设置2秒切换一张图片
var autoplayId;
var intervalId;
var app;
var scr;
var app_li;
var dots;
var app_item_width;
var curIndex = 0;
window.onload = function () {
initElement();
initEvent();
if (autoplay) {
start(scr);
}
}
function initElement() {
app = document.getElementById("app");
app_li = app.getElementsByTagName("li");
scr = app.getElementsByClassName("scroll")[0];
dots = app.getElementsByClassName("dots")[0];
var firstItem = app_li[0].cloneNode(true);
scr.appendChild(firstItem);
app_item_width = app_li[0].offsetWidth;
}
function initEvent() {
app.addEventListener("mouseover", function () {
clearTimeout(autoplayId);
autoplay = false;
});
app.addEventListener("mouseout", function () {
autoplay = true;
start(scr);
});
var indicators = dots.children;
for (var i = 0; i < indicators.length; i++) {
indicators[i].setAttribute("index", i);
indicators[i].addEventListener("click", function () {
var index = parseInt(this.getAttribute("index"));
next(index);
});
}
var left_arrow = app.getElementsByClassName("lf")[0];
var right_arrow = app.getElementsByClassName("lr")[0];
left_arrow.addEventListener("click", function () {
prev();
});
right_arrow.addEventListener("click", function () {
next();
});
}
function animate(element, target) {
var step = 10;
var time = 10;
var gap = (Math.abs(target - element.offsetLeft) / app_item_width);
if (gap > 1) {
step = step * gap;
time = time / gap;
}
if (element) {
step = (element.offsetLeft > target) ? -step : step;
clearInterval(intervalId);
setdot(curIndex);
intervalId = setInterval(function () {
if ((step < 0) && (Math.abs(element.offsetLeft + step) < Math.abs(target))) {
element.style.left = element.offsetLeft + step + "px";
} else {
if (Math.abs(target - element.offsetLeft) > Math.abs(step)) {
element.style.left = element.offsetLeft + step + "px";
} else {
clearInterval(intervalId);
intervalId = -1;
element.style.left = target + "px";
if (autoplay) {
start(element);
}
}
}
}, time);
}
}
//设置上一张
function prev() {
var element = scr;
var li = element.children;
curIndex = curIndex - 1;
if (curIndex < 0) {
element.style.left = -((li.length - 1) * app_item_width) + "px";
curIndex = li.length - 2;
}
animate(element, -(curIndex * app_item_width));
}
//设置上一张
function next(nextIndex) {
var element = scr;
var li = element.children;
if ((nextIndex != null) && (typeof (nextIndex) != "undefined")) {
curIndex = nextIndex;
} else {
curIndex = curIndex + 1;
if (curIndex > (li.length - 1)) {
element.style.left = 0 + "px";
curIndex = 1;
}
}
animate(element, -(curIndex * app_item_width));
}
// 设置图片2秒切换一张
function start(element) {
if (autoplayId) {
clearTimeout(autoplayId);
}
autoplayId = setTimeout(function () {
next();
}, autoplay_Delay);
}
//设置小圆点事件
function setdot(index) {
var indicators = dots.children;
if (index == indicators.length) {
index = 0;
}
for (var i = 0; i < indicators.length; i++) {
if (i == index) {
indicators[i].className = "dot active";
} else {
indicators[i].className = "dot";
}
}
}