您的位置：首页 > 编程语言 > ASP

asp.net html 图片滚动不留空白

2017-03-31 09:30 387 查看

<!doctype>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<title></title>

<style>

*

{

margin: 0;

padding: 0;

list-style: none;

border: none;

}

body

{

background: #efefef;

}

.content

{

padding: 0 5px;

width: 80%;

background: #000;

margin: 50px auto;

}

/*主要用来美化样式*/#scrollpic

{

position: relative;

height: 166px;

width: 100%;

overflow: hidden;

}

#prev, #next

{

display: block;

height: 166px;

width: 50px;

background: #efefef;

position: absolute;

top: 0;

opacity: 0;

z-index: 10;

}

#prev

{

left: 0;

}

#next

{

right: 0;

}

#scrollpic ul

{

position: absolute;

height: 166px;

}

#scrollpic ul li

{

float: left;

padding: 5px;

height: 156px;

width: 220px;

}

#scrollpic ul li img

{

width: 220px;

height: 156px;

}

p

{

font: normal 14px/2 'microsoft yahei';

color: #333;

}

</style>

</head>

<body>

<div>

<div id="scrollpic">

<a href="javascript:;" id="prev"></a>

<ul>

<li><a href="#">

<img src="Images/Label/01.jpg" /></a></li>

<li><a href="#">

<img src="Images/Label/02.jpg" /></a></li>

<li><a href="#">

<img src="Images/Label/03.jpg" /></a></li>

<li><a href="#">

<img src="Images/Label/04.jpg" /></a></li>

<li><a href="#">

<img src="Images/Label/05.jpg" /></a></li>

<li><a href="#">

<img src="Images/Label/06.jpg" /></a></li>

<li><a href="#">

<img src="Images/Label/07.jpg" /></a></li>

<li><a href="#">

<img src="Images/Label/08.jpg" /></a></li>

<li><a href="#">

<img src="Images/Label/09.jpg" /></a></li>

</ul>

<a href="javascript:;" id="next"></a>

</div>

</div>

<script type="text/javascript">

window.onload = function(){
//操作dom
var oPicList = document.getElementById("scrollpic");
var oUl = oPicList.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
var aPrev = document.getElementById("prev");
var aNext = document.getElementById("next");
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
oUl.style.left =-oUl.offsetWidth/2;
var speed = 1;
//控制滚动
function movePic(){
if(oUl.offsetLeft<=-oUl.offsetWidth/2){
oUl.style.left = "0";
}
if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/2;
}
oUl.style.left = oUl.offsetLeft + speed +"px";
}
var timer = setInterval(movePic,30);
//鼠标操作暂停/滚动
oUl.onmouseover = function(){
clearInterval(timer);
}
oUl.onmouseout = function(){
timer = setInterval(movePic,30);
}
//控制图片左右滚动

// aPrev.onmouseover=function(){

// speed=1;

// }

// aNext.onmouseover=function(){

// speed=-1;

// }

}

</script>

</body>
</html>

<iframe id="ImgFrame" style="z-index: 1; visibility: inherit; width: 100%; height: 100%;"

name="ImgFrame" src="JSxunhuan.htm" frameborder="0" scrolling="no"></iframe>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航