当前位置:首页 > 网页特效 > jQuery特效 >

js单排图片自动滚动效果代码

时间:2014-06-29 08:27 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

js单排图片自动滚动效果代码js单排图片自动滚动效果代码是一款带有左右箭头,滑动切换效果的js图片滚动代码。js自动滚动单排图片图片滚动

<script type="text/javascript">
window.onload = function () {
var oBtnLeft = document.getElementById("goleft");
var oBtnRight = document.getElementById("goright");
var oDiv = document.getElementById("indexmaindiv");
var oDiv1 = document.getElementById("maindiv1");
var oUl = oDiv.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
var now = -5 * (aLi[0].offsetWidth + 13);
oUl.style.width = aLi.length * (aLi[0].offsetWidth + 13) + 'px';
oBtnRight.onclick = function () {
var n = Math.floor((aLi.length * (aLi[0].offsetWidth + 13) + oUl.offsetLeft) / aLi[0].offsetWidth);


if (n <= 5) {
move(oUl, 'left', 0);
}
else {
move(oUl, 'left', oUl.offsetLeft + now);
}
}
oBtnLeft.onclick = function () {
var now1 = -Math.floor((aLi.length / 5)) * 5 * (aLi[0].offsetWidth + 13);


if (oUl.offsetLeft >= 0) {
move(oUl, 'left', now1);
}
else {
move(oUl, 'left', oUl.offsetLeft - now);
}
}
var timer = setInterval(oBtnRight.onclick, 5000);
oDiv.onmouseover = function () {
clearInterval(timer);
}
oDiv.onmouseout = function () {
timer = setInterval(oBtnRight.onclick, 5000);
}


};


function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
}
else {
return getComputedStyle(obj, false)[name];
}
}


function move(obj, attr, iTarget) {
clearInterval(obj.timer)
obj.timer = setInterval(function () {
var cur = 0;
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
}
else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (iTarget == cur) {
clearInterval(obj.timer);
}
else if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;
}
else {
obj.style[attr] = cur + speed + 'px';
}
}, 30);
}  
</script>

本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

jQuery特效下载排行

最新文章