让我来为您详细讲解“javascript实现循环广告条效果”的完整攻略。
要实现循环广告条效果,需要一个滚动容器和多个图片元素,通过JavaScript动态设置滚动容器的left属性,使其滚动。
具体实现思路如下:
以下是一个基于原生JavaScript实现的循环广告条效果示例代码:
<div id="container">
<div id="imgBox">
<img src="images/1.jpg" alt="1">
<img src="images/2.jpg" alt="2">
<img src="images/3.jpg" alt="3">
<img src="images/4.jpg" alt="4">
<img src="images/5.jpg" alt="5">
</div>
</div>
<script>
var container = document.getElementById('container');
var imgBox = document.getElementById('imgBox');
var imgWidth = document.getElementsByTagName('img')[0].offsetWidth;
var left = 0;
var speed = 20;
container.style.overflow = 'hidden';
setInterval(function() {
left--;
if (left < -imgWidth) {
left = 0;
}
imgBox.style.left = left + 'px';
}, speed);
container.onmouseover = function() {
clearInterval(timer);
}
container.onmouseout = function() {
timer = setInterval(function() {
left--;
if (left < -imgWidth) {
left = 0;
}
imgBox.style.left = left + 'px';
}, speed);
}
</script>
以下是一个基于jQuery实现的循环广告条效果示例代码:
<div id="container">
<div id="imgBox">
<img src="images/1.jpg" alt="1">
<img src="images/2.jpg" alt="2">
<img src="images/3.jpg" alt="3">
<img src="images/4.jpg" alt="4">
<img src="images/5.jpg" alt="5">
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var imgWidth = $('img').eq(0).width();
var left = 0;
var speed = 20;
$('#container').css('overflow', 'hidden');
setInterval(function() {
left--;
if (left < -imgWidth) {
left = 0;
}
$('#imgBox').css('left', left + 'px');
}, speed);
$('#container').mouseover(function() {
clearInterval(timer);
});
$('#container').mouseout(function() {
timer = setInterval(function() {
left--;
if (left < -imgWidth) {
left = 0;
}
$('#imgBox').css('left', left + 'px');
}, speed);
});
</script>
以上就是“javascript实现循环广告条效果”的详细攻略,通过以上两个示例代码的阐述,您应该有了一定的了解。如果您有其他问题,可以随时提出,我会尽力为您解答。
本文链接:http://task.lmcjl.com/news/10506.html