【第三期】全屏banner圖片切換特效詳解
十一長假plus已經結束 ，上班的第一週，大家都是什麼心情呢，是不是還沒有從放假的狀態轉換過來呢，需要調整一段時間
記得放假的時候，不知不覺就過去4天，當時感嘆，哇靠，一下子就過去一半了啊，只能安慰自己的，沒事，還有一半呢
等剩下三天的時候安慰自己，沒事，就當放個3天小長假，這才剛開始
等剩下兩天的時候安慰自己，沒事，就當是雙休日，這才剛開始
等剩下一條的時候安慰自己，沒事，雙休才過去一半，還有一半呢
等最後一天晚上的時候.... 哈哈哈哈，我看還能拿啥安慰自己....... 恩，沒事，熬過5天又放假，哇哈哈哈
全屏banner圖片切換
頁面引用js檔案
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.jslides.js"></script>
jquery.jslides.js的程式碼如下
$(function(){
var numpic = $('#slides li').size()-1;
var nownow = 0;
var inout = 0;
var TT = 0;
var SPEED = 5000;
$('#slides li').eq(0).siblings('li').css({'display':'none'});
var ulstart = '<ul id="pagination">',
ulcontent = '',
ulend = '</ul>';
ADDLI();
var pagination = $('#pagination li');
var paginationwidth = $('#pagination').width();
$('#pagination').css('margin-left',(470-paginationwidth))
pagination.eq(0).addClass('current')
function ADDLI(){
//var lilicount = numpic + 1;
for(var i = 0; i <= numpic; i++){
ulcontent += '<li>' + '<a href="#">' + (i+1) + '</a>' + '</li>';
}
$('#slides').after(ulstart + ulcontent + ulend);
}
pagination.on('click',DOTCHANGE)
function DOTCHANGE(){
var changenow = $(this).index();
$('#slides li').eq(nownow).css('z-index','900');
$('#slides li').eq(changenow).css({'z-index':'800'}).show();
pagination.eq(changenow).addClass('current').siblings('li').removeClass('current');
$('#slides li').eq(nownow).fadeOut(400,function(){$('#slides li').eq(changenow).fadeIn(500);});
nownow = changenow;
}
pagination.mouseenter(function(){
inout = 1;
})
pagination.mouseleave(function(){
inout = 0;
})
function GOGO(){
var NN = nownow+1;
if( inout == 1 ){
} else {
if(nownow < numpic){
$('#slides li').eq(nownow).css('z-index','900');
$('#slides li').eq(NN).css({'z-index':'800'}).show();
pagination.eq(NN).addClass('current').siblings('li').removeClass('current');
$('#slides li').eq(nownow).fadeOut(400,function(){$('#slides li').eq(NN).fadeIn(500);});
nownow += 1;
}else{
NN = 0;
$('#slides li').eq(nownow).css('z-index','900');
$('#slides li').eq(NN).stop(true,true).css({'z-index':'800'}).show();
$('#slides li').eq(nownow).fadeOut(400,function(){$('#slides li').eq(0).fadeIn(500);});
pagination.eq(NN).addClass('current').siblings('li').removeClass('current');
nownow=0;
}
}
TT = setTimeout(GOGO, SPEED);
}
TT = setTimeout(GOGO, SPEED);
})
頁面程式碼如下
<!-- 程式碼 開始 （幾個都行，之所以作為背景呼叫是因為無論多大的圖都可以利用背景居中的屬性來居中，之所以放到頁面來寫是因為可以加程式後臺換，放樣式表裡不行）-->
<div id="full-screen-slider">
<ul id="slides">
<li style="background:url('images/banner1.jpg') no-repeat center top"><a href="#" target="_blank">羞羞的鐵拳來
<li style="background:url('images/banner2.jpg') no-repeat center top"><a href="#" target="_blank">白夜追凶在長春取景拍攝長春電子商務</a></li>
<li style="background:url('images/banner3.jpg') no-repeat center top"><a href="#" target="_blank">使徒行者2其實沒啥太大意思長春</a></li>
<li style="background:url('images/banner4.jpg') no-repeat center top"><a href="#" target="_blank">長春啊我的故鄉長春微信營銷哈</a></li>
</ul>
</div>
<!-- 程式碼 結束 -->
<div style="clear:both"></div>
樣式表
/*----------首頁切換廣告開始----------*/
#full-screen-slider { width:100%; height:430px; float:left; position:relative ;}/*-------根據自己圖片高度修改高度，別的不用動------*/
#slides { display:block; width:100%; height:430px; list-style:none; padding:0; margin:0; position:relative}/*-------根據自己圖片高度修改高度，別的不用動------*/
#slides li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0; position:absolute}
#slides li a { display:block; width:100%; height:100%; text-indent:-9999px}
#pagination { display:block; list-style:none; position:absolute; right:40%; top:400px; z-index:9900; width:200px; }/*--這是四個小點，top是小點距離上面的高度--*/
#pagination li { display:block; list-style:none; width:12px; height:12px; float:left; margin-left:15px; border-radius:5px; background:#FFF }/*--寬度高度是小點的大小，自行更改，border-radius是圓角，刪掉就變成正方形了，寬度高度改成不一樣的就變成相應的長方形--*/
#pagination li a { display:block; width:100%; height:100%; padding:0; margin:0; text-indent:-9999px;}
#pagination li.current { background:#00b22d }/*--小點滑鼠放上顏色--*/
/*----------首頁切換廣告結束----------*/
眼睛一閉一天過去了哈， 哎，累挺！！！！！！！！！！！！