当前博客：实现小米商城的轮播（3）

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

收藏内容 (0) (0)

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

我们这篇实现小米商城的左侧菜单部分。

首先我们在轮播工具里面先做一个列表。

<区块 类名="商品分类列表">
	<无序列表>
		<列表项>
			<超链接 链接地址="">
				手机
				<斜体文本>&gt;</斜体文本>
			</超链接>
		</列表项>
		<列表项>
			<超链接 链接地址="">
				电视
				<斜体文本>&gt;</斜体文本>
			</超链接>
		</列表项>
		<列表项>
			<超链接 链接地址="">
				家电
				<斜体文本>&gt;</斜体文本>
			</超链接>
		</列表项>
		<列表项>
			<超链接 链接地址="">
				笔记本 平板
				<斜体文本>&gt;</斜体文本>
			</超链接>
		</列表项>
		<列表项>
			<超链接 链接地址="">
				出行 穿戴
				<斜体文本>&gt;</斜体文本>
			</超链接>
		</列表项>
		<列表项>
			<超链接 链接地址="">
				耳机 音箱
				<斜体文本>&gt;</斜体文本>
			</超链接>
		</列表项>
		<列表项>
			<超链接 链接地址="">
				健康 儿童
				<斜体文本>&gt;</斜体文本>
			</超链接>
		</列表项>
		<列表项>
			<超链接 链接地址="">
				生活 箱包
				<斜体文本>&gt;</斜体文本>
			</超链接>
		</列表项>
		<列表项>
			<超链接 链接地址="">
				智能 路由器
				<斜体文本>&gt;</斜体文本>
			</超链接>
		</列表项>
		<列表项>
			<超链接 链接地址="">
				电源 配件
				<斜体文本>&gt;</斜体文本>
			</超链接>
		</列表项>
	</无序列表>
</区块>

然后我们给这个列表加样式。

/* 设置商品分类列表 */
#演示轮播 .商品分类列表 {
    /* 首先商品分类列表是定位在轮播工具的左边的,因为轮播工具有个相对定位,
    我们这里之间写个绝对定位,位置左上角为起点 */
	定位: 绝对定位;
	顶部: 0;
	左侧: 0;
	/* 设置这个列表的宽度和高度 */
	宽度: 234px;
	高度: 460px;
	/* 设置一个顶部和底部的内边距 */
	内边距: 20px 0;
	/* 设置边界框,把内边距和边框的宽度也算在区块里面 */
	盒子模型: 边界框;
	/* 设置里面的字体大小和背景颜色 */
	字体-大小: 14px;
	/* 设置一个黑色半透明的背景,可以透视看到轮播图 */
	背景: 颜色通道(105, 101, 101, 0.6);
	/* 增加堆叠顺序,防止被轮播块给覆盖 */
	堆叠顺序: 99;
}
/* 重置网页无序列表的内外边距 */
#演示轮播 .商品分类列表 无序列表 {
	内边距: 0;
	外边距: 0;
}
/* 重置网页列表项的列表样式 */
#演示轮播 .商品分类列表 列表项 {
	列表-样式: 无效;
}
/* 设置列表项下面的超链接的样式 */
#演示轮播 .商品分类列表 列表项 超链接 {
    /* 给超链接设置一个相对定位,方便右键头绝对定位到超链接右侧 */
    定位: 相对定位;
    /* 设置为块级元素撑开盒子,鼠标移入区块就能点击,不用移到文字上 */
	显示模式: 块级元素;
	/* 设置一个做内边距,让文字和轮播左侧有点距离 */
	左内边距: 30px;
	/* 设置超链接的高度、行高、颜色 */
	高度: 42px;
	行高: 42px;
	颜色: #fff;
	/* 设置边界框,让内边距和边框都算在宽高里面 */
	盒子模型: 边界框;
	/* 网页的超链接会有一个下划线,把下划线重置掉,一般引入了框架,会自动重置这些元素自带样式 */
	文本-装饰: 无效;
}
/* 设置超链接右边的箭头样式,本来应该用图标什么的,这里作为一个模块,就不引入太多东西,直接用个右括号模拟 */
#演示轮播 .商品分类列表 列表项 斜体文本 {
    /* 首先设置一个绝对定位,把箭头定位到超链接的右侧,上下居中的位置 */
	定位: 绝对定位;
	顶部: 12px;
	右侧: 20px;
	/* 设置箭头的大小、行高、颜色 */
	字体-大小: 16px;
	行高: 16px;
	颜色: #e0e0e0;
	/* 斜体文本的初始样式是倾斜的,我们重置它的样式,让它正常显示 */
	字体-样式: 正常;
	/* 换这个字体可以让箭头更加好看 */
	字体-组: cursive;
}
/* 给列表项设置一个鼠标移入的样式,当鼠标移入的时候,改变列表项的背景颜色 */
#演示轮播 .商品分类列表 列表项:鼠标移入 {
	背景: #ff6700;
}

然后我们再给分类列表，制作商品列表。

还是先写个商品列表出来，这个列表是一列一列的，大家可以用4个列表，或者设置宽度，高度，让列表竖向排列换行。

我这里采取的第二种方法。

<区块 类名="商品列表">
	<描述列表>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 12C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 13C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 14C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 15C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 16C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 17C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 18C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 19C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 20C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 21C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 22C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 23C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 24C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 25C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 26C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 27C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 28C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 29C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 30C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 31C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 32C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 33C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 34C</行内元素></超链接>
		</描述列表项>
		<描述列表项>
			<超链接 链接地址=""><图片框 图像地址="@文件_232c1ede1284125cc4dcee5c7565d8fe.webp" /><行内元素>Redmi 35C</行内元素></超链接>
		</描述列表项>
	</描述列表>
</区块>

图片自己引哈！名称可能不一样！

我们再加上样式。

/* 设置商品列表的样式 */
#演示轮播 .商品列表 {
    /* 首先设置商品列表的绝对定位 */
	定位: 绝对定位;
	/* 左测234像素,隔开分类列表的距离 */
	左侧: 234px;
	/* 放置轮播工具的顶部 */
	顶部: 0;
	/* 增加层级,防止被轮播块遮住 */
	堆叠顺序: 24;
	/* 设置它的高度 */
	高度: 458px;
	/* 加一条边框与外面的背景隔开 */
	边框: 1px 实线 #e0e0e0;
	/* 左测是分类列表,不需要左测边框 */
	边框-左侧: 0;
	/* 设置背景遮住轮播图 */
	背景: #fff;
	/* 和边框一样,设置一个阴影和其它内容隔开,让区块凸出 */
	盒子-阴影: 0 8px 16px 颜色通道(0, 0, 0, 0.18);
	/* 在正常情况下,隐藏商品列表,鼠标移入商品分类的时候显示 */
	显示模式: 无效;
}
/* 设置商品列表 */
#演示轮播 .商品列表 描述列表 {
    /* 重置描述列表的样式,默认有个外边距,重置为0 */
	外边距: 0;
	/* 设置一个默认的宽度,高度占比100% */
	宽度: 992px;
	高度: 100%;
	/* 设置商品列表的显示模式为弹性布局 */
	显示模式: 弹性布局;
	/* 当商品列表排不下的时候,换行 */
	弹性布局-换行: 换行;
	/* 让商品列表竖向排列 */
	弹性布局-方向: 垂直显示;
}
/* 设置商品列表里面的商品 */
#演示轮播 .商品列表 描述列表 描述列表项 {
    /* 描述列表项默认有个外边距,我们把它重置为0 */
	外边距: 0;
	/* 每一个商品的宽度为248像素 */
	宽度: 248px;
}
/* 设置商品的超链接 */
#演示轮播 .商品列表 描述列表 描述列表项 超链接 {
    /*设置一个内边距,让商品个其它商品有空隙*/
	内边距: 18px 20px;
	/* 设置高度、行高、颜色 */
	行高: 40px;
	高度: 76px;
	颜色: #333;
	/* 设置一个颜色的过度效果,鼠标移入更好颜色 */
	过渡: 颜色 0.2s;
	/* 设置文本左对齐 */
	文本-对齐: 左侧;
}
/* 设置商品文字 */
#演示轮播 .商品列表 描述列表 描述列表项 行内元素 {
    /* 留一个52像素的距离放置图片*/
	左边距: 52px;
	/* 设置行高 */
	行高: 40px;
	/* 行内元素设置成块级元素把当前区块占满 */
	显示模式: 块级元素;
	/* 单行文本溢出显示省略号 */
	空格: 不换行;
	文本-溢出: 省略号;
	溢出: 隐藏;
}
/* 设置商品的图片 */
#演示轮播 .商品列表 描述列表 描述列表项 超链接 图片框 {
    /* 设置图片的宽度和高度 */
	宽度: 40px;
	高度: 40px;
	/* 设置商品图片浮动左侧,脱离文档流,它能和刚才的行内元素共存,并且行内元素设置了52像素的左边距,所以两者不会重叠 */
	浮动: 左侧;
}
/* 当鼠标移入到商品分类的时候,显示里面的商品列表 */
#演示轮播 .商品分类列表 列表项:鼠标移入 .商品列表 {
	显示模式: 块级元素;
}
/* 当鼠标移到商品的时候,文字颜色变色 */
#演示轮播 .商品列表 描述列表 描述列表项:鼠标移入 超链接 {
	颜色: #ff6700;
}

小米商城的分类列表里面的商品有可能不是4列，是3列，2列，1列，我们需要在后端循环的时候，做一个判断，我们现在一列是6个商品，那么就是总商品/6，取整，有余数进一，

前端代码部分这么设置

、这里的3就是3列的意思。

我们最后优化一下轮播的小细节，首先小米商城的轮播可以循环播放，并且它是淡入淡出的，那我们的轮播脚本这么设置。

新建对象 滑动轮播("#演示轮播", {
	[滑动轮播.配置.循环]: 真,
	[滑动轮播.配置.切换效果]: 滑动轮播.切换效果.淡入,
	[滑动轮播.配置.切换速度]: 1000,
});

下载案例会看到一个非常柔和的淡入切换效果。那么小米商城轮播效果就到这里了，下面是博客做出来的案例。

小米商城的轮播特效.zip

评论信息

默认排序 

当前博客：实现小米商城的轮播（3）

测试账号

热门博客

最新博客

实现小米商城的轮播（3）