这是一次作业，但在无参考代码下自己写了一部分，然后参考了网友博客完成了部分，所以就不标为原创了，只是网友写得有点高深了，我就靠自己理解又写了一份。只是记录下来而已。
先看下默认打开效果，图片文件是老师给的，好像是传智播客的。
鼠标移上去（:hover）看到的效果
html代码部分，写的比较简单：
<div ><ul><li><span>付出不亚于任何人的努力</span><span>付出不亚于任何人的努力</span></li><li><span>谦虚戒骄</span><span>谦虚戒骄</span></li><li><span>天天反省</span><span>天天反省</span></li><li><span>活着就要感谢</span><span>活着就要感谢</span></li><li><span>积善行、思利他</span><span>积善行、思利他</span></li><li><span>不要有感性的烦恼</span><span>不要有感性的烦恼</span></li></ul></div>
主要效果在CSS代码中，也就是CSS3才能实现效果
li{list-style: none;width: 166px;height: 360px;float: left;background: no-repeat;position: relative;transition: 1s;box-shadow: -3px 0 5px #555;}li span{line-height: 360px;color: #fff;font-size: 18px;font-weight: bold;text-align: center;transition: 1s;/*背景及位置*/position: absolute;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);transition:all 1s;}/*使用背景方法放置图片，如果需要做成动态网页，直接在html标签里写成背景图片即可实现动态添加*/li:nth-child(1){background-image: url(img/1.jpg);}li:nth-child(2){background-image: url(img/2.jpg);}li:nth-child(3){background-image: url(img/3.jpg);}li:nth-child(4){background-image: url(img/4.jpg);}li:nth-child(5){background-image: url(img/5.jpg);}li:nth-child(6){background-image: url(img/6.jpg);}
以上都不需要多少解释的，使用背景图的方法是觉得尺寸和显示的问题，如果使用img标签，设置大小就需要width和height都设置，而background-image就可以很方便设置大小。
/*把其他li设置成40px*/div ul:hover li{width: 40px;}/*选中的那个设置width*/div ul li:hover{width: 980px;}
就两三句话就可以实现左右两边变窄，我最开始想了好久都没想到，是参考网友才知道的。（不然我最开始使用 ~ 选择器使被选中的标签后面的标签的width变小，但只能动到后面的，改变不了后面的，所以才在网上找答案）
应用的原理我理解是：用div盒子把ul的体积变成块元素，如果没有这个不会有被选中的那个变大的效果，所以我理解就是利用div标签占着空间，使li在width变大的时候可以撑开，不然会被挤压的没效果。
因为鼠标移上ul就把li的width从166px设置成40px；同时也会移动到某个li标签，所以就把这个li标签的width变成你想要宽度（980px）。
因为添加了上下的透明背景文字栏，所以还有两个样式：
li:hover span{height: 30px;line-height: 30px;}li:hover :first-child{top: 0;}li:hover :last-child{bottom: 0;}
实际就是对span标签进行位置以及背景设置，最开始的span实际是两个标签文字叠加在一起了，看起来像一个而已。本身我想用::before和::after来添加的，但出现文字被半透明背景盖住，所以就直接用span标签来做这个半透明背景文字栏。
最后全部完整的代码：
<!DOCTYPE html><html><head><title>手风琴图片轮播效果</title><style type="text/css">li{list-style: none;width: 166px;height: 360px;float: left;background: no-repeat;position: relative;transition: 1s;box-shadow: -3px 0 5px #555;}li span{line-height: 360px;color: #fff;font-size: 18px;font-weight: bold;text-align: center;transition: 1s;/*背景及位置*/position: absolute;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);transition:all 1s;}/*使用背景方法放置图片，如果需要做成动态网页，直接在html标签里写成背景图片即可实现动态添加*/li:nth-child(1){background-image: url(img/1.jpg);}li:nth-child(2){background-image: url(img/2.jpg);}li:nth-child(3){background-image: url(img/3.jpg);}li:nth-child(4){background-image: url(img/4.jpg);}li:nth-child(5){background-image: url(img/5.jpg);}li:nth-child(6){background-image: url(img/6.jpg);}/*把其他li设置成40px*/div ul:hover li{width: 40px;}/*选中的那个设置width*/div ul li:hover{width: 980px;}li:hover span{height: 30px;line-height: 30px;}li:hover :first-child{top: 0;}li:hover :last-child{bottom: 0;}</style></head><body><div ><ul><li><span>付出不亚于任何人的努力</span><span>付出不亚于任何人的努力</span></li><li><span>谦虚戒骄</span><span>谦虚戒骄</span></li><li><span>天天反省</span><span>天天反省</span></li><li><span>活着就要感谢</span><span>活着就要感谢</span></li><li><span>积善行、思利他</span><span>积善行、思利他</span></li><li><span>不要有感性的烦恼</span><span>不要有感性的烦恼</span></li></ul></div></body></html>
因为没有涉及到js以及jQuery，很值得学习一下
