首先得说，我也是新手，本例中有缺陷，没有更多时间修正了，请大家指正！下面是解决办法

轮播动画效果描述：当鼠标悬停到小图片上的时候，大图片相应切换。

实现思路：因为不能使用JS，那么只能考虑通过CSS伪类的方式来实现，主要使用到 :hover。

关键点：通过伪类选择器、相邻兄弟选择器和兄弟选择器组合进行复杂的DOM操作。

说明：本例中勉强实现了图片左移动轮播，有一些缺陷，自己尝试修改一下。另外，如果是透明渐变切换应该会更容易实现。

代码如下：html>

CSS例子 - 轮播图片

* {

font-family: "YaHei Consolas Hybrid";

font-size: 14px;

margin: 0;

padding: 0;

box-sizing: border-box;

}

.screen {

width: 800px;

height: 500px;

position: relative;

margin-left: 50%;

left: -400px;

}

.screen .picBox {

position: absolute;

width: 600px;

height: 400px;

margin-left: 50%;

left: -300px;

overflow: hidden;

border: 1px solid blue;

}

.imageBtnBox, .imageBox {

position: absolute;

text-align: center;

}

.imageBtnBox {

border: 1px solid black;

width: 80px;

height: 35px;

top: 430px;

cursor: pointer;

}

.picBox > div {

position: absolute;

border: 1px solid red;

width: 600px;

height: 400px;

}

#imageBtn1 { margin-left: 200px; }

#imageBtn1:hover ~ .picBox > div {

margin-left: 0;

transition: margin-left .5s;

}

#imageBtn2 { margin-left: 300px; }

#imageBtn2:hover ~ .picBox > div {

margin-left: -600px;

transition: margin-left .5s;

}

#imageBtn3 { margin-left: 400px; }

#imageBtn3:hover ~ .picBox > div {

margin-left: -1200px;

transition: margin-left 1s;

}

#imageBtn4 { margin-left: 500px; }

#imageBtn4:hover ~ .picBox > div {

margin-left: -1800px;

transition: margin-left 1.5s;

}

.imageBox {

width: 600px;

height: 400px;

left: -300px;

border: 1px solid green;

}

#image1 {

margin-left: 50%;

background-color: greenyellow;

}

#image2 {

margin-left: 900px;

background-color: darkturquoise;

}

#image3 {

margin-left: 1500px;

background-color: firebrick;

}

#image4 {

margin-left: 2100px;

background-color: lightsteelblue;

}

CSS例子 - 轮播图片

---