jQuery菜单式图片滑动切换特效代码

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

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

以下是 jQuery菜单式图片滑动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<link rel="stylesheet" href="style/style.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/floor.js"></script>
</head>

<body>
<center>
<div>
<div class="floor" id="floor1">
	<div class="floorCon">
		<div class="floorCon-slide">
			<ul class="floorConSlideImg">
				<li><a href><img src="image/floor1Con_slide_01.jpg" alt="" /></a></li>
				<li><a href><img src="image/floor1Con_slide_02.jpg" alt="" /></a></li>
				<li><a href><img src="image/floor1Con_slide_03.jpg" alt="" /></a></li>
			</ul>
			<ul class="floorConSlideImgNav">
				<li class="hover"><span class="fCs_nav01"><s></s></span><a href>
				个人洗护 立减100</a></li>
				<li><span class="fCs_nav02"><s></s></span><a href>魅力型男 一套搞定</a></li>
				<li><span class="fCs_nav03"><s></s></span><a href>镜彩一夏 品牌太阳镜</a></li>
			</ul>
		</div>
	</div>
</div>
</div>
</center>
</body>
</html>

JS代码(floor.js):

$(function(){
	// floorCon-slide$(".floorCon-slide .floorConSlideImgNav li span").css({
	opacity:0.95}
)$(".floorCon-slide .floorConSlideImgNav li.hover").find("span").css({
	left:0}
)//初始$(".floorCon-slide .floorConSlideImgNav li").mouseover(function(){
	if($(this).hasClass("hover")){
	return}
//不处理满足状态的 var imgleft=$(this).index()*200*(-1)+"px";
	$(this).addClass("hover").find("span").stop().animate({
	left:0}
,400) $(this).siblings().removeClass("hover").find("span").stop().animate({
	left:"-20px"}
,600) //图片显示 $(this).parent().prev(".floorConSlideImg").stop().animate({
	left:imgleft}
,400);
}
)}
)

CSS代码(style.css):

/*@charset "utf-8";*/
*{margin:0;padding:0}
body{font:12px/1.5 'Lucida Grande',tahoma,arial,宋体}
li{list-style:none;}
a{text-decoration:none}
a:hover{text-decoration:underline;}
img{border:none}
.floor .floorCon .floorCon-slide{width:200px;height:320px;background:yellow;margin-right:10px;position:relative;overflow:hidden;}
.floor .floorCon .floorCon-slide .floorConSlideImg{width:1000px;height:320px;position:absolute;left:0px;}
.floor .floorCon .floorCon-slide .floorConSlideImg li{width:200px;height:320px;float:left;}
.floor .floorCon .floorCon-slide .floorConSlideImgNav{width:200px;height:90px;position:absolute;left:0;top:200px;}
.floor .floorCon .floorCon-slide .floorConSlideImgNav li{width:200px;height:30px;position:relative;overflow:hidden;}
.floor .floorCon .floorCon-slide .floorConSlideImgNav li span{width:200px;height:30px;display:block;position:absolute;left:-20px}
.floor .floorCon .floorCon-slide .floorConSlideImgNav li span s{width:5px;height:9px;position:absolute;top:10px;right:15px;cursor:pointer;overflow:hidden;background:url(../image/sprite2.png) -107px -20px;opacity:0;filter:alpha(opaity=0);}
.floor .floorCon .floorCon-slide .floorConSlideImgNav li.hover span s{opacity:1;filter:alpha(opaity=100);}
.floor .floorCon .floorCon-slide .floorConSlideImgNav li a{font-weight:700;color:#ffffff;width:180px;padding-left:20px;height:30px;line-height:30px;text-align:left;display:block;position:absolute;left:0px;top:0}
.floor .floorCon .floorCon-slide .floorConSlideImgNav li a:hover{text-decoration:none}
#floor1 .floorConSlideImgNav li span.fCs_nav01{background:#826B99}
#floor1 .floorConSlideImgNav li span.fCs_nav02{background:#FF7F9F}
#floor1 .floorConSlideImgNav li span.fCs_nav03{background:#B38F7D}

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