1.先给最基本的样式，点击左右按钮的时候，图片开始动，切换css 样式display:none和display:block,达到基本的效果
2.图片上面的小圆点，点击左右按钮绑定到一起 、
3.给每个小圆点添加点击事件
4.鼠标移入图片区域停止自动轮播图
5.离开图片区域开始轮播****
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
display: block;
width: 600px;
height: 500px;
}
li{
list-style: none;
width: 600px;
height: 500px;
}
*{
margin: 0px;
padding: 0px;
}
.box{
display: flex;
position: relative;
}
#list li{
display:none;
}
#left{
width: 80px;
height: 140px;
font-size: 50px;
color: azure;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 150px;
}
#right{
width: 80px;
height: 140px;
font-size: 50px;
color: azure;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 150px;
left: 520px;
}
.yuanDian ul{
position: absolute;
top: 420px;
left: 80px;
}
.yuanDian ul li{
margin: 0px 20px;
display: inline-block;
height: 30px;
width: 30px;
border-radius: 50%;
background: salmon;
}
.box{
width: 600px;
height: 500px;
}
/*
基础的css样式
*/
</style>
</head>
<body>
<div class="box" id="box">
<div class="lunbo" id="cut">
<ul id="list">
<li style="display: block;"><img src="./imgs/1.jpg" ></li>
<li><img src="./imgs/2.jpg" ></li>
<li><img src="./imgs/3.jpg" ></li>
<li><img src="./imgs/4.jpg" ></li>
<li><img src="./imgs/5.jpg" ></li>
</ul>
<div class="button">
<button type="button" id="left" onclick="left()"><</button>
<button type="button" id="right" onclick="right()"> ></button>
</div>
</div>
<div class="yuanDian">
<ul>
<li style="background: red;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
/** 整理一下思路
* 1.先给最基本的样式，点击左右按钮的时候，图片开始动，切换css
* 样式display:none和display:block,达到基本的效果
* 2.图片上面的小圆点，点击左右按钮绑定到一起
* 3.给每个小圆点添加点击事件
* 4.鼠标移入图片区域停止自动轮播图
* 5.离开图片区域开始轮播
*
*/
window.onload=function(){
//获取所有网节点
var lis=document.getElementById("list").children;
var left=document.getElementById("left");
var right=document.getElementById("right");
var box = document.getElementById("box");
//监控图片每一次改变的位置数
var tpIndex=0;
//实现最基本的点击左右按钮时图片切换
{
//接收一个参数就是图片的位置数
function lunBo(a1){
for(var i=0;i<lis.length;i++){
//给所有的图片添加display="none"属性隐藏起来
lis[i].style.display="none"
}
//给当前的传进来的图片位置数给css样式display="block"
lis[a1].style.display="block"
tpIndex=a1
a(tpIndex);
}
//tpIndex监控图片位置
//每点击left按钮
/**
* tpIndex自减
* 因为图片一共五张，减下去就是负数了
* 所有这里要加一个判断，然后重新赋值
* 然后给lunbo函数传当前的图片位置
*/
left.onclick= function(){
tpIndex--;
if(tpIndex<0){
//和下标对应
tpIndex=lis.length-1;//因为lis.length是长度0 1 2 3 4 5 这就多了一个数，所以减一
}
lunBo(tpIndex)
}
//
//每点击right按钮
/**
* tpIndex自增
* 从0开始到4
* 因为图片一共五张，加上去就是大于4了
* 所有这里要加一个判断，然后重新赋值
* 然后给lunbo函数传当前的图片位置
*/
right.onclick=function (){
tpIndex++;
if(tpIndex >lis.length-1){
tpIndex=0;
}
lunBo(tpIndex);
}
}
//实现和图片和小圆点的绑定
{ //获取所有节点
var yuanDians=document.querySelectorAll(".yuanDian ul li")
// 给小原点添加样式
function a(tpIndex){
for(var i=0;i<yuanDians.length;i++){
yuanDians[i].style.background=""
}
yuanDians[tpIndex].style.background="red"
}
//循环给小圆点添加点击事件
for(let i=0;i<yuanDians.length;i++){
yuanDians[i].onclick=function(){
tpIndex=i;// 监控图片当前位置 就是当前点击时的的下标
a(tpIndex) // 给a函数传参,当前小圆点添加样式
lunBo(tpIndex) // 同时也给赋值轮播的函数传参，给当前图片显示出来
}
}
}
// 实现鼠标移入停止轮播，移出开始轮播
{
//方便计时器使用，简化代码
function run(){
tpIndex++;
if(tpIndex >lis.length-1){
tpIndex=0;
}
lunBo(tpIndex);
a(tpIndex);
}
//添加计时器
var x=setInterval(run,1000);
//当鼠标离开的时候开始自动轮播
box.onmouseleave=function(){
x=setInterval(run,1000);
}
//鼠标进入停止轮播
box. onmouseenter=function(){
clearInterval(x)
}
}
}
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
