漂亮的图片切换
前几天看到一个朋友分享的仿京东的图片切换样式，觉得很好，不过仔细研究后发现代码比较繁琐，经过改良之后觉得用起来会比较方便，看着也简洁了许多。
<!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=utf-8" /> <title>jQuery仿京东通过商品标题切换背景图片特效 - JS代码网</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><br> <div class="fr"> <ul class="frImg"> <li><img src="image/1.jpg" /></li> <li><img src="image/2.jpg" /></li> <li><img src="image/3.jpg" /></li> <li><img src="image/4.jpg" /></li> <li><img src="image/5.jpg" /></li> </ul> <ul class="frText"> <li class="hover"><span class="fCs1"> 美丽伊人 <s></s></span></li> <li><span class="fCs2">天使翅膀<s></s></span></li> <li><span class="fCs3">完美心情<s></s></span></li> <li><span class="fCs4">迷人芬芳<s></s></span></li> <li><span class="fCs5">靓丽如花<s></s></span></li> </ul> </div> </div> </center> <div style="text-align:center;clear:both"><br> </div> </body> </html>
这里，只需要一个div,套两个ul就可以了，然后设置两个ul的position: absolute，外层的div为position: relative;这样两个ul就都定位在这个叫.fr的div上了。
/*@charset "utf-8";*/ *{margin:0;padding: 0} body{font-famliy:"微软雅黑";} li{list-style: none;} .fr{width: 350px;height: 425px;margin-right: 10px;position: relative;overflow: hidden;} //这里设置的是外层div的高宽，同时这也是一长图片的高宽，超过的就隐藏 .frImg{width:1750px;height:425px;position: absolute;left: 0px;} //这里是第一个ul的样式，需要说明的是，width需要设置成图片的宽度*张数，如果设置小了，后面的图片就没法显示了 .frImg li{float:left;} //图片层只要设置一下左浮动就可以了 .frText{width:350px;position: absolute ;left:0;top:275px;} //这是第二个ul的样式，主要就是要和图片的底部对齐，用top就可以了 .frText li{height: 30px;position: relative;overflow: hidden; opacity: 0.4;}//上边设置了每个li是30px,此处设置了opacity是因为想要不影响底层图片的美观 .frText li.hover{opacity:1;} //当然，如果选中的话就设置其为不透明的 .frText li span{width: 350px;height: 30px;display: block;position: absolute;left:-30px; color:#FFFFFF;line-height:27px;font-size:16px; font-weight:800}//此处就是切换条的高宽和文字样式了 .frText li span s{width: 5px;height: 9px;position: absolute;top:10px;right: 15px;cursor: pointer;overflow: hidden;background: url(../image/heels.png) -107px -20px;opacity: 0;} .frText li.hover span s{opacity: 1;} //这是右侧那个小尖括号的样式，hover的时候显示，否则就不显示 .fCs1{background:#87B6A7;} .fCs2{background:#FFA042;} .fCs3{background:#C093CC;} .fCs4{background:#9EA7D6;} .fCs5{background:#93AE60;}
接下来调用js
$(function(){ $(".frText li.hover").find("span").css({left:0});//这段脚本的意思是当鼠标悬浮在哪个切换条的时候，那个切换条就left:0 ,本来的样式是-30 $(".frText li").mouseover(function(){ if($(this).hasClass("hover")){return};//此处是说当鼠标悬浮在进度条的那个类上的时候，首先查找这个类hover类，如果是就返回，如果不是执行以下代码 var toleft=$(this).index()*350*(-1)+"px"; //声明一个变量toleft，将当前li的指数乘以350再乘以-1，得出的数赋值给这个变量 $(this).addClass("hover").find("span").stop().animate({left:0,opacity: 1},500);//此处的意思是找到当前li之后添加hover类，并且添加后面的动画，使切换条向右滚动 $(this).siblings().removeClass("hover").find("span").stop().animate({left:"-30px",opacity: 0.5},600);//此时还需要把之前的hover类去掉，并且还原样式 //图片显示 $(this).parent().prev(".frImg").stop().animate({left:toleft},400); //最后需要找到这个li的父级的前一层中为.frImg的类，让它的图片向左移动toleft }) })
效果图如下：
