原始js实现横幅图的常用功能

虽然用jQuery来实现横幅图的各种效果非常简单和快捷，但是我今天用的是js代码来实现横幅图的几个常用功能，效果相当不错。

这次的主要目的是实现以下功能：

1。横幅图循环不间断交换

2。通过自制按钮切换指定的横幅图

三.按方向键左转横幅地图的右/右方向开关

4。当旗帜图有onmouseover事件，阻止横幅开关继续开关时有一个时
#旗帜{
宽度：716.8px；
身高：537.6px；
背景颜色：海蓝宝石；
保证金：100px汽车；
职位：相对；
字体大小：0px IMG； / *清晰图片回车间隔* /生产
溢出：隐藏；
}
#旗帜# bannerimg {
宽度：100%；
位置：绝对；
上图：0px；
左：0px；
白色空间：nowrap； / *使这张照片显示一行。
转换：全1线性；
}
#旗帜# bannerimg img {
宽度：100%；
}
#旗帜# bannerbutton {
字体大小：16px；
颜色：白色；
位置：绝对；
底部：10px；
左：20px；
}
#旗帜# bannerbutton按钮{。
边界半径：9px；
边界：无；
大纲：无；
光标：指针；
背景颜色：# 7fffd4；
}
#旗帜# bannerbuttonaside DIV1 {。
位置：绝对；
右：10px；
顶部：50%；
边距：- 32px；
光标：指针；
}

#旗帜# bannerbuttonaside DIV2 {。
位置：绝对；
左：10px；
顶部：50%；
边距：- 32px；
光标：指针；
}


一
二
三
四
五
六

无功bannerimg = document.getelementbyid（bannerimg ）； / * IMG从容器节点
VAR按钮= document.getelementsbyclassname（按钮）； / * * /删除所有的按钮
变量0；全局变量定义；切换顺序控制标志。
var = 0；定义一个全局变量，用于在没有鼠标事件的情况下检查和删除计时器/计时器功能。

*通过定时器每3000毫秒开关的效果图changestart旗帜（）函数。
功能changestart（）{
AAA = setInterval（）{（）函数（
如果（数字< = 6）{
bannerimg。风格。转型=全1线性；
bannerimg。风格。左=（- 716.8）*（民）+PX；
数字+；
其他{ }
bannerimg。风格。转型=所有0线性； / *消除数= 0，bannerimg移动/过渡效果
数字= 0；
bannerimg。风格。左=（- 716.8）*（民）+PX；

}
console.log（哈哈哈继续）；
}，3000）
}
ChangeStart（）；

以下/当鼠标悬浮在旗帜图，画面停止自动切换功能* /（changestop）
功能changestop（）{
ClearInterval（AAA）；
console.log（阻止他）；
}

下面是点击按钮来实现相应的横幅切换改变（）功能。
功能buttonchange（NUM）{
1；
bannerimg。风格。转型=所有0线性；
bannerimg。风格。左=（- 716.8）*（民）+PX；
}

以下是关于两 / *点击按钮实现开关buttonchange旗帜（）函数。
功能asidechange（x）{ / * X参数传递到左/右判断，开关旗帜* /
如果（Num）！＝6x＝＝1）{
数字+；
} else if（Num = = 6X = = 1）{
数字= 0；
}如果（Num）！= 0x = = 0）{
Num --；
}
如果（Num = = 0x = = 0）{
数字= 5；
}
bannerimg。风格。转型=所有0线性；
bannerimg。风格。左=（- 716.8）*（民）+PX；
}

但经过博主测试后，发现程序中存在一定的缺陷。第一张图片的停留时间比其他图片要长，每次打开计时器都有这个问题。

保存它的方法是改进它，所以它仅供参考，将来也会用到，当然它是jQuery！

如果有错误，欢迎各位朋友指出，我们一起讨论，完善代码！

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。