js控制多图左右滚动切换效果代码分享控制多图左右滚动切换效果代码分享
本文实例讲述了js控制多图左右滚动切换效果。分享给大家供大家参考。具体如下:
这是一款纯js实现点击左右按钮图片自动左右平滑滚动,默认5个一组左右滚动,可以手动修改js参数更改滑动数量。
运行效果图:——————-查看效果——————-
小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的js控制多图左右滚动切换效果代码如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制多图左右滚动切换效果</title>
<link href="css/jiaobenzhijia.css" type="text/css" rel="stylesheet" />
<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) {
评论1