jquery簡單的圖片切換

A. 怎麼用jquery實現圖片上一張下一張效果 註：圖片有自動切換功能

給你個思路哈
1,定義一個function
2,點擊的時候觸發這個function，獲取當前img名稱
3,因為你的img名稱都是有規律可循的，所以自己可拼接下一個的img名稱
4,將拼接完成的img名稱加上路徑，替換現在顯示的img路徑即可

B. 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的值。

C. jquery點擊圖標來回切換的幾種方法（如開關

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

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

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

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

F. 使用jquery更換圖片如何實現

一般是改css
$('#x').click(function(){
var img = $(this).css('background-image');
if(img =='xxx.png'){
img = 'yyy.png';
}else{
img='xxx.png';
}
$(this).css('background-image','url("'+img+'")')
})

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

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

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

I. jquery如何實現圖片自動切換

今天做一個網站，裡面要用到4張圖片自動切換的效果，本來是用flash實現的。ie8.0中flash的寬度是980px沒錯。但是奇怪的就是我頁面寬度也是980px。可是偏偏在ie8.0下QQ截圖一量無故多出了個40px，這樣的感覺就是flash兩邊變短了。更郁悶的是，在其他人的電腦和瀏覽器都沒問題。偏偏在我和客戶的電腦就出現這種問題。找不到方法解決的情況下，只用jquery去實現我想要的效果了。先貼出代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQUERY實現圖片自動切換</title>
<style>
body{margin:0px; padding:0px; font-family:Arial}
ul{list-style:none;margin:0px;padding:0px}
.click_out{margin-left:5px; float:left; text-align:center; height:16px; line-height:16px; width:16px; background:#333; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer;_display:inline-block; }
.click_over{margin-left:5px; float:left;text-align:center; height:16px; line-height:16px; width:16px; background:#820000; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer; _display:inline-block; }
</style>
<script language="javascript" src="../Script/jquery-1.4.4.min.js"></script>
</head>
<body>
<div style="height:230px; width:980px; background:#EBEBEB; position:relative" id="flash_outer">
<div style=" position:absolute; left:0px; top:0px; width:980px; height:230px; overflow:hidden" id="flash_pic">
<div style="width:980px; height:250px; background:url(flash_pic/1.jpg)"></div>
<div style="width:980px; height:250px; background:url(flash_pic/2.jpg)"></div>
<div style="width:980px; height:250px; background:url(flash_pic/3.jpg)"></div>
<div style="width:980px; height:250px; background:url(flash_pic/4.jpg)"></div>
</div>
<ul style="position:absolute; right:0px; bottom:0px; height:16px" id="flash_num">
<li class="click_over">1</li>
<li class="click_out">2</li>
<li class="click_out">3</li>
<li class="click_out">4</li>
</ul>
</div>
<script language="javascript">
$(document).ready(function()
{
var len=$("#flash_num>li").length;
var index=1;
var int;
function showSys(num) //圖片切換函數
{
$("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over");
$("#flash_pic>div").fadeOut().eq(num).fadeIn();
}
function ziDong() //自動切換
{
if(index==len)
{
index=0;
}
showSys(index);
index=index+1;
}
int=setInterval(ziDong,3000);
$("#flash_num>li").click(function(） //點擊切換
{
var index_num=$("#flash_num>li").index(this);
showSys(index_num);
index=index_num+1; //改變全局變數的值，以便滑鼠移開的時候能夠銜接上
//$(".click_out").removeClass("click_over").eq(index).addClass("click_over");
//$(".click_out").eq(index).removeClass().addClass("click_over");
//alert(index);
});
$("#flash_outer").mouseover(function() //移動到上面時停止自動切換
{
clearInterval(int);
});
$("#flash_outer").mouseout(function() //移開時繼續自動切換
{
int=setInterval(ziDong,3000);
});
});
</script>
</body>
</html>