网页前端代码存档 - 【第三期】全屏banner图片切换特效详解

十一长假plus已经结束，上班的第一周，大家都是什么心情呢，是不是还没有从放假的状态转换过来呢，需要调整一段时间

记得放假的时候，不知不觉就过去4天，当时感叹，哇靠，一下子就过去一半了啊，只能安慰自己的，没事，还有一半呢

等剩下三天的时候安慰自己，没事，就当放个3天小长假，这才刚开始

等剩下两天的时候安慰自己，没事，就当是双休日，这才刚开始

等剩下一条的时候安慰自己，没事，双休才过去一半，还有一半呢

等最后一天晚上的时候.... 哈哈哈哈，我看还能拿啥安慰自己....... 恩，没事，熬过5天又放假，哇哈哈哈

全屏banner图片切换

页面引用js文件

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 }/*--小点鼠标放上颜色--*/

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

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

网页前端代码存档 - 【第三期】全屏banner图片切换特效详解相关推荐

小伙子用C++代码打造全屏幻灯片图片显示特效！成功拿到offer
今天我们想分享一个平面的c++电子杂志布局与"翻页"动画特效.导航时,内容被覆盖,然后显示下一页.根据页面之间的距离(在从菜单中选择页面时),我们将显示多个元素来覆盖内容,从而创建 ...
使用html仿支付宝首页,jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
本文实例讲述了jQuery实现仿Alipay支付宝首页全屏焦点图切换特效.分享给大家供大家参考.具体实现方法如下: /p> "http://www.w3.org/TR/xhtml1/D ...
banner特效php,jQuery自适应通栏宽屏banner幻灯片切换特效
jQuery自适应通栏宽屏banner幻灯片切换特效这是一款代码简洁的jQuery自适应通栏宽屏banner幻灯片切换特效,jQuery自适应全屏BANNER焦点图代码. js代码 $(" ...
宽屏自适应php源码,jQuery+H5自适应通栏宽屏banner幻灯片切换特效
jQuery+H5自适应通栏宽屏banner幻灯片切换特效代码片段: function(){ $(this).find(".prev,.next").fadeOut() }); ...
php网页全屏背景图代码,HTML5 body设置全屏背景图片的示例代码
用什么代码实现?不允许有白色底色产生,因为手机高度不一样设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面错误的写法:加到div中结合图片设置min-height, ...
html全屏banner轮播代码,基于jquery实现全屏banner自动轮播切换
特效描述:基于jquery实现全屏banner 自动轮播切换.基于jquery实现全屏banner自动轮播切换代码结构 1. 引入JS 2. HTML代码 *{margin:0;padding:0 ...
用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码
用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码 <template><el-carousel ...
Swiper全屏自适应图片轮播代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
左右全屏banner焦点图代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...

网页前端代码存档 - 【第三期】全屏banner图片切换特效详解

网页前端代码存档 - 【第三期】全屏banner图片切换特效详解相关推荐

最新文章

热门文章