【图片无缝滚动】这样的效果谁有，麻烦大家贡献一下哦

qingwa_ifeng 2012-03-22 01:12:26

我想弄一个如下图的效果，朋友们谁有的麻烦贴出来一下



<ul>

<li><a href="#"><img width="130px" height="80px" src="http://y1.ifengimg.com/af0a411b01107b98/2012/0302/rdn_4f5087d57bd2d.jpg" /></a></li>

<li><a href="#"><img width="130px" height="80px"  src="http://y0.ifengimg.com/c1348d133ef1161c/2012/0223/rdn_4f45ff850b781.jpg" /></a></li>

<li><a href="#"><img width="130px" height="80px"  src="http://y0.ifengimg.com/c1348d133ef1161c/2012/0223/rdn_4f45fd43da1b5.jpg" /></a></li>

<li><a href="#"><img width="130px" height="80px"  src="http://y3.ifengimg.com/c1348d133ef1161c/2012/0215/rdn_4f3b677a87006.jpg" /></a></li>

</ul>

...全文

193 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

loveairsupply 2012-03-24

打赏
举报

<html>
<head>
<style type="text/css">
image{width:93px;height:130px;margin:5px 0px}
body{font:12px 宋体,Verdana,Arial,Helvetica,sans-serif;background:#ffffff;margin:0;padding:0;text-align:center;color:#000000;}
div.div_header{width:243px;height:16px;vertical-align:top;text-align:left;font-size:14px;padding:10px 5px 5px 15px;}
div.div_top_root{margin:50px 0 0 60px;width:325px;height:178px;background:url(image/image02.gif);background-repeat:no-repeat;}
#scrollContainer{margin-left:10pt;margin-top:2pt;overflow:hidden;text-align:left;}
#bigpic{width:300px;height:400px;margin-left:100px}
</style>
</head>
<body onmouseover="closeAllSubItem(event)">
<div class="div_top_root">
<div class="div_header">今日电影</div>
<div id="scrollContainer">
<div id="scrollContent">
<table cellspacing="0" cellpadding="5" border="0">
<tr align="middle">
<td><div id="image1" onmouseover="displaybigpic(this);"><image src="image/h1.jpg"/></div></td>
<td><div id="image2" onmouseover="displaybigpic(this);"><image src="image/h2.jpg"/></div></td>
<td><div id="image3" onmouseover="displaybigpic(this);"><image src="image/h3.jpg"/></div></td>
<td><div id="image4" onmouseover="displaybigpic(this);"><image src="image/h4.jpg"/></div></td>
<td><div id="image5" onmouseover="displaybigpic(this);"><image src="image/h5.jpg"/></div></td>
<td><div id="image6" onmouseover="displaybigpic(this);"><image src="image/h6.jpg"/></div></td>
<td><div id="image7" onmouseover="displaybigpic(this);"><image src="image/h7.jpg"/></div></td>
</tr>
</table>
</div>
</div>
</div>
<div id="bigpic"></div>
<script type="text/javascript" language="javascript">
var stopscroll = false;
var scrollContHeight = 135;
var scrollContWidth = 300;
var scrollSpeed = 55;
var scrollContainer =document.getElementById("scrollContainer");
var scrollContent =document.getElementById("scrollContent");
/*do{
scrollContainer.appendChild(scrollContent.cloneNode(true));//
}while(scrollContainer.offsetHeight<scrollContHeight);*/
scrollContainer.style.width = scrollContWidth +"px";
scrollContainer.style.height = scrollContHeight +"px";
scrollContainer.noWrap = true;//无缝滚动

scrollContainer.onmouseover = new Function("stopscroll=true;");
scrollContainer.onmouseout = new Function("stopscroll=false;");

function init(){
scrollContainer.scrollLeft =0;
setInterval("scrollUp()",scrollSpeed);
}
init();
var currLeft =0;//
function scrollUp(){
if(stopscroll == true)return;
currLeft = scrollContainer.scrollLeft;
scrollContainer.scrollLeft+=1;//每次上移一个像素
if(currLeft == scrollContainer.scrollLeft){

scrollContainer.scrollLeft = 0;
scrollContainer.scrollLeft += 1;
}
}
//处理大图出现

var bigpicture1 = '<img src="image/conan1.jpg" width="300" height="400"/>';
var bigpicture2 = '<img src="image/conan2.jpg" width="300" height="400"/>';
var bigpicture3 = '<img src="image/conan3.jpg" width="300" height="400"/>';
var bigpicture4 = '<img src="image/conan4.jpg" width="300" height="400"/>';
var bigpicture5 = '<img src="image/conan5.jpg" width="300" height="400"/>';
var bigpicture6 = '<img src="image/conan1.jpg" width="300" height="400"/>';
var bigpicture7 = '<img src="image/conan2.jpg" width="300" height="400"/>';
function displaybigpic(obj){
var bigPic = document.getElementById("bigpic");
var picIndex = obj.getAttribute("id").toString().substring(5);
bigPic.innerHTML = eval("bigpicture"+picIndex);
}
function closeAllSubItem(event){
var scopeY = {top:50,bot:224};
window.status = event.clientY;
if ((event.clientY<scopeY.top)||(event.clientY>scopeY.bot)){

var bigPic = document.getElementById("bigpic");
bigPic.innerHTML = "";
}

}

</script>
</body>
</html>

挨踢直男 2012-03-22