<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 class="slider">
<div class="slider-wrapper">
<img src="./images/slider01.jpg" alt="" />
</div>
<div class="slider-footer">
<p>分享春日视频赢B站周边</p>
<ul class="slider-indicator">
<!-- 加value是为了后面点击圆点切换图片，因为不加value不知道怎么切换 -->
<li class="" value="0"></li>
<li value="1"></li>
<li value="2"></li>
<li value="3"></li>
<li value="4"></li>
<li value="5"></li>
<li value="6"></li>
<li value="7"></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
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.onclick=function(){
if(Rindex!=0){
Rindex--;
shuaxin();
}else{
Rindex=sliderData.length-1;
shuaxin();
}
}
next.onclick=function(){
if(Rindex!=sliderData.length-1){
Rindex++;
shuaxin();
}else{
Rindex=0;
shuaxin();
}
}
// 7.点击圆点，切换图片
for(var i=0;i<lis.length;i++){
lis[i].onclick=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>
jsB站轮播代码和图片
需积分: 0 90 浏览量
2024-04-20
14:22:41
上传
评论
收藏 2.42MB RAR 举报
代码.rar （9个子文件） 
代码 
B站轮播图.html 7KB images 
slider04.jpg 102KB slider05.jpg 78KB
slider08.png 1.13MB slider01.jpg 122KB slider03.jpg 56KB slider06.jpg 185KB slider07.png 579KB slider02.jpg 199KB资源评论
