|
*
{
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;
}
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.offsetLeft0){
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.οnmοuseοver=function(){
//
speed=1;
//
}
//
aNext.οnmοuseοver=function(){
//
speed=-1;
//
}
}
|