JQuery实现点击按钮切换图片(附源码)--JQuery基础
生活随笔
收集整理的這篇文章主要介紹了
JQuery实现点击按钮切换图片(附源码)--JQuery基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的JQuery实现点击按钮切换图片(附源码)--JQuery基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css图片的全屏显示代码-css3
- 下一篇： 封装cookie设置和获取的简易方法