超簡單的圖片左右切換滑動

NO IMAGE

網上看過很多圖片左右切換滑動的效果,不過大都是使用插件實現。插件雖方便,但是對於新手的學習並不是最好的。本文使用jquery這個由原生的JavaScript封裝的庫,用最簡短的代碼實現此功能

效果預覽如下圖:

超簡單的圖片左右切換滑動

代碼部分(直接便可使用,注意對應的圖片路徑改成自己的圖片路徑,圖片大小建議300*300)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>超簡單的圖片左右切換滑動</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
var cot=0;//設置一個計數器,初始值為0;作用是用來監聽點擊切換的時候哪一個圖片應該隱藏或者顯示
function nex(){
if(cot<=2){
$('.imgs img').eq(cot).animate({'margin-left':'-305px'},500);
cot++;
}
}
function pre(){
if(cot>0){
cot--;
$('.imgs img').eq(cot).animate({'margin-left':'0'},500);
}
}
</script>
</head>
<body>
<div style="width:900px;margin:auto;overflow:hidden"> <!-- 這個最外圍的容器div寬度為900px,每張圖寬為300px,所以只顯示3張,剩下的圖超出容器隱藏起來 -->
<div class="imgs" style="width:50000px;"><!--這個div的作用是讓所有的圖片都排在同一水平上,這樣子切換的時候效果會更好-->
<img src="1.jpg" /><!--這裡的圖片換上到時候自己對應的圖片-->
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
<img src="6.jpg" />
</div>
<div>
<div onclick="pre()" style="float:left;cursor:pointer">上一頁</div>
<div onclick="nex()" style="float:right;cursor:pointer">下一頁</div>
</div>
</div>
</body>
</html>

相關文章

微信小程序toast組件中bindchange事件觸發條件

PHP從二維數組獲取指定數據,組成新維二數組

使用FileZillaServer快速搭建本地FTP服務器

微信小程序開發中varthat=this的用法