实现效果如下:
点击左侧或者右侧按钮,切换图片。
设计思路如下:
(1)定义图片数组;
(2)添加图片索引index,从0开始;
(3)利用@click实现src属性绑定;
(4)图片切换逻辑:当左侧索引不为0时,左侧按钮可以实现切换;当右侧索引小于图片索引长度时,右侧按钮可以实现右侧切换。
(5)图片显示。当左侧按钮可以点击时,显示对应图片,并且左侧按钮实现索引index--;右侧则相反。
CSS代码如下:
* {
margin: 0;
padding: 0;
}
html,
body,
#mask {
width: 100%;
height: 100%;
}
#mask {
background-color: #c9c9c9;
position: relative;
}
#mask .center {
position: absolute;
background-color: #fff;