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

時間 2019-12-05

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

原文原文鏈接

網上看過不少圖片左右切換滑動的效果，不過大都是使用插件實現。插件雖方便，可是對於新手的學習並非最好的。本文使用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>複製代碼

相關標籤/搜索

每日一句

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