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

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

收藏内容 (0) (0)

博客作者：【qiang】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我们调试看看。

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

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

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

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

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

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

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