js-B站轮播_b站图片轮播html-CSDN博客

本文链接：https://blog.csdn.net/SSSXiaoChen/article/details/137998558

js的课后作业，主要实现：

1.每次打开自动刷新；

2.图片底部样式和文字随图片改变；

3.小圆点样式改变；

4.左右切换图片；

5.点击圆点切换图片；

6.自动切换

最终样式：

代码如下：

<!DOCTYPE html>

<head>

<title>B站轮播图</title>

<style>

* {

box-sizing: border-box;

}

.slider {

width: 560px;

height: 400px;

overflow: hidden;

}

.slider-wrapper {

width: 100%;

height: 320px;

}

.slider-wrapper img {

width: 100%;

height: 100%;

display: block;

}

.slider-footer {

height: 80px;

background-color: rgb(90, 83, 53);

padding: 12px 12px 0 12px;

position: relative;

}

/* 安装定位左右箭头的按钮 */

.slider-footer .toggle {

position: absolute;

right: 0;

top: 12px;

display: flex;

}

/* 包装左右箭头按钮 */

.slider-footer .toggle button {

margin-right: 12px;

width: 28px;

height: 28px;

appearance: none;

border: none;

background: rgba(255, 255, 255, 0.1);

color: #fff;

border-radius: 4px;

cursor: pointer;

}

.slider-footer .toggle button:hover {

background: rgba(255, 255, 255, 0.2);

}

.slider-footer p {

margin: 0;

color: #fff;

font-size: 18px;

margin-bottom: 10px;

}

.slider-indicator {

margin: 0;

padding: 0;

list-style: none;

display: flex;

align-items: center;

}

.slider-indicator li {

width: 8px;

height: 8px;

margin: 4px;

border-radius: 50%;

background: #fff;

opacity: 0.4;

cursor: pointer;

}

/* li 使用时变白色 */

.slider-indicator li.active {

width: 12px;

height: 12px;

opacity: 1;

}

</style>

</head>

<body>

<!-- 分析：

①：准备一个对象数组，里面包含详细信息

②：利用随机数，选出数组对应的对象，用于更换图片、文字和背景颜色

-->

<body>

</div>

<p>分享春日视频赢B站周边</p>

</ul>

</div>

var img=document.querySelector('img');

var p=document.querySelector('p');

var sf=document.querySelector('.slider-footer');

var lis=sf.querySelectorAll('li');

var prev=document.querySelector('.prev');

var next=document.querySelector('.next');

// 初始数据对象数组

const sliderData = [

{ url: './images/slider01.jpg', title: '分享春日视频赢B站周边', color: 'rgb(90, 83, 53)' },

{ url: './images/slider02.jpg', title: '今日谷雨，宜玩物华弥新！', color: 'rgb(172, 154, 124)' },

{ url: './images/slider03.jpg', title: '高分爆笑日剧！是不完美的大人又如何', color: 'rgb(182, 199, 198)' },

{ url: './images/slider04.jpg', title: '【直播预约中】余华首部成名作来了！', color: 'rgb(193, 157, 113)' },

{ url: './images/slider05.jpg', title: '看明星UP主的AB面', color: 'rgb(40, 57, 52)' },

{ url: './images/slider06.jpg', title: '热血“赛车手”速来集合', color: 'rgb(108, 83, 85)' },

{ url: './images/slider07.png', title: '任何时间，任何地点，超级森西，认真做饭', color: 'rgb(140, 116, 75)' },

{ url: './images/slider08.png', title: '神仙打架《天赐的声音5》即将开唱>>', color: 'rgb(94, 97, 115)' },

]

// 1.生成一个随机数,拿到随机的对象

function getRandomIntInclusive(min, max) {

const minCeiled = Math.ceil(min);

const maxFloored = Math.floor(max);

return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // 包含最小值和最大值

}

var Rindex=getRandomIntInclusive(0,sliderData.length-1);

// 调用

shuaxin();

// 封装方法

function shuaxin(){

// 2.把对应的图片渲染到标签里面

img.src=sliderData[Rindex].url;

// 3.更换p的文字内容

p.innerText=sliderData[Rindex].title;

// 4.修改背景颜色

sf.style.backgroundColor=sliderData[Rindex].color;

// 5.修改对应小圆点样式

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

lis[i].className='';

}

lis[Rindex].className='active';

}

// 6.左右切换

prev.οnclick=function(){

if(Rindex!=0){

Rindex--;

shuaxin();

}else{

Rindex=sliderData.length-1;

shuaxin();

}

next.οnclick=function(){

if(Rindex!=sliderData.length-1){

Rindex++;

shuaxin();

}else{

Rindex=0;

shuaxin();

}

// 7.点击圆点，切换图片

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

lis[i].οnclick=function(){

Rindex=this.value;

shuaxin();

}

// 8.自动轮播

function qiehuan(){

if(Rindex!=sliderData.length-1){

Rindex++;

shuaxin();

}else{

Rindex=0;

shuaxin();

}

setInterval(qiehuan,2000);//循环调用qiehuan()函数，时间间隔为2000ms

//setInterval()函数，按照指定的周期（按毫秒计）来调用函数或表达式

</script>

</body>

</html>