发表于: 2019-10-21 20:59:53

1 931


今天完成的事件

 应用input label做点击轮播图

<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<label for="r1" class="bar "></label>
<label for="r2" class="bar  "></label>
<label for="r3" class="bar  "></label>

这2个代码很重要, checked为选择器 ,

#r1:checked ~ .s1{
margin-left0;
}
#r2:checked ~ .s1{
margin-left-33.33%;
}
#r3:checked ~ .s1{
margin-left-66.66%;
}

首先在做轮播图的时候  要有个大的容器装这他们如图;

其实3附图都在一行排列 通过按钮input 属性选择margin-left把他们推过来的而已。这里就需要很好的布局,要知道图片的大小屏幕的宽度在点击按钮的时候推出多少来 这个需要自己慢慢去尝试。

这解释下ID#r1  这就相当于 我们写的input IDr1对着s1是图片的容器代码如下

<div class="slide s1">
<img src="轮播图01.png" alt="">
<div class="navigation s4">
<label for="r3" class="bar "></label>
<label for="r2" class="bar  "></label>
</div>
</div>

  这就点后第一个图片向向左移动-33.33%而图片的宽度是33.33%  第二个图片就是-66.66%它是这样把它们推出来的。

来切换3个图片。

现在问题是 如果把他们做成箭头来切换左右图片 现在还是有点懵逼 师兄给的代码貌似也看不懂 感觉越看懵逼。

问题解决:代码如下

<div class="slide s1">
<img src="轮播图01.png" alt="">
<div class="navigation s4">
<label for="r3" class="bar "></label>
<label for="r2" class="bar  "></label>
</div>
</div>

就是在每个图片上来个左右按钮跟着图片移动,这样移动到下一个图片的是就是 r1或r2可以可以左右切换 但这是假的因为按钮也会跟着图片切换只是切换后按钮所链接的地方不一样而已。



返回列表 返回列表
评论

    分享到