jq做的简单的轮播

Posted 2020-12-26 hjc1234

 

 

 

<button id="aa">上一页</button>
<img src="../1.png" height="200px"  width="150PX">
<button onclick="next()">下一页</button>

 

 

 

 

 

 

 

 

var k=0;//当下标使用
//定义一个图片数组
var imgs =["../1.png",
           "../5.png",
           "../4.png",
           "../7.jpg"];
    var pev = null;//上一页定义的元素
    var imgDom = null; //图片对象
    var dsp = null; //定时器对象
$(document).ready(function(){
    imgDom=$("img");
    pev =$("#aa");
    pev.click(function(){
         pevo();
    });
     dsp = setInterval(function(){
            next();
        },2000);
});

function next(){
        k++;
        if( k>=imgs.length){
        k=0;
        }
        imgDom.attr("src",imgs[k]);
    }
function pevo(){
    k--;
    if(k<0){
    k=imgs.length-1;
    }
    imgDom.attr("src",imgs[k]);
}