仿B站一（轮播图的制作）仿B站一（轮播图的制作）

仿B站一（轮播图的制作）

前言概述
轮播图制作思路
html框架布局
用js实现滚动效果

前言概述从大一的时候就开始用B站，对B站有种深沉的热爱，很想要模仿B站做一个小demo，最近也在学习做网站方面的知识，在此记录一下我仿B站过程的点滴，先从第一步开始，以下是我制作的轮播图，点击右下角的小圈圈可以实现轮播图的滚动。

文章图片

文章图片

轮播图制作思路 【仿B站一（轮播图的制作）】首先写一段html和css代码，设置图片的大小和页面的基本布局，且其中有一个非常重要的属性我们需要用到，就是轮播图父类标签中的overflow:hidden属性，他会将超过父类大小的子类元素的部分进行隐藏，我们做轮播图需要用到这个属性。因为轮播图的实质就是只显示你指定的图片，而将其他的图片放到父元素所包含的区域之外，由于父元素设置了overflow:hidden属性所以就看不到其他的元素。当想要切换图片的时候，我们通过js进行控制，将指定图片移入父元素的区域当中，将其他图片移出区域，这就实现了轮播图的滚动。
html框架布局

文章图片文章图片文章图片文章图片 class="current_span"> > > >

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实现滚动效果详情请查看代码中的注释

="file:///E:/IdeaProject/bilibili_mvnn/src/main/webapp/static/bilibiliIndex/js/jquery-3.4.1.min.js" type="text/javascript">="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; } })