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

 我来答

2个回答

#热议# 生活中有哪些实用的心理学知识？

郭Sir百事通
推荐于2016-08-27 · 源于生活，分享生活.丰富生活

郭Sir百事通

采纳数：215 获赞数：1046

向TA提问私信TA

关注

展开全部

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">&lt;</strong>
               <strong class="r">&gt;</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>

已赞过 已踩过<

评论收起

yuan_pirates
2008-10-26 · TA获得超过248个赞

知道答主

回答量：217

采纳率：0%

帮助的人：159万

我也去答题访问个人页

关注

展开全部

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>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

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

其他类似问题

为你推荐：