前端练习，轮播图+定时器

最新推荐文章于 2024-08-02 20:55:43 发布

minutes_10

最新推荐文章于 2024-08-02 20:55:43 发布

阅读量243

点赞数

CC 4.0 BY-SA版权

文章标签： html5 css3 javascript

本文链接：https://blog.youkuaiyun.com/minutes_10/article/details/127525215

这篇博客介绍了一个使用HTML5、CSS3和JavaScript实现的轮播图，包含了图片淡入淡出效果、底部指示器以及左右切换按钮。同时还实现了鼠标悬停暂停、离开继续自动切换的定时功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<head>

<title>QQ音乐轮播图</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

li {

list-style: none;

}

.main {

width: 700px;

margin: auto;

background: #000;

}

.slides {

height: 320px;

position: relative;

}

.slides ul li {

/* display: none; */

position: absolute;

top: 0;

left: 0;

opacity: 0;

/* 这里实现淡入淡出的关键 */

transition: all .3s;

}

.slides li.active {

/* display: block; */

opacity: 1;

}

.slides .extra {

width: 700px;

height: 53px;

line-height: 53px;

position: absolute;

bottom: 0px;

background-color: rgba(0, 0, 0, 0.8);

z-index: 10;

}

.slides .extra h3 {

width: 82%;

margin: 0;

margin-right: 20px;

padding-left: 20px;

color: #98E404;

font-size: 28px;

float: left;

font-weight: 500;

font-family: "Microsoft Yahei", Tahoma, Geneva;

}

.slides .extra a {

width: 30px;

height: 29px;

display: block;

float: left;

margin-top: 12px;

margin-right: 3px;

background-image: url(./assets/icon_focus_switch.png);

}

.slides .extra .prev {

background-position: 0 0;

}

.slides .extra .prev:hover {

background-position: -30px 0;

}

.slides .extra .next {

background-position: -60px 0;

}

.slides .extra .next:hover {

background-position: -90px 0;

}

.indicator {

padding: 10px 0;

}

.indicator ul {

list-style-type: none;

margin: 0 0 0 4px;

padding: 0;

overflow: hidden;

}

.indicator ul li {

position: relative;

float: left;

width: 60px;

margin: 0 4px 0 5px;

text-align: center;

cursor: pointer;

}

.indicator li img {

display: block;

border: 0;

text-align: center;

width: 60px;

}

.indicator li .mask {

width: 60px;

height: 60px;

position: absolute;

top: 0;

left: 0;

background-color: rgba(0, 0, 0, 0.4);

}

.indicator li .border {

display: none;

width: 54px;

position: absolute;

bottom: 0;

left: 0;

z-index: 20;

border: 3px solid #98E404;

}

/* li里面的mask 和 border 刚开始都是显示的 */

/* 我们写一个样式css */

.indicator .active .mask {

display: none;

}

.indicator .active .border {

display: block;

}

</style>

</head>

<body>

<ul>

</ul>

<h3>第1张图的描述信息</h3>

</div>

<ul>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

let lis=document.querySelectorAll('.indicator li')

let piclis=document.querySelectorAll('.slides ul li')

let text=document.querySelector('.extra h3')

let prev=document.querySelector('.prev')

let next=document.querySelector('.next')

let main=document.querySelector('.main')

for(let i=0; i<lis.length;i++){

lis[i].addEventListener('mouseenter',function(){

document.querySelector('.indicator .active').classList.remove('active')

this.classList.add('active')

document.querySelector('.slides ul .active').classList.remove('active')

piclis[i].classList.add('active')

text.innerHTML=`第${i+1}张图的描述信息`

index=i

})

}

let index=0

next.addEventListener('click',function(){

index++

//index=index%lis.length

if(index===lis.length){

index=0}

common()

})

prev.addEventListener('click',function(){

index--

//index=index%lis.length

if(index<0){

index=lis.length-1}

common()

})

function common(){

document.querySelector('.indicator .active').classList.remove('active')

lis[index].classList.add('active')

document.querySelector('.slides ul .active').classList.remove('active')

piclis[index].classList.add('active')

text.innerHTML=`第${index+1}张图的描述信息`

}

let timer=setInterval(function(){

next.click()

},1000)

main.addEventListener('mouseenter',function(){

clearInterval(timer)

})

main.addEventListener('mouseleave',function(){

timer= setInterval(function(){

next.click()

},1000)

})

</script>

</body>

</html>