極簡的js點擊組圖轉場效果

最後更新：2017-09-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：osi ret text pointer 頁面 http 網上 java exp

程式員進行前端開發時，時常要用到點擊切換組圖的動畫效果，網上確實有很多此類外掛程式，但是都很麻煩，烏糟糟無數代碼，有那個看的時間，自己都能把功能寫完了。在這裡我提供一段極簡的js點擊組圖轉場效果代碼，包含一個html檔案，一個css檔案，一個js檔案，一個jquery.js檔案，以及一張圖片。

index.html

<html>
<head>
<title>js點擊組圖左右滑動</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="main">
<div class="main_in">
<ul id="main_ul">

</ul>
</div>
<div class="main_change">
<div id="prev" onclick="slideprev()"><img src="images/prev.png"></div>
<div id="next" onclick="slidenext()"><img src="images/next.png"></div>
</div>
</div>
</body>
</html>

樣式表：

css.css

*{margin: 0px; padding: 0px;}
.main{width: 1180px; margin:auto;}
.main_in{overflow: hidden;}
.main_in ul{display: block; width:5000px; height: 500px; overflow:hidden;position: relative;}
.main_in_li{display: block; margin-right: 20px; float: left;}
.main_change{width: 1312px; margin: 0 auto; position: relative; top: -250px; left:-66px;}
#next{width: 40px; height: 75px; cursor: pointer; position: absolute; right: 0px; background: #999;}
#prev{width: 40px; height: 75px; cursor: pointer;position: absolute; left: 0px; background: #999;}

js檔案：

js.js

//根據class擷取元素
function getByClass(sClass){
var aResult=[];
var aEle=document.getElementsByTagName(‘*‘);
var re=new RegExp("\\b" + sClass + "\\b","g");
for(var i=0;i<aEle.length;i++){
if(aEle[i].className.search(re) != -1){
aResult.push(aEle[i]);
}
}
return aResult;
};

//下一個
function slidenext(){
var i=0;
var n;
for(i;i<getByClass("main_in_li").length;i++){//根據class擷取li標籤個數
if(getByClass("main_in_li")[i].id=="main_in_li_id"){//根據id判斷li標籤在數組中的位置，得到i的值，從而得出ul標籤left像素的值
if(i<getByClass("main_in_li").length-4){//4代表容器中顯示的<li>標籤的個數，你想在頁面上顯示幾個<li>方塊，除了在樣式表中需要修改寬度以外，也需要修改此處"4"這個值。
n=i+1;
$("#main_ul").animate({left:"-"+300*n},800);
getByClass("main_in_li")[i].id="";
}
}
}
getByClass("main_in_li")[n].id="main_in_li_id";
}

//上一個，邏輯同上函數
function slideprev(){
var i=0;
var n;
for(i;i<getByClass("main_in_li").length;i++){
if(getByClass("main_in_li")[i].id=="main_in_li_id"){
if(i>0){
n=i-1;
$("#main_ul").animate({left:"-"+300*n},800);
getByClass("main_in_li")[i].id="";
}
}
}
getByClass("main_in_li")[n].id="main_in_li_id";
}

本段js代碼基本採用原生的js寫成，不過也跟jquery的寫法差不多，邏輯是一樣的。

jquery.js檔案大家自己找吧，隨便那個都可以。圖片大家根據目錄隨便找一張放上去就行。

這一段代碼，其實不單單只是用於圖片切換，實質上切換的是<li>標籤，你想放文字等待其他東西，只管往<li>標籤裡面丟就行了。

極簡的js點擊組圖轉場效果

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More