主页 个人前端笔记 JS左右移动类库
admin
发表于2012-11-11 19:11:09    只看楼主 楼主
头衔:  精益求精
注册时间: 2012-10-07
用户组: 日常管理组
发帖数:  502
金币数:  186
短消息
var state = 0;
var prefun = function() {
if (state == 1) {
return;
}
state = 1;
var liset = document.getElementById("gcul").getElementsByTagName("li");
for (var i = 0; i < liset.length; i++) {
if (i < 2) {
liset.style.opacity = 1;
liset.style.filter = "alpha(opacity=100)";
liset.style.MozOpacity = 1;

} else {
liset[i].style.opacity = 0;
liset[i].style.filter = "alpha(opacity=0)";
liset[i].style.MozOpacity = 0;

}

}
var ele = liset[liset.length - 1].cloneNode(true);
for (var i = 1; i <= 200; i++)
{
(function() {
var t = i;
setTimeout(function() {
liset[0].style.marginLeft = t + "px";
if (t == 200)
{
ele.style.opacity = '0';
ele.style.filter = "alpha(opacity=0)";
ele.style.MozOpacity = '0';
document.getElementById("gcul").removeChild(liset[liset.length - 1]);
document.getElementById("gcul").insertBefore(ele, liset[0]);
liset[1].style.marginLeft = "0px";
for (var _i = 0; _i <= 100; _i++)
{
(function() {
var _ii = _i;
setTimeout(function() {
if (_ii == 100) {
state = 0;
}
ele.style.opacity = _ii / 100;
ele.style.filter = "alpha(opacity=" + _ii + ")";
ele.style.MozOpacity = _ii / 100;

},
(_ii + 1) * 20)

})()

}

}

},
(t + 1) * 10);

})()

}

}
var nextfun = function() {
if (state == 1) {
return;
}
state = 1;
var liset = document.getElementById("gcul").getElementsByTagName("li");
for (var i = 0; i < liset.length; i++) {
if (i < 2) {
liset[i].style.opacity = 1;
liset[i].style.filter = "alpha(opacity=100)";
liset[i].style.MozOpacity = 1;

} else {
liset[i].style.opacity = 0;
liset[i].style.filter = "alpha(opacity=0)";
liset[i].style.MozOpacity = 0;

}

}
var ele = liset[0].cloneNode(true);
for (var i = 1; i <= 200; i++)
{
(function() {
var t = i;
setTimeout(function() {
liset[0].style.marginLeft = -t + "px";
if (t == 200)
{
document.getElementById("gcul").removeChild(liset[0]);
document.getElementById("gcul").appendChild(ele);
liset[1].style.opacity = '0';
liset[1].style.filter = "alpha(opacity=0)";
liset[1].style.MozOpacity = '0';
for (var _i = 0; _i <= 100; _i++)
{
(function() {
var _ii = _i;
setTimeout(function() {
if (_ii == 100) {
state = 0;
}
liset[1].style.opacity = _ii / 100;
liset[1].style.filter = "alpha(opacity=" + _ii + ")";
liset[1].style.MozOpacity = _ii / 100;

},
(_ii + 1) * 20)

})()

}

}

},
(t + 1) * 10);

})()

}

}
document.getElementById("pre").onclick = prefun;
document.getElementById("next").onclick = nextfun;

html为
<input type="button"&nbsp;class="pre" id="pre"/>
<div id="dvul">
<ul id="gcul">
<li><a href="#"><img src="images/img01.jpg"&nbsp;alt="" /></a><a href="#"></a></li>
<li><a href="#"><img src="images/img01.jpg"&nbsp;alt="" /></a><a href="#"></a></li>
<li><a href="#"><img src="images/img01.jpg"&nbsp;alt="" /></a><a href="#"></a></li>
<li><a href="#"><img src="images/img01.jpg"&nbsp;alt="" /></a><a href="#"></a></li>
</ul>
</div>
<input type="button" class="next" id="next"/>

<style>
#dvul{width:396px;height:162px;overflow:hidden;float:left}
#gcul{width:594px;height:162px;float:left;margin:0px;padding:0px;overflow:hidden}
#gcul>li{display:inline;float:left}
#pre{float:left}
#next{float:left}
</style>

这里面的问题是&nbsp;要使li能够移动,ul的宽度必须足够大,
解决方法是在ul外面套一个div。

回复人
回复内容

Powered BY YouYaX
个人自主开发论坛,从2010年10月份开发至今!

操作管理