仿B站一（轮播图的制作）
仿B站一（轮播图的制作）
- 前言概述
- 轮播图制作思路
- html框架布局
- 用js实现滚动效果
前言概述
从大一的时候就开始用B站，对B站有种深沉的热爱，很想要模仿B站做一个小demo，最近也在学习做网站方面的知识，在此记录一下我仿B站过程的点滴，先从第一步开始，以下是我制作的轮播图，点击右下角的小圈圈可以实现轮播图的滚动。
轮播图制作思路
首先写一段html和css代码，设置图片的大小和页面的基本布局，且其中有一个非常重要的属性我们需要用到，就是轮播图父类标签中的overflow:hidden属性，他会将超过父类大小的子类元素的部分进行隐藏，我们做轮播图需要用到这个属性。因为轮播图的实质就是只显示你指定的图片，而将其他的图片放到父元素所包含的区域之外，由于父元素设置了overflow:hidden属性所以就看不到其他的元素。当想要切换图片的时候，我们通过js进行控制，将指定图片移入父元素的区域当中，将其他图片移出区域，这就实现了轮播图的滚动。
html框架布局
<body>
<div id="banner">
<div class="slider-img">
<a href="#">
<img src="file:///C:/Users/Administrator/Desktop/gongcheng/lunbotu/2.webp">
a>
<a href="#">
<img src="file:///C:/Users/Administrator/Desktop/gongcheng/lunbotu/3.webp">
a>
<a href="#">
<img src="file:///C:/Users/Administrator/Desktop/gongcheng/lunbotu/4.webp">
a>
<a href="#" ><img
src="file:///C:/Users/Administrator/Desktop/gongcheng/lunbotu/5.webp"
alt="#">a>
div>
<div class="slider-btn">
<span class="current_span">span>
<span>span>
<span>span>
<span>span>
div>
div>
body>
id = banner 的div设置其宽为550px,高为242像素，水平居中，设置position为relative。
#banner{
width: 550px;
height: 242px;
margin: 0 auto;
position: relative;
}
class= slider-img 的div 用来存放图片，其css样式如下，其中overflow属性用来设置超出页面范围的元素不显示，这个属性在轮播图中非常重要。
.slider-img{
position: relative;
overflow: hidden;
width: 550px;
height: 242px;
}
a标签的css属性如下，这里的绝对定位可以加也可以不加。
.slider-img a{
position: absolute;
width: 550px;
height: 242px;
}
.slider-img a img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
设置点击按钮的样式，其中.current_span类是表示当前选中的按钮的样式，其中position：absolute表示的是相对于父节点的绝对定位，right：10px表示距离父节点有边界10px，bottom：5px，表示距离父节点下边界5px，这样就可以将按钮定位到父节点的右下角。
#banner .slider-btn{
position: absolute;
right: 10px;
bottom: 5px;
height: 18px;
}
#banner .slider-btn span{
display: inline-block;
width: 18px;
height: 18px;
margin: 0 2px;
background-color: #fff;
background: url(file:///E:/IdeaProject/bilibili_mvnn/src/main/webapp/static/bilibiliIndex/images/page_icons.png) no-repeat -855px -790px;
}
#banner .slider-btn .current_span{
background-position: -855px -727px;
}
用js实现滚动效果
详情请查看代码中的注释
<script src="file:///E:/IdeaProject/bilibili_mvnn/src/main/webapp/static/bilibiliIndex/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//找到a标签
var $as = $("#banner").find("a");
//找到a标签所对应的的span标签
var $slider_btn = $(".slider-btn").find("span");
//设置轮播图中当前的图片为第一张图片
var current_index = 0;
var width = $as.eq(0).width();
//图片位置初始化，将除了第一张图片之外的图片全部移到.slider-img类范围之外进行隐藏
for(var i = 1; i < $as.length; i ++){
$($as[i]).css({left: width});
}
//开启定时器，每隔3秒钟进行滚动
var auto_rotation = setInterval(Rotation_auto,3000);
//当鼠标移入时停止自动轮播，响应鼠标单击事件
$("#banner").mouseover(function(){
clearInterval(auto_rotation);
$slider_btn.click(Rotation_click);
});
//当鼠标移出时开启自动轮播
$("#banner").mouseout(function(){
auto_rotation = setInterval(Rotation_auto,3000);
});
//设置右下角小图标的样式
function index_change(index) {
$slider_btn.removeClass("current_span");
$slider_btn.eq(index).addClass("current_span")
}
//图片轮播逻辑
function Rotation(next_index){
//如果点击的按钮是当前按钮的话，什么也不做
if (next_index == current_index)
return;
//如果点击的是处于当前图片的下一张图片，也就是向右边轮播
else if (next_index > current_index){
//将当前图片移出区域
$as.eq(current_index).animate({left: -width});
$as.eq(next_index).css({left: width});
}
//向左边轮播
else{
//将当前图片移出区域
$as.eq(current_index).animate({left: width});
$as.eq(next_index).css({left: -width});
}
//将下一张图片移入区域
$as.eq(next_index).animate({left: 0});
}
//鼠标单击的轮播时间
function Rotation_click() {
var index = $(this).index();
//改变小图标所在位置
index_change(index);
//轮播图效果
Rotation(index);
current_index = index;
}
//自动轮播事件
function Rotation_auto(){
var index = (current_index + 1) % $slider_btn.length;
index_change(index);
Rotation(index);
current_index = index;
}
})
</script>