<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#main {
width: 1000px;
margin: 0 auto;
}
#banner {
width: 1000px;
overflow: hidden;
position: relative;
}
#ul-imgs {
list-style: none;
}
#ul-imgs.transition {
transition: all .5s linear;
}
#ul-imgs>li {
width: 1000px;
float: left;
}
#ul-imgs img {
width: 1000px;
}
#ul-idxs {
width: 100px;
margin: 0 auto;
list-style: none;
position: absolute;
bottom: 25px;
left: 50%;
margin-left: -50px;
}
#ul-idxs>li {
float: left;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 5px;
margin: 0 5px;
cursor: pointer;
}
#ul-idxs>li.active {
background-color: blue;
}
#btn-left,
#btn-right {
width: 60px;
height: 100%;
position: absolute;
top: 0;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
#btn-left {
left: 20px;
background-image: url(image/carousel_item/left_ar.png);
}
#btn-right {
right: 20px;
background-image: url(image/carousel_item/right_ar.png);
}
#btn-left:hover,
#btn-right:hover {
background-size: 40px 70px
}
</style>
</head>
<body>
<main id="main">
<div id="banner">
<div id="btn-left"></div>
<ul id="ul-imgs" style="width:5000px; margin-left:0px;">
<li><a href="javascript:;"><img src="image/carousel_item/carousel-1.jpg"></a></li>
<li><a href="javascript:;"><img src="image/carousel_item/carousel-2.jpg"></a></li>
<li><a href="javascript:;"><img src="image/carousel_item/carousel-3.jpg"></a></li>
<li><a href="javascript:;"><img src="image/carousel_item/carousel-4.jpg"></a></li>
<!--注意！最后li个数要比实际图片张数多1，最后一个li里的img是重复第一张li的图片-->
<li><a href="javascript:;"><img src="image/carousel_item/carousel-1.jpg"></a></li>
</ul>
<ul id="ul-idxs">
<!--虽然li个数比实际图片张数多1，但小圆点的个数不必多1-->
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="btn-right"></div>
</div>
</main>
<script>
var i = 0;//计数用，判断当前li是第几个图片
var LIWIDTH = 1000;//每个li的长度
var DURATION = 500;//时间500毫秒
var LICOUNT = 4;//li数量
var ulImgs = document.getElementById("ul-imgs");
var ulIdxs = document.getElementById("ul-idxs");
var lis = ulIdxs.children;
//先声明一个控制跳转的函数moveTo
function moveTo(to) {
if (to == undefined) {//不传参时自动跳转下一张
to = i + 1;
}
if (i == 0) {
if (to > i) {//如果是第一张li，向前跳转的话添加上跳转动画
ulImgs.className = "transition";
} else {//向后跳转移除跳转动画
ulImgs.className = "";
ulImgs.style.marginLeft = -LIWIDTH * LICOUNT + "px";//使用li的宽乘数量得到外边距，让对的li显示
setTimeout(function () {
moveTo(LICOUNT - 1);
},100);
return;
}
}
i = to;//正常情况下的跳转
ulImgs.style.marginLeft = -i * LIWIDTH + "px";
//先设置小圆点都不显示样式，方便用i添加样式
for (var li of lis) {
li.className = ""
}
//console.log(i);
//如何跳转到最后一个图片，自动偷偷转回第一个图片
if (i == LICOUNT) {
i = 0;
setTimeout(function () {
ulImgs.className = "";
ulImgs.style.marginLeft = 0;
},DURATION)
}
lis[i].className = "active";
}
</script>
<script>
//左右按钮代码
var btnLeft = document.getElementById("btn-left");
var btnRight = document.getElementById("btn-right");
var canClick = true;
btnRight.onclick = function () {
move(1)
}
function move(n) {
if (canClick) {
console.log(i + n);
moveTo(i + n);
canClick = false;
setTimeout(function () {
canClick = true;
},DURATION + 100);
}
}
btnLeft.onclick = function () {
move(-1);
}
</script>
<script>
var interval = 3000;//跳转事件
//自动跳转
var timer = setInterval(function () {
moveTo()
},3000);
//鼠标移入停止跳转
var banner = document.getElementById("banner");
banner.onmouseover = function () {
clearInterval(timer);
}
banner.onmouseout = function () {
timer = setInterval(function () {
moveTo()
},3000);
}
</script>
<script>
//通过小圆点控制图片
var ulIdxs = document.getElementById("ul-idxs");
var canClick = true;
ulIdxs.onclick = function (e) {
if (canClick) {
var li = e.target;
if (li.nodeName == "LI") {
if (li.className !== "active") {
for (var i = 0; i < lis.length; i++) {
if (lis[i] == li) {
break;
}
}
moveTo(i);
setTimeout(function () {
canClick = true;
},DURATION);
}
}
}
}
</script>
</body>
</html>
2_前端开发框架实训周_JavaScript.zip （21个子文件） 
前端开发框架实训周_JavaScript 
留言板.html 3KB js 
dayjs.min.js 6KB vue.js 346KB vue.min.js 91KB 计算器.html 4KB 计算器_vue.html 3KB 倒计时.html 3KB 留言板_vue.html 3KB 轮播图 carousel.html 7KB image carousel_item 
carousel-8.jpg 456KB carousel-5.jpg 669KB carousel-7.jpg 157KB
left_ar.png 449B carousel-3.jpg 322KB carousel-6.jpg 503KB carousel-2.jpg 448KB right_ar.png 447B carousel-1.jpg 646KB carousel-4.jpg 251KB carousel_vue.html 4KB 倒计时_vue.html 3KB资源评论
