需求：点击按钮，会显示相应的图片与文本，并且图片从右向左滑动而出，文本自相而上滑动。
用处：网页的banner处
代码：
<script>
$(document).ready(function() {
$(“.bannerbottomnav li”).click(function(){
$(this).addClass(“hover”);
$(this).siblings().removeClass(“hover”);//以上两行是给按钮添加效果的，比如点击按钮，该按钮加粗或变色，其他按钮恢复默认状态。具体特效就在hover里面定义就好
var navtype=$(this).attr(“data-type”);// data-type 是自定义属性，与相应的要切换的图片容器相对应。
$(“.bannerright ul li”).removeClass(“hover”);//这里的hover跟上面那个不一样，上一个hover是按钮的效果，这个是控制要切换的图片容器是否显示。加上hover，相应的div就显示，移除则隐藏
$(“.bannerright ul li”).each(function() {
if($(this).hasClass(navtype)){//逐个遍历要切换的图片容器的class，与 data-type 进行匹配，找到匹配的就执行以下代码
$(this).children(“.image”).css({ left: “250px” });//图片位置初始化
$(this).children(“.text”).css({ top: “100px” });文本位置初始化
$(this).addClass(“hover”);//显示对应的图片容器
$(this).children(“.image”).animate({ left: “-=250px” }, 200);//从右向左滑动
$(this).children(“.text”).animate({ top: “-=100px” }, 200);//从下往上滑动 这里的px数值大家可以随意改变，以查看不同的效果。200是时间，200毫秒的意思
return false;//找到匹配项，退出遍历，节省运行时间，虽然省的时间基本可以忽略，但要养成好的编程习惯。
}
});
navtype=null;//此处是为了防止内存溢出
});
});
</script>
<div class=”banner”>
<div class=”bannerright”>
<ul>
<li class=”erweima hover”>
<div class=”image”><img src=”image/erweima.png”></div>
<div class=”text”>
<p>web前端，JS，Jquery代码片段</p>
</div>
</li>
<li class=”cellphone”>
<div class=”image”><img src=”image/cellphone.png”></div>
<div class=”text”>
<p>web前端，JS，Jquery代码片段</p>
</div>
</li>
<li class=”xiyiji”>
<div class=”image”><img src=”image/xiyiji.png”></div>
<div class=”text”>
<p>web前端，JS，Jquery代码片段</p>
</div>
</li>
<li class=”allofus”>
<div class=”image”><img src=”image/allofus.png”></div>
<div class=”text”>
<p>web前端，JS，Jquery代码片段</p>
</div>
</li>
</ul>
</div>
<div class=”bannerbottom”>
<ul class=”bannerbottomnav”>
<li class=”hover” data-type=”erweima”></li>
<li data-type=”cellphone”></li>
<li data-type=”xiyiji”></li>
<li data-type=”allofus”></li>
</ul>
</div>
</div>
css代码就不贴了 整理起来麻烦~~~
主要是js代码。不难。
未经允许不得转载：前端撸码笔记 » jquery 点击按钮 相应图片滑动切换特效