怎么用DIV+CSS做5个图片滚动带链接的效果。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么用DIV+CSS做5个图片滚动带链接的效果。相关的知识，希望对你有一定的参考价值。
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>
例如:
<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个图片滚动带链接的效果。的主要内容，如果未能解决你的问题，请参考以下文章