完全可以哦，滑动式的利用css的hover，也就是纯css菜单的原理，
点击式的利用的是锚点的原理。
实例如下：
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>纯CSS实现的Tab</title>
<style>
*{ margin:0 padding:0}
#main{width:500px margin:100px auto}
#title>a{ float:left border:1px solid #000 padding:2px 4px display:block text-decoration:none color:#000}
#content{ width:500px height:300px border:1px solid #000 overflow:hidden}
#content>div{float:left padding:2px 4px width:500px height:300px}
#a1:hover #a2>#tab2{ display:block}
</style>
</head>
<body>
<div id="main">
<div id="title">
<a href="#tab1">tab1title</a>
<a href="#tab2">tab2title</a>
<a href="#tab3">tab3title</a>
<a href="#tab4">tab4title</a>
<div style="clear:both"></div>
</div>
<div id="content">
<div id="tab1"> tab1 content </div>
<div id="tab2"> tab2 content </div>
<div id="tab3"> tab3 content </div>
<div id="tab4"> tab4 content </div>
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
<html><head>
<title></title>
</head>
<style type="text/css">
#wrap {
width: 300px
text-align: center
overflow: hidden
margin: 50px 50px
}
.box {
width: 1200px
height: auto
display: inline-block
animation: b1 10s infinite
}
.box img {
width: 300px
float: left
}
@-webkit-keyframes b1 {
0% {
margin-left: 0px
}
15% {
margin-left: 0px
}
20% {
margin-left: -300px
}
30% {
margin-left: -300px
}
35% {
margin-left: -600px
}
45% {
margin-left: -600px
}
50% {
margin-left: -900px
}
60% {
margin-left: -900px
}
65% {
margin-left: -600px
}
75% {
margin-left: -600px
}
80% {
margin-left: -300px
}
90% {
margin-left: -300px
}
100% {
margin-left: 0px
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<img src="你的图片地址" id="a1" />
<img src="你的图片地址" id="a2" />/*这里就看你放的图片有多少。。我就只写了两张的，，，，*/
</div>
</div>
</body>
</html>
