jquery图片切换源码

‘壹’ jquery实现图片循环切换

试试这个焦点图切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码

‘贰’ 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");
})
})

‘叁’ 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插件来实现动画效果，因为这样更简洁易用美观，在这里我推荐你使用jQuery overScroll插件，跟你的需求十分吻合，请参考：
http://www.17sucai.com/pins/demoshow/384

‘伍’ 制作网页怎样做图片切换效果最好详细代码！

1、首先输入代码：

<div class="wrapper">

<div id="focus">

<ul>

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li>

‘陆’ 求简单的一段jquery代码实现图片循环切换

网络一下这个jquery.flexslider-min.js，不会用在问。希望能帮到你

‘柒’ jquery图片切换代码如何插入到网页中

应该是分为几部分吧

你如果用Jquery插件的话，是有以下几部分内容的

1，插件.js
2，样式控制部分
3. 调用js部分

第一个内容可以放到 head中
第二个样式的放到页面的style 里，或者你自己的样式文件中
调用部分最好写在</body>这个前边

‘捌’ jquery怎么实现点击一个元素更换背景图片，连续点击永远在2张图片之间更换

实现的方法和操作步骤如下：

1、首先，打开html编辑器，创建一个新的html文件，例如index.html，然后引入jquery，如下图所示。

‘玖’ 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>