JQuery實現點擊按鈕切換圖片(附源碼)--JQuery基礎
阿新 • • 發佈：2017-10-16
代碼 clas title n-1 ttr 追加 doctype ctype 疑問 <!DOCTYPE html>
.box{
JQuery實現切換圖片相對比較簡單，直接貼代碼了哈，有註釋噢！疑問請追加評論哈，不足之處還請大佬們指出！
1、案例代碼：
demo.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery實現點擊按鈕切換圖片</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
text-align: center;/*將box裏的內容居中顯示*/
}
.btn{
display: inline-blocki;/*讓a標簽變成行內塊級元素*/
height: 30px;
line-height: 30px;
border:1px solid #ccc;
text-decoration: none;
color: #333;
padding: 5px;
font-size: 12px;
}
.btn:active{
background-color: #666;
color: white;
}
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" alt="pic" id="img">
<p>
<a href="javascript:;" class="btn" data-control="last">上一頁</a>
<a href="javascript:;" class="btn" data-control="next">下一頁</a>
</p>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var imgs = [//定義數組用來存儲圖片的路徑
‘images/1.jpg‘,
‘images/2.jpg‘,
‘images/3.jpg‘,
‘images/4.jpg‘,
‘images/5.jpg‘,
‘images/6.jpg‘
];
var index = 0;//設置第一張圖片的索引值為0
var len = imgs.length;//獲取存儲圖片數組的長度
$(‘.btn‘).on(‘click‘,function(){//綁定點擊事件
if($(this).data(‘control‘) === "last"){
//如果寫成 $(this).data(‘control‘) === ‘last‘是對的
//如果寫成 $(this).data(‘control‘) = ‘last‘那就始終為真了，沒意義
//如果寫成 ‘last‘ === $(this).data(‘control‘)是對的
//如果寫成 ‘last‘ = $(this).data(‘control‘)語句就會報一個錯誤
// index--;
// if(index<0){
// index = 0;
// }
// index--;
index = Math.max(0,--index);//如果index的值小於0，使index為0
}else
index = Math.min(len-1,++index);//如果index大於了數組長度 ，使index等於數組長度減一的值
document.title = (index+1)+‘/‘+len;//改變標題內容
$(‘#img‘).attr(‘src‘,imgs[index]);//動態改變圖片的路徑
});
</script>
</body>
</html>
2、Effect Picture
案例源碼文件：JQuery實現點擊按鈕切換圖片.zip
JQuery實現點擊按鈕切換圖片(附源碼)--JQuery基礎