<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.bannar {
width: 1200px;
height: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.imageList {
width: 4800px;
}
.imageItem {
float: left;
}
.imageItem>img {
width: 1200px;
height: 800px;
}
.carouselList {
width: 200px;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 50px;
}
.carouselItem {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgba(0, 0, 0, .5);
color: #fff;
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
}
.current {
background-color: #fff;
color: #333;
}
.nextPage,
.prevPage {
position: absolute;
width: 50px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: rgba(0, 0, 0, .5);
color: #fff;
top: 50%;
margin-top: -40px;
cursor: pointer;
}
.nextPage {
right: 50px;
}
.prevPage {
left: 50px;
}
.clearfix:after {
content: "";
clear: both;
display: block;
height: 0;
}
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 850px;
left: 0;
}
</style>
</head>
<body>
<div class="bannar">
<ul class="imageList clearfix">
<li class="imageItem">
<img src="images/xihu01.jpg" />
</li>
<li class="imageItem">
<img src="images/xihu02.jpg" />
</li>
<li class="imageItem">
<img src="images/xihu03.jpg" />
</li>
<li class="imageItem">
<img src="images/xihu01.jpg" />
</li>
</ul>
<ul class="carouselList">
<li class="carouselItem current">1</li>
<li class="carouselItem">2</li>
<li class="carouselItem">3</li>
</ul>
<span class="nextPage">></span>
<span class="prevPage"><</span>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
// 元素获取
var bannar = document.querySelector(‘.bannar‘),
imageList = document.querySelector(‘.imageList‘),
imageItem = document.querySelectorAll(‘.imageItem‘),
carouselList = document.querySelector(‘.carouselList‘),
carouselItem = document.querySelectorAll(‘.carouselItem‘),
nextPage = document.querySelector(‘.nextPage‘),
prevPage = document.querySelector(‘.prevPage‘),
imageList_ml = 0, // 显示第一张图片时，图片列表的marginLeft值
carousel_cur = 0; // 显示第一张图片时，轮播点的位置
// 切换下一张图片
function switch_next() {
// 控制图片列表位置
if (imageList_ml === -3600) {
imageList_ml = -1200;
imageList.style.marginLeft = imageList_ml + 1200 + ‘px‘;
} else {
imageList_ml -= 1200;
}
$(imageList).animate({ ‘marginLeft‘: imageList_ml + ‘px‘ });
// 控制轮播点位置
if (carousel_cur === 2) {
carousel_cur = 0;
} else {
carousel_cur++;
}
for (var i = 0; i < carouselItem.length; i++) {
carouselItem[i].classList.remove(‘current‘);
}
carouselItem[carousel_cur].classList.add(‘current‘);
}
// 切换上一张图片
function switch_prev() {
// 控制图片列表位置
if (imageList_ml === 0) {
imageList_ml = -2400;
imageList.style.marginLeft = imageList_ml - 1200 + ‘px‘;
} else {
imageList_ml += 1200;
}
$(imageList).animate({ ‘marginLeft‘: imageList_ml + ‘px‘ });
// 控制轮播点位置
if (carousel_cur === 0) {
carousel_cur = 2;
} else {
carousel_cur--;
}
for (var i = 0; i < carouselItem.length; i++) {
carouselItem[i].classList.remove(‘current‘);
}
carouselItem[carousel_cur].classList.add(‘current‘);
}
// 自动轮播，一秒向下切换一张图片
var autoSwitch_interval = setInterval(switch_next, 1000);
// 点击左右箭头切换上一张下一张
nextPage.onclick = switch_next;
prevPage.onclick = switch_prev;
// 鼠标移入停止自动轮播
bannar.onmouseenter = function() {
clearInterval(autoSwitch_interval);
}
// 鼠标移出继续自动轮播
bannar.onmouseleave = function() {
autoSwitch_interval = setInterval(switch_next, 1000);
}
// 点击页数切换图片
for (let i = 0; i < carouselItem.length; i++) {
carouselItem[i].onclick = function() {
carousel_cur = i;
imageList_ml = -1200 * i;
$(imageList).animate({ ‘marginLeft‘: imageList_ml + ‘px‘ });
for (var j = 0; j < carouselItem.length; j++) {
carouselItem[j].classList.remove(‘current‘);
}
carouselItem[carousel_cur].classList.add(‘current‘);
}
}
</script>
</body>
</html>
