网页前端代码存档 - 【第三期】全屏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">羞羞的铁拳来长春网站建设</a></li>
            <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 }/*--小点鼠标放上颜色--*/




/*----------首页切换广告结束----------*/

眼睛一闭一天过去了哈， 哎，累挺！！！！！！！！！！！！