javascript学习-轮播图历程

轮播图1.0-随机切换

页面刷新，
1.图片随机变换，
2.盒子背景颜色，文字内容变换
3.小圆点随机一个高亮显示

<div class="container">
        <img />
        <p></p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>
<style>
.container{
    width: 600px;
    height: 475px;
    background-color: aqua;
}
img{
    width: 600px;
    height: 400px;
}
p{
    width: calc(100% - 20px);
    height: 40px;
    line-height:40px;
    font-size: larger;
    padding-left: 20px;
    margin-top: 5px;
    margin-bottom: 0;
    color: aliceblue
}
ul{
    display: inline-block;
    display: flex;
    margin-top: 0;
    margin-bottom: 0;
}
li{
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.469);
}
.active{
    color: white;
}
</style>
<script>
    const data = [
        {url:'../imgs/goods1.jpg',
         uname:'格力七叶轻音立式电风扇家用柔风落地扇',
         color:'rgb(174, 223, 242)',
         num:1
        },
        {url:'../imgs/goods2.jpg',
         uname:'资生堂专业美发 芯护理道轻盈丝逸洗发露',
         color:'rgb(211, 190, 168)',
         num:2
        },
        {url:'../imgs/goods3.jpg',
         uname:'国台酒 好礼经典版 三斤坛子 酱香型白酒',
         color:'rgb(94, 169, 146)',
         num:3
        },
        {url:'../imgs/goods4.jpg',
         uname:'AppleAirPods Pro (第二代)配MagSafe无线充电盒',
         color:'rgb(227, 179, 171)',
         num:4
        },
        {url:'../imgs/goods5.jpg',
         uname:'海尔（Haier）216升冰箱三门三温区租房低音节能',
         color:'rgb(139, 216, 246)',
         num:5
        },
    ]
    //得到1~5的随机数
    function getRandom(N,M) {
            return Math.floor(Math.random() * (M-N+1)) + N
        }
    const random =  getRandom(0,4)
    const gimg = document.querySelector('img')
    gimg.src = data[random].url
    const gp = document.querySelector('p')
    gp.innerText = data[random].uname
    const gcon = document.querySelector('.container')
    gcon.style.backgroundColor = `${data[random].color}`
    const li = document.querySelector(`li:nth-child(${data[random].num})`)
    li.classList.add('active')
</script>

轮播图2.0-加小圆点

每隔1s 切换一张图片；
标题文字改变；
小圆点变动

<div class="container">
    <img src = '../imgs/goods1.jpg'/>
    <p></p>
    <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<style>
.container{
width: 600px;
height: 475px;
background-color: rgb(174, 223, 242);
}
img{
width: 600px;
height: 400px;
}
p{
width: calc(100% - 20px);
height: 40px;
line-height:40px;
font-size: larger;
padding-left: 20px;
margin-top: 5px;
margin-bottom: 0;
color: aliceblue
}
ul{
display: inline-block;
display: flex;
margin-top: 0;
margin-bottom: 0;
}
li{
width: 20px;
height: 20px;
color: rgba(255, 255, 255, 0.469);
}
.active{
color: white;
}
</style>
<script>
const data = [
    {url:'../imgs/goods1.jpg',
     uname:'格力七叶轻音立式电风扇家用柔风落地扇',
     color:'rgb(174, 223, 242)',
     num :1
    },
    {url:'../imgs/goods2.jpg',
     uname:'资生堂专业美发 芯护理道轻盈丝逸洗发露',
     color:'rgb(211, 190, 168)',
     num :1
    },
    {url:'../imgs/goods3.jpg',
     uname:'国台酒 好礼经典版 三斤坛子 酱香型白酒',
     color:'rgb(94, 169, 146)',
     num :1
    },
    {url:'../imgs/goods4.jpg',
     uname:'AppleAirPods Pro (第二代)配MagSafe无线充电盒',
     color:'rgb(227, 179, 171)',
     num :1
    },
    {url:'../imgs/goods5.jpg',
     uname:'海尔（Haier）216升冰箱三门三温区租房低音节能',
     color:'rgb(139, 216, 246)',
     num :1
    },
]
const img = document.querySelector('img')
const p = document.querySelector('p')
const con = document.querySelector('.container')
let i = 1  //信号量  刚开始是第一张图片，1s后开始第二张
setInterval(function (){
    img.src = data[i].url   //变换图片
    p.innerHTML = `${data[i].uname}`    //变换标题
    con.style.backgroundColor = `${data[i].color}` //变换背景
    //变换小圆点
    //删除此时图片小圆点选中状态   重点！！！
    document.querySelector(`.active`).classList.remove('active')
    //再给下一张添加选中状态    与上一步步骤不能反
    document.querySelector(`li:nth-child(${i + 1})`).classList.add('active')
    i++ 
    if(i == data.length){
        i = 0           //如果图片播放完最后一张，重新从第一张即i=0开始
    }
},1000)
</script>

轮播图3.0-加按钮切换和暂停

当点击左右按钮时，可以切换轮播图
鼠标经过暂停定时器
鼠标离开开启定时器

<div class="container">
    <img src = '../imgs/goods1.jpg'/>
    <p></p>   
    <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <button class="btn btn1">&lt;</button>
    <button class="btn btn2">&gt;</button>
</div>
<style>
.container{
position: relative;
width: 600px;
height: 475px;
background-color: rgb(174, 223, 242);
}
img{
width: 600px;
height: 400px;
}
p{
width: calc(100% - 20px);
height: 40px;
line-height:40px;
font-size: larger;
padding-left: 20px;
margin-top: 5px;
margin-bottom: 0;
color: aliceblue
}
ul{
display: inline-block;
display: flex;
margin-top: 0;
margin-bottom: 0;
}
li{
width: 20px;
height: 20px;
color: rgba(255, 255, 255, 0.469);
}
.active{
color: white;
}
.btn{
    width: 25px;
    height: 25px;
    position: absolute;
    right:10px ;
    bottom: 40px;
    border: 0;
    background-color: rgba(233, 233, 233, 0.34);
    color: white;
    border-radius: 5px;
}
.btn1{
    right: 50px;
}
</style>
<script>
const data = [
    {url:'../imgs/goods1.jpg',
     uname:'格力七叶轻音立式电风扇家用柔风落地扇',
     color:'rgb(174, 223, 242)',
     num :1
    },
    {url:'../imgs/goods2.jpg',
     uname:'资生堂专业美发 芯护理道轻盈丝逸洗发露',
     color:'rgb(211, 190, 168)',
     num :1
    },
    {url:'../imgs/goods3.jpg',
     uname:'国台酒 好礼经典版 三斤坛子 酱香型白酒',
     color:'rgb(94, 169, 146)',
     num :1
    },
    {url:'../imgs/goods4.jpg',
     uname:'AppleAirPods Pro (第二代)配MagSafe无线充电盒',
     color:'rgb(227, 179, 171)',
     num :1
    },
    {url:'../imgs/goods5.jpg',
     uname:'海尔（Haier）216升冰箱三门三温区租房低音节能',
     color:'rgb(139, 216, 246)',
     num :1
    },
]
const img = document.querySelector('img')
const p = document.querySelector('p')
const con = document.querySelector('.container')
let i = 0  
//给按钮加事件！！！
//分析：右侧按钮：i++，如果大于等于4，复原为0
//      左侧按钮：i--，如果小于0，复原最后一张
//      鼠标经过暂停定时器
//      鼠标离开开启定时器

//由于左侧按钮，右侧按钮，定时器有一样的代码，所以封装一个函数
function common() {
    img.src = data[i].url   
    p.innerHTML = `${data[i].uname}`   
    con.style.backgroundColor = `${data[i].color}` 
    document.querySelector(`.active`).classList.remove('active')
    document.querySelector(`li:nth-child(${i +1 })`).classList.add('active') 
}
//右侧按钮---与定时器一样
const btn2 = document.querySelector('.btn2')
btn2.addEventListener('click',function(){
    i++
    if(i >= data.length){
        i = 0           
    }
    common()
})
//左侧按钮---与定时器相反
const btn1 = document.querySelector('.btn1')
btn1.addEventListener('click',function(){
    i--
    if(i < 0){
        i = data.length - 1           
    }
    common()
})
//自动播放（与右按钮效果一样）
let timerId = setInterval(function (){
    btn2.click()  //用js自动调用点击事件，click加小括号
},1000)
//开启定时器
con.addEventListener('mouseenter',function(){
    clearInterval(timerId)
})
//关闭定时器
con.addEventListener('mouseleave',function(){
    timerId = setInterval(function (){
        btn2.click()  
},1000)
})
</script>