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

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

收藏内容 (0) (0)

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

开始正式代码部分，首先我们要知道轮播基础代码：

<!-- 轮播工具的基础代码,id是自己更改的,方便js的调用 -->
<区块 类名="轮播工具" id="演示轮播">
    <!-- 这里包裹轮播的内容 -->
	<区块 类名="轮播内容">
	    <!-- 轮播块包裹着每一项的轮播 -->
		<区块 类名="轮播块">1</区块>
		<区块 类名="轮播块">2</区块>
		<区块 类名="轮播块">3</区块>
	</区块>
	<!-- 这里是轮播的左右两个按钮 -->
	<区块 类名="轮播左按钮"></区块>
	<区块 类名="轮播右按钮"></区块>
	<!-- 这里是轮播工具的指示器,就是轮播下面的点点 -->
	<区块 类名="轮播指示器"></区块>
</区块>
<脚本>
	//这里是轮播工具的基础调用
	新建对象 滑动轮播("#演示轮播");
</脚本>

直接复制上面的代码到编辑器，这个时候只是基础的轮播代码，轮播块里面没有内容，看不出什么效果，我们给轮播块里面加上图片。

上面的图片，我给每一个轮播块下面放置了一个超链接，然后再在超链接里面放置图片，

因为一般情况下，轮播是用来导流的，它可以让用户点击进入你想要的文章、活动、产品之类的推广啊，

我们看图片框，它设置图像地址，我们内置了一个@快捷功能，它可以快捷的弹出文件，代码文件，事件等，

那么弹出图片的话，就是@文件，地址可能不一样，不必和我的图片名称一样哈。

调试出来的界面太大了，并且图片也没有占满，我们给轮播加点样式调整一下。

/* 给轮播设置一个宽度和高度 */
#演示轮播 {
	宽度: 1226px;
	高度: 460px;
}
/* 让轮播块里面的图片撑满 */
#演示轮播 .轮播块 图片框 {
	宽度: 100%;
	显示模式: 块级元素;
}

接着我们调整箭头和指示器的样式。

/* 设置轮播左按钮离轮播左侧234像素 */
#演示轮播 .轮播左按钮 {
	左侧: 234px;
}
/* 设置轮播右按钮离轮播右侧0像素 */
#演示轮播 .轮播右按钮 {
	右侧: 0;
}
/* 设置轮播按钮的宽度和高度 */
#演示轮播 .轮播左按钮,
#演示轮播 .轮播右按钮 {
	宽度: 41px;
	高度: 69px;
}
/* 设置轮播按钮鼠标移入的时候显示一个半透明的黑色背景 */
#演示轮播 .轮播左按钮:鼠标移入,
#演示轮播 .轮播右按钮:鼠标移入 {
	背景: 颜色通道(0, 0, 0, 0.4);
}
/* 设置轮播左右箭头 */
#演示轮播 .轮播左按钮:元素后,
#演示轮播 .轮播右按钮:元素后 {
	/* 箭头是字体图标,我们设置箭头大小28像素,颜色白色 */
	字体-大小: 28px;
	颜色: #fff;
	/* 在纯白的背景上不被凸显,加一个黑色透明的文字阴影 */
	文本-阴影: 颜色通道(0, 0, 0, 0.4) 0 0 5px;
}

继续调整指示点的样式。

/* 设置轮播指示器 */
#演示轮播 .轮播指示器 {
	/* 设置轮播指示器下面的元素右对齐,这时候指示点会在轮播的右边 */
	文本-对齐: 右侧;
	/* 右边太近了,加上15像素的右内边距 */
	右内边距: 15px;
	/* 因为宽度是100%,又加了15像素的右边距,宽度超出了,
	设置下面的命令,可以把内边距和边框算在宽度里面 */
	盒子模型: 边界框;
}
/* 设置指示器下面指示点的样式 */
#演示轮播 .轮播指示器 .轮播指示点 {
	/* 设置指示点的宽高 */
	宽度: 6px;
	高度: 6px;
	/* 设置指示点的边框 */
	边框: 2px 实线 #fff;
	边框-颜色: hsla(0, 0%, 100%, 0.3);
	/* 设置指示点的圆角 */
	边框-圆角: 10px;
	/* 设置指示点的背景 */
	背景: 颜色通道(0, 0, 0, 0.4);
	/* 因为指示点内置的不透明度为0.2,这里重置为1 */
	不透明度: 1;
}
/* 选中的指示点样式 */
#演示轮播 .轮播指示器 .轮播指示选中点 {
	/* 改变指示点的背景和边框颜色 */
	背景: hsla(0, 0%, 100%, 0.4);
	边框-颜色: 颜色通道(0, 0, 0, 0.4);
}