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

時間 2020-06-14

標籤簡單圖片左右切換滑動简体版

原文原文鏈接

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

效果預覽以下圖：html

代碼部分（直接複製代碼即可使用，注意對應的圖片路徑改爲本身的圖片路徑，圖片大小建議300*300）jquery

<!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>

最後

以爲文章不錯的，給我點個贊哇，關注一下唄！
技術交流可關注微信公衆號【GitWeb】，加我好友一塊兒探討
微信交流羣：加好友（備註思否）邀你入羣，抱團學習共進步

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。