# jQuery Mobile經典練習題 (上一張下一張無限循環)

###### tags: `jQuery` `JavaScript` `jQuery Mobile` `CSS` `PHP` `HTML`

---
#### bind()

$(function(){
    //指定prev .監聽 點擊後執行 alert
    $("#prev").bind("click",function(){
        alert('hi,prev!');
    })
    $("#next").bind("click",function(){
        alert('hi,next~');
    });
})

## 經典練習題
製作一個有上一個按鈕與下一個按鈕更換圖片的頁面(可無限循環)

<script>
    $(function(){
        $("#prev").bind("click",prev);
        $("#next").bind("click",next);
    });


    var a = 0;
    var imgSrc,imgName;

    var arrayImgSrc =  new Array("001.jpg","002.jpg","003.jpg");
    var arrayImgName = new Array("圖1","圖2","圖3");

    function prev(){
        a--;
        if( a < 0){ 
            a = 2;
        }
        imgSrc = "image/ONE-OK-ROCK/" + arrayImgSrc[a];
        imgName = arrayImgName[a];
        $("#pimg").attr("src",imgSrc);
        $("#ptext").text(imgName);
    }
    function next(){
        a++;
        if( a > 2){ 
            a = 0;
        }
        imgSrc = "image/ONE-OK-ROCK/" + arrayImgSrc[a];
        imgName = arrayImgName[a];
        $("#pimg").attr("src",imgSrc);
        $("#ptext").text(imgName);
    }
</script>

<div role="main" class="ui-content">
    <div class="logo">
        <img src="image/ONE-OK-ROCK/003.jpg" alt="" width="100%" id="pimg">
    </div>
    <div id="ptext">
        <h2>VIDEOS</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias necessitatibus adipisci quos qui voluptatum quisquam minima sit, libero neque enim, natus magni, vitae numquam molestiae omnis fuga quam in quibusdam.</p>
    </div>

---
<style>
h2 {
color: #2383F8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383F8;
padding:8px;
}

.code1 {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code {
padding: 2px 4px;
font-size: 90%;
font-family:'Fira Code';
}
</style>