圖片輪播的手寫代碼
阿新 • • 發佈：2017-05-26
ava absolut 利用 one abs asc src num 輪播
js文件（註意：已經引入jquery文件）
之前有人問過我關於圖片輪播的代碼怎麽寫，盡管我是專註於後臺的，但學習一些後臺的僅僅是還是比較有優點的，我有時候總是把簡單的問題復雜化，其原因還是自己對於知識點的掌握不夠堅固，導致不可以在實踐中充分利用起來。所以。在平時的學習過程中，很多其它的應該註重於實踐，僅僅有實踐，才幹在這個過程中把知識充分吸收，充分利用。
話說回來，圖片輪播，已經不能簡單的依賴css了，可是問題來了，我卻想到了用Ajax。。。。事實上，思路還是對的。即效果的生成還是依靠對節點的操作，但依靠純粹的JavaScript卻太過於復雜，所以我就引入了jquery庫，這裏面的東西自己感覺都學完了。可是靈活的運用還是不太有把握，非常多東西看起來單一，可是在實際的開發過程中結合起來卻非常的重要。
另外我要說的是，也是我的個人觀點，我看到有不少人去用dreamearver等所見即所得的開發工具去做特效，不是不行。我認為。即便是做出來，代碼的復雜度和可閱讀性會大大的下降，並且，非常不利於後期的維護工作，不懂代碼的話會無法深入到代碼去修該，所以說。我的建議是使用文本編輯工具如notepad++，假設是有規模的項目能夠用集成開發工具。如Zend studio等。Dreamweaver是美工用的東西，不是面向開發者的。
回歸到正題。我把圖片輪播的代碼文件方面分為4塊： html文件 css文件 js文件 圖片文件。
html;
<html> <head> <meta charset="utf-8" /> <title>圖片輪播</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="my.js"></script> <link rel="stylesheet" type="text/css" href="my.css"/> </head> <body> <div class="main"> <div class="myslide"> <div class="myslidetwo"> <img src="01.jpg"/> <img src="02.jpg"/> <img src="03.jpg"/> <img src="04.jpg"/> </div> </div> <div class="daohang"> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <ol> <div> </div> </body> </html>
body{
background-color: #dddddd;
}
*{
margin: 0px;
padding: 0px;
}
.main{
position: absolute;
left: 50%;
top: 50%;
margin: -175px 0px 0px -250px;
width: 500px;
height: 350px;
}
.myslide{
float: left;
width: 500px;
height: 350px;
position: absolute;
overflow: hidden;
}
.myslidetwo{
position: absolute;
overflow: hidden;
width: 2000px;
}
.myslidetwo img{
float: left;
width: 500px;
height: 350px;
}
.daohang{
position: absolute;
bottom: -40px;
left: 210px;
width: 200px;
/*background: red;*/
}
ol li{
list-style: none;
float: left;
border: #fc0;
font-size: 30px;
background: #fff;
cursor: pointer;
}
ol li.current{
background: #0f0;
}js文件（註意：已經引入jquery文件）
$(document).ready(function(){
var _now=0;
var oul=$(".myslidetwo");
var numl=$(".daohang ol li");
var ali=$(".myslide").eq(0).width();
numl.click(function(){
var index=$(this).index();
$(this).addClass("current").siblings().removeClass();
oul.animate({‘left‘:-ali*index},500);
})
setInterval(function(){
if(_now==numl.size()-1){
_now=0;
}else{
_now++;
}
numl.eq(_now).addClass("current").siblings().removeClass();
oul.animate({‘left‘:-ali*_now},500);
},2000)
});這樣就完畢了圖片的輪播，註意的是圖片的尺寸，輪換的事件等圖片輪播的手寫代碼