61,115
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
SQL数据库 2014-12-14
- 打赏
- 举报
有用，值得借鉴
留校_察看 2013-06-16
- 打赏
- 举报
何必那么麻烦，直接用A标签背景图加定位方式实现。里面要加个空格代码，不然是不会显示出来的，然后就是伪类了。
w4961034_ 2013-06-10
- 打赏
- 举报
w4961034_ 2013-06-10
- 打赏
- 举报
我也没试过，不知marquee+css能否实现
当然感 2013-06-06
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideimg</title>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none;}
.imgbox{width:430px; height:80px; padding:10px; position:relative; border:1px solid #eaeaea; overflow:hidden; margin:100px auto; zoom:1;}
.imgbox ul{position:absolute;left:10px;}
.imgbox ul li{float:left; width:100px; height:80px; padding-right:10px;}
.imgbox ul li a{display:block; float:left; width:100px; height:80px; position:relative;}
.imgbox ul li img{width:100px; height:80px;}
#bigbox{position:absolute; left:0; top:0; z-index:2; display:none; width:200px; height:200px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oParent = document.getElementById('imgbox');
var oUl = oParent.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var oA = oUl.getElementsByTagName('a');
var oImg = document.getElementById('bigbox');
var timer = null;
//var liw = oLi[0].offsetWidth;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width = oLi[0].offsetWidth*oLi.length+'px';
function slideimg(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left = '10px';
}
oUl.style.left = oUl.offsetLeft-1+'px';
}
timer = setInterval(slideimg,30);
for(var i=0;i<oA.length;i++){
var div = document.createElement('div');
div.className = 'bigbox';
oA[i].onmouseover=function(e){
var oEvent = e || event;
clearInterval(timer);
var src = this.href;
oImg.src = src;
//document.title=oEvent.clientX;
oImg.style.display='block';
oImg.style.left=oEvent.clientX-100+'px';
oImg.style.top=oEvent.clientY-130+'px';
}
oImg.onmouseout=oA[i].onmouseout=function(){
timer = setInterval(slideimg,30);
oImg.style.display='none';
}
oImg.onmouseover=function(){
clearInterval(timer);
this.style.display='block';
}
}
}
</script>
</head>
<body>
<div class="imgbox" id="imgbox">
<ul>
<li><a href="images/1.jpg"><img src="images/1.jpg" /></a></li>
<li><a href="images/2.jpg"><img src="images/2.jpg" /></a></li>
<li><a href="images/3.jpg"><img src="images/3.jpg" /></a></li>
<li><a href="images/4.jpg"><img src="images/4.jpg" /></a></li>
</ul>
</div>
<img src="images/1.jpg" id="bigbox" />
</body>
</html>
KK3K2005 2013-04-22
- 打赏
- 举报
搜索
图片展示的js代码 或者jquery插件
