抽奖小程序怎么做_原JS完成banner图的常用功用

原JS实现banner图的常用功能     .聂   这篇文章主要为大家详细介绍了原JS实现banner图的常用功能,,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错。

此次,主要想实现以下功能:

1. banner图循环不间断切换

2. 通过自制按钮实现指定性banner图的切换

3. 通过方向按钮实现banner图左/右定向依次切换

4. 当banner图存在onmouseover事件时,停止banner切换,当存在onmouseout时继续切换

 !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 .div1{
 position: absolute;
 right: 10px;
 top: 50%;
 margin-top: -32px;
 cursor: pointer;
 #banner #bannerButtonAside .div2{
 position: absolute;
 left: 10px;
 top: 50%;
 margin-top: -32px;
 cursor: pointer;
 /style 
 /head 
 body 
 !--实现 左右按钮,1234,自动滑动,鼠标停上显示小手不动 暂停。-- 
 section id="banner" onmouseout="changeStart()" 
 !--以下是我们的banner图-- 
 div id="bannerImg" 
 img src="../fc55457b93fe9c.jpg"/ 
 img src="../img/5f5bdebddd8f1d276aeac8af5f8fa38d.jpg"/ 
 img src="../img/5f5e5c091ecb0525fc8204f200670dd9.jpg"/ 
 img src="../img/efa11cad9094f951061eeefe.jpg"/ 
 img src="../img/0b54c021bd4384c168d835dfc0908018.jpg"/ 
 img src="../img/25d10d413faca3bdd7e2d88667f4298f_看图王.jpg"/ 
 img src="../fc55457b93fe9c.jpg"/ !--第7张与第一张为同一图片,消除图片切换间断-- 
 /div 
 !--以下是我们左下方的banner图按钮-- 
 div id="bannerButton" 
 button 1 /button 
 button 2 /button 
 button 3 /button 
 button 4 /button 
 button 5 /button 
 button 6 /button 
 /div 
 !--以下是我们左右两个方向按钮-- 
 div id="bannerButtonAside" 
 div 
 img src="../img/forword.png"/ 
 /div 
 div 
 img src="../img/back.png"/ 
 /div 
 /div 
 /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 

但是经过博主的测试,发现程序存在一定的瑕疵,第一张图片的保留时间比其他图片长,而且每次重新开启定时器均存在这个问题。暂时博主还没有比较简单

省事的方法改良他,所以仅供参考思路,以后要用,当然还是jQuery省事啦!

如果存在错误,欢迎朋友们指出,我们一起探讨,改良代码!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读