纯CSS幻灯片

CSS幻灯片切换,不支持自动滚动的功能,当然css3的animation可以做到,今天先分享一些不自动滚动的动画.

实现原理是使用古老的锚点来定位图片当前位置。看了一下网上的这些东西,我感觉就是这玩意不实用,实际中可能不会用到,倒是CSS3的自动滚动比较实用。本文仅为探讨所谓的CSS幻灯片。不做深入研究。

css-slide1

css-slide2

.slider-con{width:310px; height: 310px; overflow: hidden;}
.slider-con div{position: relative; width: 310px; height: 310px;}
.slider-con div img{max-width:300px; height: auto; display: block;}
.slider-con div{text-align: center;}

解决思路

  1. 设置外层图片宽和高,并且超出的话隐藏。
  2. 设置里面的每一个锚点的高度为外层的高度。图片和文字加起来不超过这个层的高度。
  3. 上一张和下一张的链接就是锚点的跳转,点击就调转到另一个锚点的位置了。

同理第二张图片的效果也是通过给图片外层设置高度和宽度,超出隐藏,而里面的每张图片设置为跟外层一样高。下面的小图片则是锚点的链接。

css-slide3

实现原来跟第一屏的一样,只不过这个相对比较复杂,把上一张和下一张换成图片展示。具体看演示。

css-slide4

这个效果则是图片经过的时候显示出来,左边的大图是一个相对于外层的一个定位。

演示

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:纯CSS幻灯片 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/css-slide.html)

发表评论

请登录后发表评论:

“纯CSS幻灯片”有1个评论

  1. 诸葛小觉

    呵呵 不错的玩意~~~

    登录回复