第一次使用博客,希望每天能记录点成长吧!加油
简单的实现了图片的滚动,有两种要求一种是图片的连续滚动,另一种是点击按钮发生滚动。
参考的列子:http://jingyan.baidu.com/article/e4511cf3122da32b845eafb3.html
连续滚动:
<script type="text/javascript">
// 生活服务栏目图片连续滚动
function scrolling() {
// 获取每个dom
var id = document.getElementById("scrollbox2");
var ul = document.getElementById("scroll2");
var li = ul.getElementsByTagName("li");
iteamcount = li.length;
// 每个图片容器的大小、
liwidth = li[0].offsetWidth;
marquee = function() {
id.scrollLeft += 2;
if (id.scrollLeft % width <= 1) {
// 当c.scrollleft和width相等的时候把第一个img追加到最后
ul.appendChild(ul.getElementsByTagName('li')[0]);
id.scrollLeft = 0;
}
;
};
//值越小速度越快
speed = 400;
// 设置容器的长度
ul.style.width = liwidth * iteamcount + 'px';
var timer = setInterval(marquee, speed);
ul.onmouseover = function() {
clearInterval(timer);
};
ul.onmouseout = function() {
timer = setInterval(marquee, speed);
}
}
scrolling();
</script>
点击滚动:
<script type="text/javascript">
function _ScrollParse() {
var scroll1 = document.getElementById("scroll1");
var ol = scroll1.getElementsByTagName("ul")[0];
var li = ol.getElementsByTagName("li");
var prev = document.getElementById("prev8");
var next = document.getElementById("next8");
var length = li.length;
var olwidth = length * 172;
ol.innerHTML = ol.innerHTML + ol.innerHTML;
function mover(oo) {
if (oo == 1) {
ol.style.left = ol.offsetLeft - 172 + 'px';
} else {
ol.style.left = ol.offsetLeft + 172 + 'px';
}
if (ol.offsetLeft < -olwidth) {
ol.style.left = ol.offsetLeft + parseInt(olwidth) + 'px';
} else if
(ol.offsetLeft > 0)
{
ol.style.left = ol.offsetLeft - parseInt(olwidth) + 'px';
}
}
prev.onclick = function() {
mover(1);
}
next.onclick = function() {
mover(2);
}
}
_ScrollParse();
</script>