CSS3实例学习----点击滑动缩略图

Posted 2021-04-09 web前端技术高级指南

今天我们来学习CSS3，html5,Js的Web 前端知识。要实现的效果如下图所示：

其CSS部分的代码如下：

         

<div class="slider">

<input type="radio" name="slide_switch" id="id1"/>

<label for="id1">

<img width="100"/>

</label>

<img />

<!--Lets show the second image by default on page load-->

<input type="radio" name="slide_switch" id="id2" checked="checked"/>

<label for="id2">

<img width="100"/>

</label>

<img />

<input type="radio" name="slide_switch" id="id3"/>

<label for="id3">

<img width="100"/>

</label>

<img />

<input type="radio" name="slide_switch" id="id4"/>

<label for="id4">

<img width="100"/>

</label>

<img />

<input type="radio" name="slide_switch" id="id5"/>

<label for="id5">

<img width="100"/>

</label>

<img />

</div>

<!-- We will use PrefixFree - a script that takes care of CSS3 vendor prefixes

You can download it from http://leaverou.github.com/prefixfree/ -->

<script type="text/javascript"></script>

其编写过程的步骤视频如下：