纯CSS幻灯片切换，不支持自动滚动的功能，当然CSS3的animation可以做到，今天先分享一些不自动滚动的动画.
实现原理是使用古老的锚点来定位图片当前位置。看了一下网上的这些东西，我感觉就是这玩意不实用，实际中可能不会用到，倒是CSS3的自动滚动比较实用。本文仅为探讨所谓的CSS幻灯片。不做深入研究。
.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;}
解决思路
- 设置外层图片宽和高，并且超出的话隐藏。
- 设置里面的每一个锚点的高度为外层的高度。图片和文字加起来不超过这个层的高度。
- 上一张和下一张的链接就是锚点的跳转，点击就调转到另一个锚点的位置了。
同理第二张图片的效果也是通过给图片外层设置高度和宽度，超出隐藏，而里面的每张图片设置为跟外层一样高。下面的小图片则是锚点的链接。
实现原来跟第一屏的一样，只不过这个相对比较复杂，把上一张和下一张换成图片展示。具体看演示。
这个效果则是图片经过的时候显示出来，左边的大图是一个相对于外层的一个定位。
