怎么用DIV+CSS做5个图片滚动带链接的效果。

如题所述

推荐答案推荐于2016-08-27

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: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 .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>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://00.wendadaohang.com/zd/0rnnTrIn.html

其他回答

第1个回答 2008-10-26

css+div 是做不出动态效果的，需要借助程序来完成，一般客户端脚本大多用Javascript 编写：
例如:
<DIV id=test style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=test1 vAlign=top>
<table width="150" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>

<td><a href="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" target="_blank"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" border="0" /></a>  </td>
<td><a href="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" target="_blank"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" border="0" /></a>  </td>
<td><a href="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" target="_blank"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" border="0" /></a>  </td>
<td><a href="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" target="_blank"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" border="0" /></a>  </td>
<td><a href="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" target="_blank"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" border="0" /></a>  </td>
<td><a href="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" target="_blank"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" border="0" /></a>  </td>
<td><a href="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" target="_blank"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" border="0" /></a>  </td>

</tr>
</table>
</TD><TD id=test2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
<SCRIPT type="text/javascript">
var speed3=10 //速度数值越大速度越慢
test2.innerHTML=test1.innerHTML
function Marquee3(){
if(test2.offsetWidth-test.scrollLeft<=0)
test.scrollLeft-=test1.offsetWidth
else{
test.scrollLeft++
}
}
var MyMars=setInterval(Marquee3,speed3)
test.onmouseover=function() {clearInterval(MyMars)}
test.onmouseout=function() {MyMars=setInterval(Marquee3,speed3)}
</SCRIPT>本回答被提问者采纳

相似回答

大家正在搜