jquery實現(xiàn)圖片自動切換和點擊切換

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

創(chuàng)新互聯(lián)網站建設公司一直秉承“誠信做人，踏實做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務為基礎，以質量求生存，以技術求發(fā)展，成交一個客戶多一個朋友！專注中小微企業(yè)官網定制，成都網站設計、網站建設，塑造企業(yè)網絡形象打造互聯(lián)網企業(yè)效應。

JS代碼

$(function?()?{

$(".dummy").click(function?()?{?return?false;?});

var?flipDelay?=?5500;

var?flipCount?=?$("div.banner_footer?a").size();?//?圖片總數(shù)

var?flipId?=?1;

var?flipId1?=?0;

var?flipTimer?=?null;

var?flipTimer1?=?null;

var?i?=?0;

var?flip?=?function?()?{

if?(flipCount??2)?return;

$("div.banner_footer?a").removeClass("current");

$($("div.banner_footer?a").get(flipId)).addClass("current");

$($("div.banner_footer?a").get(flipId)).css("current");

$("div.banner??a:visible").fadeOut();

$($("div.banner?a").get(flipId)).fadeIn("slow");

flipId?=?(flipId?+?1)?%?flipCount;

flipTimer?=?window.setTimeout(flip,?flipDelay);

}

flipTimer?=?window.setTimeout(flip,?flipDelay);

$("div.banner_footer?a").click(function?()?{

clearTimeout(flipTimer);

flipId?=?$("div.banner_footer?a").index(this);

flip();

return?false;

});

var?flipserver?=?function?()?{

$("div.index_server_box??a:visible").fadeOut();

$($("div.index_server_box?a").get(flipId1)).fadeIn("slow");

}

$("a.index_server_left").click(function?()?{

flipId1?=?(flipId1?-?1)?%?3;

flipserver();

return?false;

});

$("a.index_server_right").click(function?()?{

flipId1?=?(flipId1?+?1)?%?3;

flipserver();

return?false;

});

var?documentWidth?=?$(window).width();

var?left?=?(documentWidth?-?310)?/?2;

var?right?=?left?+?306;

$("div.services_box?div.left").css("width",?left?+?"px");

$("div.services_box?div.right").css("width",?right?+?"px");

$(window).resize(function?()?{

var?documentWidth?=?$(window).width();

var?left?=?(documentWidth?-?310)?/?2;

var?right?=?left?+?306;

$("div.services_box?div.left").css("width",?left?+?"px");

$("div.services_box?div.right").css("width",?right?+?"px");

});

});

html樣式

div?class="banner_box"

div?class="banner"

a?href=""?class="banner1"img?src="img/banner1.jpg"?alt="視覺為您解決網站建設中企業(yè)品牌形象問題"?//a

a?href=""?class="banner2"img?src="img/banner2.jpg"?alt="獨具匠心的網頁設計讓您的網站與總部同"?//a

a?href=""?class="banner3"img?src="img/banner3.jpg"?alt="針對用戶需求，提供高品質網站設計服務"?//a

a?href=""?class="banner4"img?src="img/banner4.jpg"?alt="網站建設公司團隊的力量"?//a

a?href=""?class="banner5"img?src="img/banner5.jpg"?alt="招聘網頁設計師"?//a

div?class="banner_footer"

a?class="a1?current"img?src="img/a13.jpg"?alt=""?//a

a?class="a2"?img?src="img/a14.jpg"?alt=""?//a

a?class="a3"img?src="img/a15.jpg"?alt=""?//a

a?class="a4"img?src="img/a16.jpg"?alt=""?//a

a?class="a5"img?src="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_box?div.banner{width:990px;?height:430px;?overflow:hidden;?margin:auto;?position:relative;}

div.banner_box?div.banner?a{border:0;}

div.banner_box?div.banner?a.banner1?img{margin-left:200px;}

div.banner_box?div.banner?a.banner2?img{margin-left:236px;}

div.banner_box?div.banner?a.banner3?img{margin-left:250px;}

div.banner_box?div.banner?a.banner4?img{margin-left:231px;}

div.banner_box?div.banner?a.banner5?img{margin-left:245px;}

div.banner_box?div.banner?div.banner_footer{position:absolute;width:120px;height:20px;top:30px;?right:0;z-index:100;??}

div.banner_box?div.banner?div.banner_footer?a{float:left;?width:19px;?height:19px;?cursor:pointer;?}

div.banner_box?div.banner?div.banner_footer?a.current{background:url(../img/a13_1.jpg)?center?center?no-repeat;}

div.banner_box?div.banner?div.banner_footer?a?img{border:0;?margin:3px?0?0?3px;}

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

jquery怎么實現(xiàn)點擊一個元素更換背景圖片，連續(xù)點擊永遠在2張圖片之間更換

實現(xiàn)的方法和操作步驟如下：

1、首先，打開html編輯器，創(chuàng)建一個新的html文件，例如index.html，然后引入jquery，如下圖所示。

2、其次，完成上述步驟后，在index.html的script標記中，輸入下圖紅框中的jquery代碼，如下圖所示。

3、接著，完成上述步驟后，瀏覽器運行index.html頁面，顯示出了其中1張背景圖片，如下圖所示。

4、最后，完成上述步驟后，再次單擊“點擊更換”按鈕，這時背景圖像被更改為另一幅，如下圖所示。這樣，問題就解決了。

jquery 圖片自動切換

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

JS代碼

$(function () { $(".dummy").click(function () { return false; }); var flipDelay = 5500; var flipCount = $("div.banner_footer a").size(); // 圖片總數(shù) var flipId = 1; var flipId1 = 0; var flipTimer = null; var flipTimer1 = null; var i = 0; var flip = function () { if (flipCount 2) return; $("div.banner_footer a").removeClass("current"); $($("div.banner_footer a").get(flipId)).addClass("current"); $($("div.banner_footer a").get(flipId)).css("current"); $("div.banner a:visible").fadeOut(); $($("div.banner a").get(flipId)).fadeIn("slow"); flipId = (flipId + 1) % flipCount; flipTimer = window.setTimeout(flip, flipDelay); } flipTimer = window.setTimeout(flip, flipDelay); $("div.banner_footer a").click(function () { clearTimeout(flipTimer); flipId = $("div.banner_footer a").index(this); flip(); return false; }); var flipserver = function () { $("div.index_server_box a:visible").fadeOut(); $($("div.index_server_box a").get(flipId1)).fadeIn("slow"); } $("a.index_server_left").click(function () { flipId1 = (flipId1 - 1) % 3; flipserver(); return false; }); $("a.index_server_right").click(function () { flipId1 = (flipId1 + 1) % 3; flipserver(); return false; }); var documentWidth = $(window).width(); var left = (documentWidth - 310) / 2; var right = left + 306; $("div.services_box div.left").css("width", left + "px"); $("div.services_box div.right").css("width", right + "px"); $(window).resize(function () { var documentWidth = $(window).width(); var left = (documentWidth - 310) / 2; var right = left + 306; $("div.services_box div.left").css("width", left + "px"); $("div.services_box div.right").css("width", right + "px"); });});

html樣式

div class="banner_box" div class="banner" a href="" class="banner1"img src="img/banner1.jpg" alt="視覺為您解決網站建設中企業(yè)品牌形象問題" //a a href="" class="banner2"img src="img/banner2.jpg" alt="獨具匠心的網頁設計讓您的網站與總部同" //a a href="" class="banner3"img src="img/banner3.jpg" alt="針對用戶需求，提供高品質網站設計服務" //a a href="" class="banner4"img src="img/banner4.jpg" alt="網站建設公司團隊的力量" //a a href="" class="banner5"img src="img/banner5.jpg" alt="招聘網頁設計師" //a div class="banner_footer" a class="a1 current"img src="img/a13.jpg" alt="" //a a class="a2" img src="img/a14.jpg" alt="" //a a class="a3"img src="img/a15.jpg" alt="" //a a class="a4"img src="img/a16.jpg" alt="" //a a class="a5"img src="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_box div.banner{width:990px; height:430px; overflow:hidden; margin:auto; position:relative;}div.banner_box div.banner a{border:0;}div.banner_box div.banner a.banner1 img{margin-left:200px;}div.banner_box div.banner a.banner2 img{margin-left:236px;}div.banner_box div.banner a.banner3 img{margin-left:250px;}div.banner_box div.banner a.banner4 img{margin-left:231px;}div.banner_box div.banner a.banner5 img{margin-left:245px;}div.banner_box div.banner div.banner_footer{position:absolute;width:120px;height:20px;top:30px; right:0;z-index:100; }div.banner_box div.banner div.banner_footer a{float:left; width:19px; height:19px; cursor:pointer; }div.banner_box div.banner div.banner_footer a.current{background:url(../img/a13_1.jpg) center center no-repeat;}div.banner_box div.banner div.banner_footer a img{border:0; margin:3px 0 0 3px;}

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

這樣可以么？

怎么用jQuery做出按下不同的按鈕切換不同的圖片呢

var?$img=?$('image_div')

$('btn_four').on('click',?function?(e)?{

var?url,

index?=?$(e.target).index();

switch?(index)

{

case?0:?{?url?=?'貓圖的地址'?};?break;?//貓狗

//?case?1……

}

$img.attr('src',?url);

})

三張圖片，jquery怎么點擊切換圖片，并且切換后圖片停留

首先你這個最簡單的做法需要的不是3張圖而是6張！然后原理：點擊一張圖片更換3張圖的src屬性的圖片路徑就行了！

$("#"+id).attr("src","123.jpg");

文章名稱：圖片切換jquery,圖片切換代碼
鏈接URL：http://m.br277.com/article/dsciecg.html