jquery简单图片切换代码_jquery怎么实现点击一个元素更换背景图片连续点击永远在2张图片之间更换

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代码，点击图片中左侧或者右侧一个箭头图片，怎样实现图片切换

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简单图片切换代码

jquery简单图片切换代码

与jquery简单图片切换代码相关的资料