Javascript可以說是當前Web前端開發必備的技能之一，它不僅可以通過DOM操作實現頁面元素的動態交互效果，還可以使用Canvas繪制出各種復雜的圖形。其中最為常用的一個應該就是利用Javascript來生成特效了，比如輪播圖、滾動條、瀑布流等等。下面我們就來講一講Javascript生成的一些常見特效。

第一種常見的特效就是輪播圖。我們可以通過Javascript和jQuery分別實現這一效果。代碼如下：

//javascript版
var i = 0;
var timer;
function autoPlay(){
timer = setInterval(function(){
i = ++i >3 ? 1 : i;
$("#banner img").eq(i-1).fadeIn(500).siblings().fadeOut(500);
},2000);
}
autoPlay();
//jQuery版
var i = 0;
var timer;
$(function(){
$("#banner img").eq(0).show().siblings().hide();
function autoPlay(){
i++;
if(i == 3){
i = 0;
}
$("#banner img").eq(i).fadeIn(500).siblings().fadeOut(500);
}
timer = setInterval(autoPlay,2000);
})；

第二種常見的特效就是Tab切換。Tab切換可以讓數據呈現出多種形態，增強用戶的交互性。代碼如下：

//javascript版
var oLi = document.getElementById("tab").getElementsByTagName("li");
var oUl = document.getElementById("content").getElementsByTagName("ul");
for(var i = 0 ; i< oLi.length ; i++){
oLi[i].index = i;
oLi[i].onclick = function(){
for(var n = 0 ; n< oLi.length ; n++){
oLi[n].className = "";
oUl[n].style.display = "none";
}
this.className = "selected";
oUl[this.index].style.display = "block";
}
}
//jQuery版
$(function(){
$("#tab li").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var index = $("#tab li").index(this);
$("#content>ul").eq(index).show().siblings().hide();
})
})；

第三種常見的特效就是滾動條。滾動條旨在使Web應用程序更易于使用。需要注意的是，如果一個頁面中要用到多個滾動條，建議使用封裝的方式處理，避免重復代碼。代碼如下：

//javascript版
window.onload = function(){
scrollBar($(".scrollContent"));
}
function scrollBar(obj){
var warp = obj.parent();
var content = obj;
var bar = warp.find(".scrollBar");
var slider = bar.find(".slider");
var contentH = content.height();
var wrapH = warp.height();
var radio = wrapH/contentH;
var sliderH = bar.height() * radio;
slider.height(sliderH);
wrap.scroll(function(){
var scrollTOP = wrap.scrollTop();
var sliderTOP = scrollTOP * radio;
slider.css({top:sliderTOP+"px"});
});
}
//jQuery版
(function($){
$.fn.scrollBar = function(){
return this.each(function(){
var warp = $(this).parent();
var content = $(this);
var bar = warp.find(".scrollBar");
var slider = bar.find(".slider");
var contentH = content.height();
var wrapH = warp.height();
var radio = wrapH/contentH;
var sliderH = bar.height() * radio;
slider.height(sliderH);
wrap.scroll(function(){
var scrollTOP = wrap.scrollTop();
var sliderTOP = scrollTOP * radio;
slider.css({top:sliderTOP+"px"});
});
})
}
})(jQuery);
$("#content").scrollBar();

總之，Javascript生成特效是前端開發中非常實用的技能，我們在開發過程中有時需要自己實現一些特效。當然，也可以通過各種jQuery插件來實現這些特效。但無論是自己編寫還是使用插件，掌握Javascript是開發這些特效的前提。