導航:首頁 > 好看圖片 > jquery簡單圖片切換代碼

jquery簡單圖片切換代碼

 發布時間：2022-08-20 18:46:52

A. jquery代碼 點擊按鈕更換圖片

舉個例子：假設你已經引入了jquery，而html結構如下：

<divid="swphoto">
<imgsrc="1.jpg">
<imgsrc="2.jpg"style="display:none;">
</div>

那麼你的js可以這么寫：

$("#swphoto").click(function(){
$("#swphoto>img").toggle();
});

B. 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;}

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

C. 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");
})
})

D. 使用jquery如何實現圖片自動更換而且是定時的

<!DOCTYPEhtml>
<html>
<head>
<styletype="text/css">
.box{
width:200px;
height:200px;
margin:100pxauto;
border:1pxsolidpink;
}

.boximg{
display:inline-block;
width:100%;
height:100%;
}
</style>
</head>
<body>
<divclass="box">
<imgsrc="">
</div>
<scriptsrc="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<scripttype="text/javascript">
$(function(){
varimgArr=[
"./img/0.png",
"./img/1.png",
"./img/2.png",
"./img/3.png",
"./img/4.png",
];
$(".boximg").attr("src",imgArr[0]);
vari=0;
setInterval(function(){
i++;
if(i>imgArr.length-1){
i=0
}
$(".boximg").attr("src",imgArr[i]);
},2000);
})
</script>
</body>
</html>

上面是代碼：

實現原理是通過間隔定時器，每過2秒去設置img的src屬性。

imgArr是保存圖片的數組，當每一張圖片都展示後重頭再開始

imgArr的值是一張張圖片我這里是在img文件夾下放了5張圖片，題主可以根據自己的需求選擇網上或者本地圖片。

代碼效果：

E. 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;}

F. jquery代碼，點擊圖片中左側或者右側一個箭頭圖片，怎樣實現圖片切換

<style>
.left{float: left;width: 100px;overflow: hidden;}
.left li{height: 30px;line-height: 30px;text-align: center;}
.right{float: left;width: 100px;height: 400px;}
.right li{display: none;color: #f00;}
</style>
<!-- 左側li -->
<ul class="left">
<li>第1個標題</li>
<li>第2個標題</li>
<li>第3個標題</li>
<li>第4個標題</li>
</ul>
<!-- 右側li內容 -->
<ul class="right">
<li>1.左側HTML</li>
<li>2.左側HTML</li>
<li>3.左側HTML</li>
<li>4.左側HTML</li>
</ul>
//js代碼
<script type="text/javascript">
$(function(){
$(".right li").eq(ind).show();
$(".left li").click(function(){
var ind = $(".left li").index(this);
$(".right li").eq(ind).show().siblings().hide();
})
})
</script>

G. 求簡單的一段jquery代碼實現圖片循環切換

網路一下這個jquery.flexslider-min.js，不會用在問。希望能幫到你

H. jquery 圖片自動切換

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

$(function () { $(".mmy").click(function () { return false; }); var flipDelay = 5500; var flipCount = $("div.banner_footer a").size(); // 圖片總數 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="視覺為您解決網站建設中企業品牌形象問題" /></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;}

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

這樣可以么？

I. jQuery實例教程:jQuery網頁圖片切換效果

假設你有一組作品，你想不用轉跳到另外一個頁面就可以顯示多個圖片，你可以將JPG圖片載入到目標元素中去。下面是jQuery圖片切換效果示例：
該示例的核心jQuery代碼：
$(document).ready(function()
{
$("h2").append('<em></em>')
$(".thumbs
a").click(function()
{
var
largePath
=
$(this).attr("href");
var
largeAlt
=
$(this).attr("title");
$("#largeImg").attr({
src:
largePath,
alt:
largeAlt
});
$("h2
em").html("
("
+
largeAlt
+
")");
return
false;
});
});
首先給H2添加一個空的<em>元素。
當點擊<p>中的鏈接
將鏈接的href屬性保存到
“largePath”變數中。
然後將標題屬性保存到”largeAlt”變數中
將<img
id=”largeImg”>的scr屬性用變數
“largePath”替代，而alt屬性用變數”largeAlt”替代
將em(在h2中)的內容設置成變數largeAlt的值。

J. jquery怎麼實現點擊一個元素更換背景圖片，連續點擊永遠在2張圖片之間更換

實現的方法和操作步驟如下：

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

閱讀全文

與jquery簡單圖片切換代碼相關的資料

熱點內容
牽引車圖片大全大圖 瀏覽：915
張傑創造101圖片高清壁紙 瀏覽：889
好看的qq背景圖片帶文字 瀏覽：546
短發男生戴帽子發型圖片 瀏覽：861
男生戴手鏈圖片大全圖片 瀏覽：841
男生80年時代短發發型圖片 瀏覽：429
可愛小范閑圖片 瀏覽：588
濟寧衣服圖片 瀏覽：905
pr里圖片更改文字 瀏覽：233
喝飄的圖片加文字 瀏覽：384
怎麼給ppt加圖片 瀏覽：409
熱的圖片帶文字 瀏覽：690
word表格後插入圖片位置調整 瀏覽：515
姓娜女生專用頭像圖片 瀏覽：937
男生大耳釘圖片 瀏覽：812
小雞破殼表情可愛圖片 瀏覽：489
學字怎麼寫好看圖片 瀏覽：63
彩鉛人物素描簡單圖片 瀏覽：134
冰菓動漫圖片 瀏覽：434
馬勺創意圖片可愛卡通 瀏覽：420
  • anning
  • baiyin
  • baoding
  • baoshan
  • bozhou
  • changde
  • changshu
  • chaozhou
  • chenzhou
  • chizhou
  • dongying
  • enshi
  • feicheng
  • fuyang
  • fuzhou1
  • ganyu
  • ganzhou
  • gaoyou
  • gejiu
  • gongyi
  • guiyang
  • haicheng
  • haikou
  • hami
  • hebi
  • hetian
  • huadou
  • huaian
  • huludao
  • jiangdou
  • jiangmen
  • jiaozuo
  • jiashan
  • jingdezhen
  • jining
  • jintan
  • jinzhou
  • jiuquan
  • jixi
  • kashen
  • kuitun
  • kunming
  • laizhou
  • linhe
  • liupanshui
  • lvshun
  • meishan
  • mianyang
  • mudanjiang
  • nanning
  • panjin
  • penglai
  • pingliang
  • puyang
  • qidong
  • qingdao
  • qingyuan
  • qingzhou
  • sanming
  • foshan
  • shangluo
  • shangrao
  • shangyu
  • shenzhen
  • shijiazhuang
  • shishi
  • suining
  • taian
  • taizhou1
  • tangshan
  • tonglu
  • tongxiang
  • weihai
  • wenzhou
  • wuhan
  • wuhu
  • xian
  • xiangcheng
  • xiangfan
  • xianyang
  • suqian
  • xuchang
  • yaan
  • yanan
  • yancheng
  • yanji
  • yanzhou
  • yinchuan
  • yueyang
  • yulin
  • zaozhuang
  • zengcheng
  • zhangjiajie
  • changle
  • zhaotong
  • zhenjiang
  • zhongshan
  • zhucheng
  • xuanhua
  • songjiang