我們在許多網站都可以看到和下圖類似的效果，下面我們來講解一下用javascritpt製作簡單的網站滑動窗效果，在上一篇，我們留下了三個問題，
2.實現較為自然的滑動的效果
3.點選其中一個灰色圓圈後，圓圈變為橙色，其他變為灰色
4.由於圖片放置有先後之分，點選位於前面的圖片後，再點選後面的圖片，能顯示出來
0 用javascritpt製作簡單的網站滑動窗效果（一）
方法/步驟
2.實現較為自然的滑動的效果
上一篇提到了一個slopmove(j)函式，下面是其程式碼
function slopmove(j){
var object1 = picture[j];
if (!object1.style.left) {
object1.style.left = 500 +'px';
}
var leftmove = parseInt(object1.style.left);
if (leftmove>0) {
leftmove=leftmove-Math.ceil((leftmove-0)/15);//平滑演算法
}
else{
clearTimeout(rightm); //到目標後清除計時器
return 1;
}
object1.style.left = leftmove + 'px';
var rightm = setTimeout(function(){slopmove(j);},10); //隔10m滑動
}
這個函式的目的就是實現比較平滑的滑動效果，
leftmove=leftmove-Math.ceil((leftmove-0)/15);
這一行，就是平滑的演算法，leftmove是圖片距離容器左邊邊界的距離，圖片目的是移到左邊去，即leftmove=0，Math.ceil((leftmove-0)/15)這裡得到是滑動的距離，應該是先大後小，有一種平滑的效果
var rightm = setTimeout(function(){slopmove(j);},10);
setTimeout設定一個定時器，10ms後執行function(){slopmove(j);，這裡用function(){slopmove(j);，是因為需要傳遞一個引數 j 進slopmove(j)
clearTimeout(rightm); //到目標後清除計時器
return 1;
到邊後消除計時器，並return 1，return 1是為了 離開函式
3.點選其中一個灰色圓圈後，圓圈變為橙色，其他變為灰色：
control[j].style.background = '#FC9D51';
for(var b=0 ;b<5;b++){
if (b!=j) {
control[b].style.background = '#8F8F8F';}
}
這個其實比較簡單，'#FC9D51'是橙色，'#8F8F8F';是灰色
4.由於圖片放置有先後之分，點選位於前面的圖片後，再點選後面的圖片，能顯示出來：
for ( var i=j+1 ; i < 5; i++) {
picture[i].style.left = 500 +'px';
}
j 是你點選圓圈 j 觸動的圖片 j，這裡意思是把比圖片j位置要高的移走，為何要移走呢，因為，圖片重疊是，是序號大的圖片放在上面，序號小的圖片就會被遮住，所以我們要把序列更大先移走以免擋了要顯示的圖片
下面是js的完整程式碼
window.onload=function(){
var picture = document.getElementsByClassName('picture');
var control = document.getElementsByClassName('controlall');
function slopmove(j){
var object1 = picture[j];
if (!object1.style.left) {
object1.style.left = 500 +'px';
}
for ( var i=j+1 ; i < 5; i++) {
picture[i].style.left = 500 +'px';
}
var leftmove = parseInt(object1.style.left);
if (leftmove>0) {
leftmove=leftmove-Math.ceil((leftmove-0)/15);
}
else{
clearTimeout(rightm);
return 1;
}
object1.style.left = leftmove + 'px';
var rightm = setTimeout(function(){slopmove(j);},10);
}
for (var i =0; i < control.length; i++) {
(function(i){
var j = i;
control[j].onclick = function (){
picture[i].style.left = 500 +'px';
control[j].style.background = '#FC9D51';
for(var b=0 ;b<5;b++){
if (b!=j) {
control[b].style.background = '#8F8F8F';}
}
slopmove(j);
}
})(i);
}
}
下面是所有程式碼：
