当前博客:实现一个常见的轮播跑马灯效果

153 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

上图的轮播在网页中十分的常见,我们这一次实现一个这样的效果。

首先我们新建一个项目,并且配置需要的库,这里我们用到了swiper滑动工具库。

这里是轮播的图片,可以自行下载,或者用自己的图片,注意尺寸比例。

按照步骤依次执行,创建成功之后,进入编辑区域,我们开始配置支持库。

配置好支持库,我们引入轮播的图片。

在项目目录也新建一个图像目录,并且把图像移到项目里面。

在这里我要强调一下,一个好的项目,它的目录必定是清晰的,规范的,如果你的项目目录杂七杂八,是极其不好的习惯

最后的结构是这样的,有点不同没关系,我更换了一下筛选器顺序。

接下来我们开始代码部分,首先还是复制一下轮播工具的基础代码。

<区块 类名="轮播工具" id="演示轮播">
    <区块 类名="轮播内容">
        <区块 类名="轮播块">1</区块>
        <区块 类名="轮播块">2</区块>
        <区块 类名="轮播块">3</区块>
    </区块>
    <区块 类名="轮播左按钮"></区块>
    <区块 类名="轮播右按钮"></区块>
    <区块 类名="轮播指示器"></区块>
</区块>
<脚本>
    //这里执行相关的JS代码
    新建对象 滑动轮播("#演示轮播");
</脚本>
Markup

然后我们对照设计图,对html里面的轮播块进行更改,那我们看一下轮播跑马灯的轮播块的结构。

它是一个上下结构,上面图像,下面是文字,文字区域也是上下结构,上面标题,下面内容,我们先创建4个盒子。

它是不是这么一个结构类型,现在我们对照设计图的内容,更改一下标签并添加内容。

<区块 类名="图像">
	<图片框 图像地址="@文件_t4.png" 错替文本="" />
</区块>
<区块 类名="文本">
	<标题4>jQuery左右滑动列表标题信息</标题4>
	<段落>jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。 jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。</段落>
</区块>
Markup

它写出来是不是这样的,然后我们把其它几个轮播块也改成这样,根据设计图,我们的轮播块最少3个哈,要不然跑马灯就不好看了。

我这里复制了4个,然后我们点击调试,先看看界面,不然都不知道写成什么样了。

现在是只有页面上一个轮播只有一个轮播块,并且不能循环,我们了解一下这一次要用的轮播配置项。

这是要用到的配置,可以在类库了解一下,或者查看文档。

新建对象 滑动轮播("#演示轮播", {
	[滑动轮播.配置.自动播放]: 真,
	[滑动轮播.配置.循环]: 真,
	[滑动轮播.配置.轮播间隔]: 30,
	[滑动轮播.配置.视图轮播数量]: 3
});
JavaScript

在不了解的命令右键,查看文档,就可以看到了,只针对官方的命令,自己写的是查看不到的哈。

我们再调试一下看看轮播的界面。

我们可以看到雏形已经有了,我们调整一下整体轮播的大小位置,和轮播块的样式。

/* 设置整体轮播的宽度,并且让它居中 */
#演示轮播 {
	宽度: 1200px;
	外边距: 0 自动;
	/* 这里设置10像素是为了显示轮播块10像素的阴影 */
	内边距: 10px;
}
/* 设置轮播块的背景颜色和阴影,让内容更加凸显 */
#演示轮播 .轮播块 {
	背景: 颜色值-白色;
	盒子-阴影: 0 0 10px 1px 颜色通道(0, 0, 0, 0.2);
}
CSS

我们调试一下,看一下界面样式。

样子是有了,我们还需要调整,首先删除指示器,然后轮播的左右箭头是放在轮播外面的,我们调整一下。

由于我们需要把左右箭头放在轮播的外面,我们需要在轮播的外层套一个容器,并且设置容器为相对定位。

首先我给整个轮播套了一个区块,然后给区块设置的宽度,居中和相对定位,然后我把左右箭头从轮播工具的区块移到了外边。

然后我们调试一下,看看界面样式。

然后我们细调样式了,首先把左右箭头的样式调整一下,我们需要调整成设计图那种,

这个很简单哈,设计图的切换按钮是外边一个边框,里面是一个箭头,然后我们看一下我们的切换按钮的结构。

我们可以看到,它的结构是一个区块,里面是伪类,伪类的内容是个字体图标箭头,这样就好设置了,

我们首先给区块设置宽度和高度,以及边框,然后设置边框圆角,然后我们把箭头当做文字来设置,设置居中+行高+颜色+字体大小。

/* 设置轮播按钮的样式 */
.轮播容器 .轮播左按钮,
.轮播容器 .轮播右按钮 {
	/* 设置宽度和高度,宽高一样这样设置的圆角是正圆 */
	宽度: 36px;
	高度: 36px;
	/* 设置边框以及圆角会出现一条圆形的边框线 */
	边框: #ccc 3px 实线;
	边框-圆角: 100%;
	/* 设置箭头的颜色以及居中对齐 */
	颜色: #ccc;
	行高: 36px;
	文本-对齐: 居中;
	/* 设置箭头的位置 */
	左侧: 0;
	/* 设置不透明度为0.7,鼠标移上去有个高亮效果 */
	不透明度: 0.7;
	/* 设置一个过度的效果,让过度有个动画 */
	过渡: 所有 0.3s;
}
/* 设置右键头的位置 */
.轮播容器 .轮播右按钮 {
	左侧: 自动;
	右侧: 0;
}
/* 设置箭头的大小 */
.轮播容器 .轮播左按钮:元素后,
.轮播容器 .轮播右按钮:元素后 {
	字体-大小: 22px;
	字体-粗细: 粗体;
}
/* 设置鼠标移入的高亮 */
.轮播容器 .轮播左按钮:鼠标移入,
.轮播容器 .轮播右按钮:鼠标移入 {
	不透明度: 1;
}
CSS

我们调试看看。

有点和轮播块接近,我们可以把轮播容器的宽度调大,或者把轮播工具调小,我这里把轮播工具调小一点(其实应该按照设计图的来,我这里是参考)。

界面差不多,然后我们调整轮播块的样式,首先我们把图像写成固定的宽高,然后给文本区域一个内边距。

我在保存的时候,发现 .文本 是系统内置的一个css样式名称,会被翻译,所以我需要修改一下 .文本

我把区块的 文本类名 更换成 文本内容类名,然后继续样式的设置。

/* 设置图片的宽高,以及设置图片为块级元素,这样图片占满整个区块*/
#演示轮播 .轮播块 .图像 图片框 {
	宽度: 100%;
	高度: 202px;
	显示模式: 块级元素;
}
/* 设置文本,给文本设置一个左右内边距,与边框隔开 */
#演示轮播 .轮播块 .文本内容 {
	内边距: 0 20px;
}
CSS

然后我们可以设置一个标题单行文本溢出,以及段落多行文本溢出,以及轮播块的高度,这样在文字或多或少的时候,轮播块的高度就不会出现一块长一块短的情况。

/* 设置文本标题单行文本溢出 */
#演示轮播 .轮播块 .文本内容 标题4 {
	空格: 不换行;
	文本-溢出: 省略号;
	溢出: 隐藏;
}
/* 设置文本段落最多显示4行 */
#演示轮播 .轮播块 .文本内容 段落 {
	显示模式: -谷歌内核-盒子;
	-谷歌内核-盒子排列: 垂直排列;
	-谷歌内核-行数限制: 4;
	文本-溢出: 省略号;
	溢出: 隐藏;
}
/* 设置鼠标移入到轮播块,有一个向上提升的效果 */
#演示轮播 .轮播块:鼠标移入 {
	转换: 平移y轴(-5px);
}
/* 下面的类名我在上面有设置,这里添加了一个高度和一个过度效果 */
/* 设置轮播块的背景颜色和阴影,让内容更加凸显 */
#演示轮播 .轮播块 {
	高度: 370px;
	背景: 颜色值-白色;
	盒子-阴影: 0 0 10px 1px 颜色通道(0, 0, 0, 0.2);
	过渡: 所有 0.3s;
}
CSS

那么到这里,一个轮播跑马灯的效果算是做完了,下面是博客写出来的代码压缩包。

轮播跑马灯.zip

默认排序
Generic placeholder image
Generic placeholder image
挨踢IT小贝 Time: 2023-03-23 18:26:13

厉害

 


实现一个常见的轮播跑马灯效果