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

网页主体 {
	外边距: 0;
}

/* 因为轮播指示器的点是生成出来的,大家可以审查元素,找到指示器点的类名,复制过来 */
#演示轮播 .轮播指示器 .swiper-pagination-bullet {
    /* 指示点的宽度和高度 */
	宽度: 35px;
	高度: 4px;
	/* 给指示点的4个角设置4像素的圆角 */
	边框-圆角: 4px;
	/* 设置一个半透明的白色背景 */
	背景-颜色: 颜色通道(255, 255, 255, 0.6);
	/* 给指示点设置一个阴影,在白色底图上面,白色的背景会显示不出来指示点,加一个半透明的黑色阴影可以凸显指示点 */
	盒子-阴影: 颜色通道(0, 0, 0, 0.6) 0 0 3px;
	/* 过渡: 所有 0.3s;这个意思是如果这个元素的宽高,颜色,转换等属性发生了变化,那么它会以动画的形式过渡,所有就是所有元素的意思,0.3s,会用0.3s的时间完成过渡动画 */
	过渡: 所有 0.3s;
}
/* 设置当前的轮播块指示点 */
#演示轮播 .轮播指示器 .swiper-pagination-bullet-active {
    /* 让它的背景颜色从半透明变成纯白色 */
	背景-颜色: 颜色通道(255, 255, 255, 1);
}

/* 设置轮播工具的左右按钮 */
#演示轮播 .轮播左按钮,
#演示轮播 .轮播右按钮 {
	/* 设置轮播左右按钮的宽度高度 */
	宽度: 50px;
	高度: 50px;
	/* 让轮播左右按钮里面的箭头居中 */
	文本-对齐: 居中;
	/* 设置和高度一样高的行高让里面的箭头上下居中,现在箭头应该是在这个元素的正中央 */
	行高: 50px;
	/* 设置一个半透明的黑色背景 */
	背景: 颜色通道(0, 0, 0, 0.4);
	/* 给这个按钮加个10像素的圆角 */
	边框-圆角: 10px;
	/* 设置按钮在,距离轮播的左边50像素的位置,因为轮播按钮是绝对定位的,所以我们可以直接设置它的位置 */
	左侧: 50px;
	/* 设置一个0.7的不透明度,我们等会儿做一个鼠标移入高亮的效果 */
	不透明度: 0.7;
	/* 设置一个过渡的动画 */
	过渡: 所有 0.3s;
}
/* 因为刚刚适合轮播左按钮一起设置的,所以现在轮播右按钮的位置不对,我们重置一下右按钮的位置 */
#演示轮播 .轮播右按钮 {
	/* 首先把左侧设置成自动,它会重置上面设置的左侧属性 */
	左侧: 自动;
	/* 然后设置按钮在,距离轮播右侧50像素的位置 */
	右侧: 50px;
}
/* 轮播按钮的箭头是设置在轮播按钮的伪类 元素后 上面的,我们需要更改一下箭头的颜色和大小 */
#演示轮播 .轮播右按钮:元素后,
#演示轮播 .轮播左按钮:元素后 {
	/* 它是字体图标,我们可以像设置字体一样设置,先设置它的颜色是白色 */
	颜色: #fff;
	/* 设置它的字体大小24像素 */
	字体-大小: 24px;
	/* 设置它的字体粗细位粗体 */
	字体-粗细: 粗体;
}
/* 设置一个鼠标移入的效果 */
#演示轮播 .轮播左按钮:鼠标移入,
#演示轮播 .轮播右按钮:鼠标移入 {
	/* 在鼠标移入按钮的时候,它的透明度变成1,会有一个高亮的效果 */
	不透明度: 1;
}