发布一款手动的幻灯效果很漂亮！

发布一款手动的幻灯效果！由于幻灯一般都是调用略缩图，但是有的站的略缩设置的和幻灯的大小差别很大导致变形很严重，所以今天就发布一款手动设置的幻灯而不是标签调用的，虽然调用起来不是很方便但是起到了美观的作用麻烦点又怕什么呢！你说对吗！哈哈！
效果如下：



演示站：人体艺术 （本站用帝国新闻模型制作！）


把下面的代码放到你的调用幻灯的位置：


<!– 幻灯开始 –>
<div id=”Carousel” style=”visibility:visible;”>
<!– ———————— 1 slide ———————— –>
<div class=”slide dark” id=”bck1_sdk” style=”visibility:visible;”>
<span class=”slide dark” style=”visibility:visible;”><span class=”slide dark” style=”visibility:visible;”><img src=”/image/flash/1.jpg” width=”350″ height=”260″ class=”bg” /></span></span>
</div>
<!– ———————— 2 slide ———————— –>
<div class=”slide dark” id=”bck2_sdk”>
<img src=”/image/flash/2.jpg” width=”350″ height=”260″ class=”bg” />
</div>
<!– ———————— 3 slide ———————— –>
<div class=”slide dark” id=”bck3_sdk”>
<img src=”/image/flash/3.jpg” width=”350″ height=”260″ class=”bg” />
</div>
<!– ———————— 4 slide ———————— –>
<div class=”slide dark” id=”bck4_sdk”>
<img src=”/image/flash/4.jpg” width=”350″ height=”260″ class=”bg” />
</div>
<div id=”CaroLinks”>
<!– 1 button –>
<div class=”bubble” id=”bck1″ onMouseOver=”clearIntervalFlash();changeSildesFrame(this,’_sdk’,'bck’);” onMouseOut=”restartIntervalFalsh();”>
<img class=”bbg” src=”/image/flash/topslot-btnbg.gif”><a href=”/rt_4/ys_147.html”><img src=”/image/flash/11.jpg” width=”43″ height=”43″ border=”0″ /></a></div>
<!– 2 button –>
<div class=”bubble” id=”bck2″ onMouseOver=”clearIntervalFlash();changeSildesFrame(this,’_sdk’,'bck’);” onMouseOut=”restartIntervalFalsh();”>
<img class=”bbg” src=”/image/flash/topslot-btnbg.gif”><a href=”/rt_2/ys_90.html”><img src=”/image/flash/22.jpg” width=”43″ height=”43″ border=”0″ /></a></div>
<!– 3 button –>
<div class=”bubble” id=”bck3″ onMouseOver=”clearIntervalFlash();changeSildesFrame(this,’_sdk’,'bck’);” onMouseOut=”restartIntervalFalsh();”>
<img class=”bbg” src=”/image/flash/topslot-btnbg.gif”><a href=”/rt_3/ys_108.html”> <img src=”/image/flash/33.jpg” width=”43″ height=”43″ border=”0″ /></a></div>
<!– 4 button –>
<div class=”bubble” id=”bck4″ onMouseOver=”clearIntervalFlash();changeSildesFrame(this,’_sdk’,'bck’);” onMouseOut=”restartIntervalFalsh();”>
<img class=”bbg” src=”/image/flash/topslot-btnbg.gif”><a href=”/rt_2/ys_97.html”><img src=”/image/flash/44.jpg” width=”43″ height=”43″border=”0″ /></a></div>
</div>
</div>
<script>
var sliclen=4;
var curSlides=((new Date()).getTime()%sliclen)+1;
var slidesTimeout = 2500;
var _thisFlashInterval=”";
//setInterval(”sett();”, slidesTimeout);
function checkAllSildes(sId,bckPrefix,_thisPrefix){
for(var ih=1;ih<=sliclen;ih++){
var item=document.getElementById(_thisPrefix+ih);
var bkItem=document.getElementById(_thisPrefix+ih+bckPrefix);
if(sId==item.id){
bkItem.style.visibility=”visible”;
}else{
bkItem.style.visibility=”hidden”;
}
}
}
function flashLoading(){
var sId=’bck’+curSlides;
checkAllSildes(sId,’_sdk’,'bck’);
curSlides=((curSlides)%4)+1;
}
function clearIntervalFlash(){
clearInterval(_thisFlashInterval);
}
function restartIntervalFalsh(){
_thisFlashInterval=setInterval(”flashLoading()”,slidesTimeout);
}
//loading rampage
checkAllSildes(’bck’+curSlides,’_sdk’,'bck’);
restartIntervalFalsh();
function changeSildesFrame(obj,bckPrefix,_thisPrefix){
var sId=obj.id;
var bkObj=document.getElementById(sId+bckPrefix);
checkAllSildes(sId,bckPrefix,_thisPrefix);
}
function SildesFrameClick(obj,bckPrefix){
var sId=obj.id;
var bkObj=document.getElementById(sId+bckPrefix);
var aObj=bkObj.getElementsByTagName(’a');
window.open(aObj[0].href,’newwindow’);
}
</script>
<!– 幻灯结束 –>


把下面的CSS代码放到CSS调用文件中


/* flash幻灯 */
#Carousel { width: 380px; height: 285px; visibility: hidden; margin-bottom: 0px; }
#Carousel .bg, #Carousel .slide, #Carousel .frame { position: absolute; width: 380px; height: 285px; }
#Carousel .slide .text { position: absolute; float: left; width: 280px; margin: 115px 0 0 10px; line-height: 16px; color: #fff; }
#Carousel .slide .text h1 { margin: 0 0 3px 0; padding: 0; line-height: 22px; font-family: arial,黑体; font-size: 17px; }
#Carousel .slide .text a { color: #fff; }
#Carousel .slide .text a:visited { color: #fff; }
#Carousel .slide .text a:hover { color: #ff0; }
#Carousel #music .text h1 a { color: #ff0; }
#Carousel #music .text h1 a:visited { color: #ff0; }
#Carousel #music .text { color: #e3e3e3; }
#Carousel #music .text a { color: #fff; }
#Carousel .dark { color: #fff; }
#Carousel .dark .text a { color: #ff0; }
#Carousel .dark .text a:visited { color: #ff0; }
#Carousel .slide .image { float: right; width: 200px; text-align: center; margin-top: 10px; }
#Carousel .slide .screen{ width: 200px; margin-top: 10px; }
#Carousel .slide .album { width: 180px; margin: 20px 0 0 0; }
#Carousel .slide .feature { margin-top: 30px; }
#Carousel #CaroLinks { width: 50px; position: absolute; margin: 10px 0 0 320px; line-height: 45px; visibility: visible; }
#CaroLinks .bubble .bbg { position: absolute; }
#CaroLinks .bubble { width: 50px; height: 45px; margin: 0 3px 3px 0; float: left; clear: left; }
#CaroLinks #on.bubble a { text-decoration: underline; }
#CaroLinks .bubble A IMG { float: left; margin-right: 4px; }
#CaroLinks .bubble a { position: absolute; width: 50px; display: block; margin: 1px 0 0 5px; font-family: verdana; font-size: 8.25pt;line-height: 13px; text-decoration: none; color: #06c; }
#CaroLinks .bubble A:hover { text-decoration: underline; }
.tPicks h2 { margin:0; padding: 3px 0 5px 0; font: bold 11px verdana,helvetica; }
#carouselblocker { width: 20px; height: 100px; }
/* flash幻灯 */


大小可以在CSS中调整，图片的切割是用PS事先切好的，把图片路径改成自己的图片路径，连接地址换成自己的地址这样一个漂亮的幻灯就完成了！