jquery簡單圖片切換

『壹』 jquery實現圖片自動切換和點擊切換

需要js+css配合，我給您找段代碼吧。

JS代碼

$(function(){
$(".mmy").click(function(){returnfalse;});
varflipDelay=5500;
varflipCount=$("div.banner_footera").size();//圖片總數
varflipId=1;
varflipId1=0;
varflipTimer=null;
varflipTimer1=null;
vari=0;
varflip=function(){
if(flipCount<2)return;
$("div.banner_footera").removeClass("current");
$($("div.banner_footera").get(flipId)).addClass("current");
$($("div.banner_footera").get(flipId)).css("current");
$("div.banner>a:visible").fadeOut();
$($("div.bannera").get(flipId)).fadeIn("slow");
flipId=(flipId+1)%flipCount;
flipTimer=window.setTimeout(flip,flipDelay);
}
flipTimer=window.setTimeout(flip,flipDelay);
$("div.banner_footera").click(function(){
clearTimeout(flipTimer);
flipId=$("div.banner_footera").index(this);
flip();
returnfalse;
});
varflipserver=function(){
$("div.index_server_box>a:visible").fadeOut();
$($("div.index_server_boxa").get(flipId1)).fadeIn("slow");
}
$("a.index_server_left").click(function(){
flipId1=(flipId1-1)%3;
flipserver();
returnfalse;
});
$("a.index_server_right").click(function(){
flipId1=(flipId1+1)%3;
flipserver();
returnfalse;
});
vardocumentWidth=$(window).width();
varleft=(documentWidth-310)/2;
varright=left+306;
$("div.services_boxdiv.left").css("width",left+"px");
$("div.services_boxdiv.right").css("width",right+"px");
$(window).resize(function(){
vardocumentWidth=$(window).width();
varleft=(documentWidth-310)/2;
varright=left+306;
$("div.services_boxdiv.left").css("width",left+"px");
$("div.services_boxdiv.right").css("width",right+"px");
});
});

html樣式

<divclass="banner_box">
<divclass="banner">
<ahref=""class="banner1"><imgsrc="img/banner1.jpg"alt="視覺為您解決網站建設中企業品牌形象問題"/></a>
<ahref=""class="banner2"><imgsrc="img/banner2.jpg"alt="獨具匠心的網頁設計讓您的網站與總部同"/></a>
<ahref=""class="banner3"><imgsrc="img/banner3.jpg"alt="針對用戶需求，提供高品質網站設計服務"/></a>
<ahref=""class="banner4"><imgsrc="img/banner4.jpg"alt="網站建設公司團隊的力量"/></a>
<ahref=""class="banner5"><imgsrc="img/banner5.jpg"alt="招聘網頁設計師"/></a>
<divclass="banner_footer">
<aclass="a1current"><imgsrc="img/a13.jpg"alt=""/></a>
<aclass="a2"><imgsrc="img/a14.jpg"alt=""/></a>
<aclass="a3"><imgsrc="img/a15.jpg"alt=""/></a>
<aclass="a4"><imgsrc="img/a16.jpg"alt=""/></a>
<aclass="a5"><imgsrc="img/a17.jpg"alt=""/></a>
</div>
</div>
</div>

css樣式

div.banner_box{height:430px;overflow:hidden;background:url(../img/b1.jpg)repeat-x;}
div.banner_boxdiv.banner{width:990px;height:430px;overflow:hidden;margin:auto;position:relative;}
div.banner_boxdiv.bannera{border:0;}
div.banner_boxdiv.bannera.banner1img{margin-left:200px;}
div.banner_boxdiv.bannera.banner2img{margin-left:236px;}
div.banner_boxdiv.bannera.banner3img{margin-left:250px;}
div.banner_boxdiv.bannera.banner4img{margin-left:231px;}
div.banner_boxdiv.bannera.banner5img{margin-left:245px;}
div.banner_boxdiv.bannerdiv.banner_footer{position:absolute;width:120px;height:20px;top:30px;right:0;z-index:100;}
div.banner_boxdiv.bannerdiv.banner_footera{float:left;width:19px;height:19px;cursor:pointer;}
div.banner_boxdiv.bannerdiv.banner_footera.current{background:url(../img/a13_1.jpg)centercenterno-repeat;}
div.banner_boxdiv.bannerdiv.banner_footeraimg{border:0;margin:3px003px;}

希望能幫到您！祝您好運！

『貳』 jquery點擊圖標來回切換的幾種方法（如開關

『叄』 如何jQuery實現圖片輪播的同時左右按鈕可以實現切換

建議，在當前輪播圖的div添加類active，設置.active {display：block；}，.ban{display:none;};這樣可以通過添加或移除active就可以了；這樣以下就比較方便很多，要不然又要做循環，麻煩（swiper插件做輪播效果不錯）
$(".left").click(function(){

var $index = $(".ban").hasClass("active").index();//獲取當前輪播圖的下標
if($index === 0 ) {//當前為第一張輪播圖
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//這里寫成你自動切換的代碼，我這里只是一個無動態切換效果的方法
}else {
$(".ban").eq($index-1).addClass("active)
.siblings(".ban").removeClass("active");
})
$(".right").click(function(){

var $index = $(".ban").hasClass("active").index();//獲取當前輪播圖的下標
if($index === ($(".ban").length-1) ) {//當前為最後一張輪播圖
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//這里寫成你自動切換的代碼，我這里只是一個無動態切換效果的方法
}else {
$(".ban").eq($index+1).addClass("active)
.siblings(".ban").removeClass("active");
})
//大體思路是這樣了，代碼可能有個別字母寫得不對，畢竟是手敲的，但是大概思路是這樣了

『肆』 jquery 點擊事件 實現圖片切換

實現圖片切換方式舉例如下：

html代碼:
<div>
<div class="lable">
<span class="cur">圖一</span><span>圖二</span><span>圖三</span> </div>
<div class="imgs">
<img src="1.jpg" class="cur"/>
<img src="2.jpg" />
<img src="3.jpg" />
</div>
</div>

css代碼:
<style>
.label .cur{border-bottom:1px solid red}
.imgs{display:none}
.imgs .cur{display:block}
</style>

jquery代碼:
$(function(){
$(".label span").click(function(){
$(this).addClass("cur").siblings().removeClass("cur");
$(".imgs").removeClass("cur").eq($(this).index()).addClass("cur");
})
})