原JS实现banner图的常用功能
我将引领大家一同如何使用CSS和JavaScript打造独具特色的横幅广告功能。我们将一起实现几个实用的功能,让你的横幅广告更具吸引力。
一、循环不间断切换横幅广告
我们将实现横幅广告的循环播放功能。通过简单的CSS和JavaScript代码,我们可以轻松实现广告的自动切换,让用户在浏览网页时能够欣赏到不同的内容。
二、指定性横幅广告切换
接下来,我们将通过自制按钮实现指定性横幅广告的切换。用户可以通过点击按钮,直接跳转到指定的广告页面,提高用户体验。这个功能将使我们能够更好地控制广告的展示顺序和内容。
三、左右定向依次切换横幅广告
除了自动播放和指定切换功能外,我们还将实现通过方向按钮实现横幅图的左/右定向依次切换。这个功能将使广告展示更加灵活,用户可以按照自己的喜好选择观看的方向。
四、鼠标悬停暂停横幅广告切换
我们将实现当鼠标悬停在横幅广告上时,暂停广告的切换。这个功能将提高用户体验,避免在鼠标移动过程中广告频繁切换带来的不便。当鼠标移开时,广告将继续按照设定的时间间隔进行切换。
接下来是示例代码部分:
通过以上代码的引入和使用,你可以轻松实现以上所述的功能。这个方案不仅简单易行,而且效果出色。你可以根据自己的需求进行调整和优化,打造出独具特色的横幅广告功能。希望这篇文章能对你有所帮助,如果你对这方面的内容感兴趣,不妨尝试一下。
HTML部分保持不变,重点在于JavaScript的修改:
```html
var bannerImg = document.getElementById("bannerImg"); // 获取img容器的节点
var buttons = document.getElementsByClassName("Button"); // 获取所有的button按钮
var num = 0; // 控制banner的切换次序
var slideInterval = null; // 用于存储定时器,方便清除
var slideDuration = 1000; // 滑动持续时间,单位毫秒
var slideWidth = 716.8; // 每张图片的宽度,用于计算位置
var buttonClicked = false; // 标记是否通过按钮进行切换,用于避免按钮切换后的定时器重置问题
// 初始化banner图的显示位置
bannerImg.style.transition = "all " + slideDuration + "ms linear";
bannerImg.style.left = (-slideWidth num) + "px";
// 通过定时器实现banner图的自动切换效果
function autoSlideStart() {
slideInterval = setInterval(function() {
if (!buttonClicked) { // 如果不是通过按钮切换,则执行自动切换逻辑
num = (num + 1) % buttons.length; // 循环切换图片
bannerImg.style.left = (-slideWidth num) + "px"; // 更新图片位置
} else { // 如果是通过按钮切换,则重置标记并停止计时器以避免重复切换
buttonClicked = false;
clearInterval(slideInterval);
}
}, 3000); // 每3秒切换一次图片
}
autoSlideStart(); // 开启自动切换功能
// 当鼠标悬浮在banner图上时,停止自动切换并清除定时器
function changeS() {
clearInterval(slideInterval);
}
// 鼠标移出后重新开始自动切换的changeStart函数已集成在autoSlideStart中,无需单独定义。
// 当鼠标移出时会自动恢复计时器实现自动切换功能。无需额外操作。
// 其他函数保持不变,如buttonChange(), asideChange()等。只需确保调用时考虑按钮点击状态即可。