div {
border: 1px solid red
width: 500px
height: 280px
/*background-image:url(..//pic/newimages/1.png)*/
position: relative
animation: firstone 10s infinite
animation-direction: alternate
-webkit-animation: firstone 10s infinite
-webkit-animation-direction: alternate
}
@keyframes firstone {
0% {
background-image: url(..//pic/newimages/1.png)
left: 20px
top: 0
}
25% {
background-image: url(..//pic/newimages/8.jpg)
left: 280px
top: 0
}
50% {
background-image: url(..//pic/newimages/7.jpg)
left: 280px
top: 280px
}
75% {
background-image: url(..//pic/newimages/15.jpg)
left: 20px
top: 280px
}
20% {
background-image: url(..//pic/newimages/19.jpg)
left: 20px
top: 0
}
}
@-webkit-keyframes firstone {
0% {
background-image: url(..//pic/newimages/2.png)
left: 0
top: 0
}
25% {
background-image: url(..//pic/newimages/8.jpg)
left: 280px
top: 0
}
50% {
background-image: url(..//pic/newimages/7.jpg)
left: 280px
top: 280px
}
75% {
background-image: url(..//pic/newimages/15.jpg)
left: 0
top: 280px
}
20% {
background-image: url(..//pic/newimages/19.jpg)
left: 0
top: 0
}
}
里面写一个空的div就可以了，放图片就是自己放吧。
你好！CSS实现不了，配合JS才行代码如下：
<style type="text/css">
<!--
#demo {overflow:hiddenwidth:740px}
#indemo { float: leftwidth: 800%}
#demo1 { float: left}
#demo2 { float: leftmargin-left:7px}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10//数字越大速度越慢
var tab=document.getElementById("demo")
var tab1=document.getElementById("demo1")
var tab2=document.getElementById("demo2")
tab2.innerHTML=tab1.innerHTML
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
tab.onmouseover=function() {clearInterval(MyMar)}
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
-->
</script>
banner a.btn_prev:hover { background-position:-200px -350px}设置的是banner上向左的按钮在鼠标经过时的背景图像的位置
-200px是x轴的坐标，-350px是y轴的坐标
你要修改的图片的大小，应该是修改.banner_pic ul li里的width:630px
这个参数修改好以后再适当修改
.banner_pic 里的width和height
.banner_pic ul 里的height
应该就能达到目的
