漂亮的图片切换
前幾天看到一個朋友分享的仿京東的圖片切換樣式，覺得很好，不過仔細研究后發現代碼比較繁瑣，經過改良之后覺得用起來會比較方便，看著也簡潔了許多。
<!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})})效果圖如下：
?
轉載于:https://www.cnblogs.com/zmseo/p/4136865.html
總結
- 上一篇： PHP中如何给日期加上一个月 加一周 加
- 下一篇： 大学毕业出路利弊浅谈