Heim >Web-Frontend >js-Tutorial >JavaScript implementiert allgemeine Funktionen von Bannerdiagrammen
JavaScript implementiert allgemeine Funktionen von Bannerdiagrammen
- 陈政宽～Original
- 2017-06-28 12:53:192642Durchsuche
In diesem Artikel werden hauptsächlich die allgemeinen Funktionen des ursprünglichen JS zur Implementierung des Bannerbilds vorgestellt. Er hat einen gewissen Referenzwert.
Obwohl jQuery zum Implementieren des Bannerbilds verwendet wird Verschiedene Effekte sind sehr einfach und schnell, aber heute habe ich CSS + JS-Code verwendet, um mehrere allgemeine Funktionen von Bannerbildern zu implementieren, und der Effekt ist nicht schlecht.
Dieses Mal wollen wir vor allem folgende Funktionen erreichen:
1. Kontinuierliches Umschalten von Bannerbildern in einer Schleife
2. Umschalten von vorgesehenen Bannerbildern durch Selbst- erstellte Schaltflächen
3. Verwenden Sie die Richtungstasten, um die Links-/Rechtsrichtung des Bannerbilds nacheinander zu wechseln
4. Wenn das Bannerbild das Ereignis onmouseover hat, Stoppen Sie das Wechseln des Banners und wechseln Sie weiter, wenn Onmouseout vorliegt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#banner{
width: 716.8px;
height: 537.6px;
background-color: aquamarine;
margin: 100px auto;
position: relative;
font-size: 0px; /*清除img图片间的回车符产生的间隔*/
overflow: hidden;
}
#banner #bannerImg{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
white-space: nowrap; /*使这个图片能一行显示*/
transition:all 1s linear;
}
#banner #bannerImg .img{
width: 100%;
}
#banner #bannerButton{
font-size: 16px;
color: white;
position: absolute;
bottom: 10px;
left: 20px;
}
#banner #bannerButton .Button{
border-radius: 9px;
border: none;
outline: none;
cursor: pointer;
background-color: #7FFFD4;
}
#banner #bannerButtonAside .p1{
position: absolute;
right: 10px;
top: 50%;
margin-top: -32px;
cursor: pointer;
}
#banner #bannerButtonAside .p2{
position: absolute;
left: 10px;
top: 50%;
margin-top: -32px;
cursor: pointer;
}
</style>
</head>
<body>
<!--实现 左右按钮，1234，自动滑动，鼠标停上显示小手不动 暂停。-->
<section id="banner" onmouseover="changeStop()" onmouseout="changeStart()">
<!--以下是我们的banner图-->
<p id="bannerImg">
<img class="img" src="../img/c95d7b9676ae739cccfc55457b93fe9c.jpg"/>
<img class="img" src="../img/5f5bdebddd8f1d276aeac8af5f8fa38d.jpg"/>
<img class="img" src="../img/5f5e5c091ecb0525fc8204f200670dd9.jpg"/>
<img class="img" src="../img/efa11cad9094f951061ee21324277efe.jpg"/>
<img class="img" src="../img/0b54c021bd4384c168d835dfc0908018.jpg"/>
<img class="img" src="../img/25d10d413faca3bdd7e2d88667f4298f_看图王.jpg"/>
<img class="img" src="../img/c95d7b9676ae739cccfc55457b93fe9c.jpg"/> <!--第7张与第一张为同一图片，消除图片切换间断-->
</p>
<!--以下是我们左下方的banner图按钮-->
<p id="bannerButton">
<button class="Button" onclick="buttonChange(0)">1</button>
<button class="Button" onclick="buttonChange(1)">2</button>
<button class="Button" onclick="buttonChange(2)">3</button>
<button class="Button" onclick="buttonChange(3)">4</button>
<button class="Button" onclick="buttonChange(4)">5</button>
<button class="Button" onclick="buttonChange(5)">6</button>
</p>
<!--以下是我们左右两个方向按钮-->
<p id="bannerButtonAside">
<p class="p1" onclick="asideChange(1)">
<img src="../img/forword.png"/>
</p>
<p class="p2" onclick="asideChange(0)">
<img src="../img/back.png"/>
</p>
</p>
</section>
</body>
<script type="text/javascript">
var bannerImg=document.getElementById("bannerImg"); /*取出img容器的节点*/
var Button=document.getElementsByClassName("Button"); /*取出所有的button按钮*/
var num=0; /*定义全局变量num,控制banner的切换次序*/
var aaa=0; /*定义一个全局变量,用来取定时器函数,并在没有鼠标事件的时候清除定时器*/
/*通过定时器实现banner图的每3000毫秒切换一次的效果的changeStart()函数*/
function changeStart(){
aaa=setInterval(function(){
if (num<=6) {
bannerImg.style.transition="all 1s linear";
bannerImg.style.left=(-716.8)*(num)+"px";
num++;
}else{
bannerImg.style.transition="all 0s linear"; /*消除num=0时,bannerImg移动的过渡效果*/
num=0;
bannerImg.style.left=(-716.8)*(num)+"px";
}
console.log("哈哈哈继续");
},3000)
}
changeStart();
/*以下是当鼠标悬浮在banner图上时,图片停止自动切换的changeStop()函数*/
function changeStop(){
clearInterval(aaa);
console.log("停止他");
}
/*以下是点击按钮实现对应banner图切换的change()函数*/
function buttonChange(Num){
num=Num+1;
bannerImg.style.transition="all 0s linear";
bannerImg.style.left=(-716.8)*(Num)+"px";
}
/*以下是点击左右两个按钮实现banner图切换的buttonChange()函数*/
function asideChange(x){ /*通过传递形参x,判断往左/往右切换banner图*/
if (num!=6&&x==1) {
num++;
}else if(num==6&&x==1){
num=0;
}else if(num!=0&&x==0){
num--;
}
else if(num==0&&x==0){
num=5;
}
bannerImg.style.transition="all 0s linear";
bannerImg.style.left=(-716.8)*(num)+"px";
}
</script>
</html>Nach Tests durch den Blogger wurde jedoch festgestellt, dass das Programm bestimmte Mängel aufweist. Das erste Bild bleibt länger erhalten als andere Bilder. und dieses Problem besteht jedes Mal, wenn der Timer neu gestartet wird. Im Moment haben Blogger keine einfachere
Möglichkeit, es zu verbessern, daher dient es nur als Referenz. Wenn Sie es in Zukunft verwenden möchten, wird Ihnen jQuery natürlich Ärger ersparen!
Sollte es Fehler geben, können Freunde gerne darauf hinweisen und wir besprechen diese gemeinsam, um den Code zu verbessern!
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich sein wird. Ich hoffe auch, dass jeder Script Home unterstützt.
Das obige ist der detaillierte Inhalt vonJavaScript implementiert allgemeine Funktionen von Bannerdiagrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse