jQuery自适应浏览器图片切换代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery自适应浏览器图片切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery自适应浏览器图片切换代码</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/banner.js"></script>
</head>
<body>
<!--全屏滚动-->
<div class="banner">
  <div class="b-img"><a href="#" style="background:url(images/banner0.jpg) center no-repeat;"></a><a href="#" style="background:url(images/banner1.jpg) center no-repeat;"></a><a href="#" style="background:url(images/banner2.jpg) center no-repeat;"></a></div>
  <div class="b-list"></div>
  <a class="bar-left" href="#"><em></em></a><a class="bar-right" href="#"><em></em></a> </div>
<!--end 全屏滚动-->
</body>
</html>

JS代码(banner.js):

//全屏滚动$(function(){
	var n=0;
	var imgLength=$(".b-img a").length;
	var ctWidth=imgLength*100;
	var itemWidth=1/imgLength*100;
	$(".b-img").width(ctWidth+"%");
	$(".b-img a").width(itemWidth+"%");
	$(".b-list").width(imgLength*30);
	if(imgLength>1){
	for(var i=0;
	i<imgLength;
	i++){
	var listSpan=$("<span></span>")$(".b-list").append(listSpan);
}
}
$(".b-list span:eq(0)").addClass("spcss").siblings("span").removeClass("spcss");
	$(".bar-right em").click(function(){
	if(n==imgLength-1){
	var ctPosit=(n+1)*100;
	$(".banner").append($(".b-img").clone());
	$(".b-img:last").css("left","100%");
	$(".b-img:first").animate({
	"left":"-"+ctPosit+"%"}
,1000);
	$(".b-img:last").animate({
	"left":"0"}
,1000);
	var setTime0=setTimeout(function (){
	$(".banner .b-img:first").remove();
}
,1000);
	n=0;
	$(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
}
else{
	n++;
	var ctPosit=n*100;
	$(".b-img").animate({
	"left":"-"+ctPosit+"%"}
,1000);
	$(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
}
}
)$(".bar-left em").click(function(){
	if(n==0){
	var stPosit=imgLength*100;
	var etPosit=(imgLength-1)*100;
	$(".banner").prepend($(".b-img").clone());
	$(".b-img:first").css("left","-"+stPosit+"%");
	$(".b-img:last").animate({
	"left":"100%"}
,1000);
	$(".b-img:first").animate({
	"left":"-"+etPosit+"%"}
,1000);
	var setTime0=setTimeout(function (){
	$(".banner .b-img:last").remove();
}
,1000);
	n=imgLength-1;
	$(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
}
else{
	n--;
	var ctPosit=n*100;
	$(".b-img").animate({
	"left":"-"+ctPosit+"%"}
,1000);
	$(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
}
}
)$(".b-list span").click(function(){
	var lsIndex=$(this).index();
	n=lsIndex;
	var ctPosit=n*100;
	$(".b-img").animate({
	"left":"-"+ctPosit+"%"}
,1000);
	$(this).addClass("spcss").siblings("span").removeClass("spcss");
}
)function rollEnvent(){
	if(n==imgLength-1){
	var ctPosit=(n+1)*100;
	$(".banner").append($(".b-img").clone());
	$(".b-img:last").css("left","100%");
	$(".b-img:first").animate({
	"left":"-"+ctPosit+"%"}
,1000);
	$(".b-img:last").animate({
	"left":"0"}
,1000);
	var setTime0=setTimeout(function (){
	$(".banner .b-img:first").remove();
}
,1000);
	n=0;
	$(".b-list span:eq(0)").addClass("spcss").siblings("span").removeClass("spcss");
}
else{
	n++;
	var ctPosit=n*100;
	$(".b-img").animate({
	"left":"-"+ctPosit+"%"}
,1000);
	$(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
}
}
var slidesetInterval=setInterval(rollEnvent,4000);
	$(".banner").hover(function(){
	clearInterval(slidesetInterval);
}
,function(){
	slidesetInterval=setInterval(rollEnvent,4000);
}
);
	$(".bar-left").mouseover(function(){
	$(this).css("background","url(images/arr-bg.png)");
	$(this).find("em").addClass("emcss");
}
).mouseleave(function(){
	$(this).css("background","none");
	$(this).find("em").removeClass("emcss");
}
)$(".bar-right").mouseover(function(){
	$(this).css("background","url(images/arr-bg.png)");
	$(this).find("em").addClass("emcss");
}
).mouseleave(function(){
	$(this).css("background","none");
	$(this).find("em").removeClass("emcss");
}
)}
)

CSS代码(styles.css):

/* CSS Document */
*{padding:0;margin:0;}
body{background:#CCC;font-size:0}
.banner{width:100%;height:750px;overflow:hidden;position:relative;font-size:0}
.b-img{height:500px;position:absolute;left:0;top:0;}
.b-img a{display:block;height:750px;float:left;}
.b-list{height:50px;padding-top:700px;position:relative;margin:0 auto;z-index:1;}
.b-list span{display:block;cursor:pointer;width:14px;height:14px;border-radius:50%;border:3px solid #fff;float:left;margin:0 5px;_margin:0 3px;}
.b-list .spcss{border:3px solid #14ab04;}
.bar-left{position:absolute;z-index:1;display:block;width:100px;height:100%;left:0px;background:none;top:0px;}
.bar-right{position:absolute;z-index:1;display:block;width:100px;height:100%;right:0px;background:none;top:0px;}
.bar-left em{display:block;width:50px;height:100px;background:url(../images/arrow.png) 0px 0px no-repeat;margin:0 auto;margin-top:325px;}
.bar-right em{display:block;width:50px;height:100px;background:url(../images/arrow.png) -50px 0px no-repeat;margin:0 auto;margin-top:325px;}
.bar-left .emcss{background-position:0px -100px;}
.bar-right .emcss{background-position:-50px -100px;}

附件:下载该文件资源,减少时间成本(增值服务)