.a{background:url(../images/v_line2.gif)
0
0
no-repeatwidth:100pxheight:30pxdisplay:block}
............
<a
href="xxx.html"
class="a"></a>
这样就OK了但是一定要注意设置display属性为block
或者inline-block才能有点击区域，不然<a></a>之间就要插入一张透明图片设置宽高如<a
href="xxx.html"
class="a"><img
src="透明图片地址"
width="100"
height="30"></a>
css和div做滚动效果的我没实现过，都用的js实现的；
效果如下图
完整代码以及引用的插件直接压缩包了，查看请下载附件。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>点击左走或右走</title>
<style>
#body .middle{
width:1024px
height:180px
margin:5px auto
overflow:hidden
position:relative
}
#body .middle .bt .l{
position:absolute
left:10px
top:70px
background:#000
z-index:20
width:30px
height:30px
font-size:20px
opacity:0.7
border-radius:15px
cursor:pointer
color:#fff
text-align:center
line-height:30px}
#body .middle .bt .r{
position:absolute
right:10px
top:70px
background:#000
z-index:20width:30px
height:30px
font-size:20px
opacity:0.7
border-radius:15px
cursor:pointer
color:#fff
text-align:center
line-height:30px
}
#body .middle .gd ul{
position:absolute
width:1022px
margin-top:5px
}
#body .middle .gd li{
float:left
width:159px
height:160px
margin-left:10px }
#body .middle .gd li img{
width:100%
height:100%
}</style>
<link href="my.css" rel="stylesheet" type="text/css">
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function(){ //载入后
var d=$('#body .middle .gd ')
var ul=d.find('ul')
var li=ul.find('li')
var l=$('#body .middle .bt .l')
var r=$('#body .middle .bt .r')
//设置ul的宽
ul.width( (li.width()+10)*li.length )
var zy=false
//给左右加事件
l.click(function(){ zy=true zou(true) })
r.click(function(){ zy=false zou(false) })
//自动切换
window.setInterval(function(){
if(zy){
l.click() //自动点击
}else{
r.click() //自动点击
}
},2000)
/*
zuozou 向左或向右走
*/
function zou(zuozou){
var k=$('#body .middle .gd ul li').width()*-1
var t=$('#body .middle .gd ul li').length-1
if(zuozou){
//向左
$('#body .middle .gd ul').stop(true,true).animate({'left':k},function(){ //执行完动画后
$('#body .middle .gd ul li').eq(0).appendTo($('#body .middle .gd ul'))
$('#body .middle .gd ul').css({ 'left':0 })
})
}else{
//向右
$('#body .middle .gd ul li').eq(t).prependTo($('#body .middle .gd ul'))
$('#body .middle .gd ul').css({ 'left':k})
$('#body .middle .gd ul').stop(true,true).animate({'left':0})
}
}
})
</script>
</head>
<body>
<div id="body">
<div class="middle">
<div class="bt">
<strong class="l"><</strong>
<strong class="r">></strong>
</div>
<div class="gd">
<ul>
<li><a href="http://weibo.com/guokq"><img src="img/27.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/28.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/29.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/26.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/25.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/24.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/23.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/22.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/21.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/20.jpg" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<a href="" id="link">link</a>这里！为什么没加链接的网址？？？
你可以 <a href="#" id="link">link</a>表示链接到本页面，或者填写具体的网址。如果你留个空“”，肯定不显示了。
