纯CSS实现幻灯片效果

先上代码:




  
  css幻灯片
  



    

实现的效果:点击第一张文字显示第一个图片,点击第二张文字显示第二张皮片,点击第三张文字显示第三张图片

纯CSS实现幻灯片效果_第1张图片

纯CSS实现幻灯片效果_第2张图片

纯CSS实现幻灯片效果_第3张图片

主要原理就是通过input的radio属性单选框和lable按钮的绑定,点击按钮触发选择input单选框,从而给input单选框的兄弟元素图片比偶爱去哪赋予样式,实现图片的显示和隐藏,再把input单选框隐藏即可简单实现幻灯片特效。

你可能感兴趣的:(CSS)