基于Jquery实现焦点图淡出淡入效果

本文实例讲述了基于Jquery实现焦点图淡出淡入效果代码。分享给大家供大家参考。具体如下：

这个容器用了百分比宽度，图片始终保持居中处理，定宽或者自适应宽度都是可以的。

兼容到IE6以上浏览器，有淡出淡入速度和切换间隔两个参数可以改。

运行效果截图如下：

具体代码如下：

超文本标记语言代码如下：

！doctype html html lang=' zh-CN ' head meta charset=' utf-8 ' title淡出淡入焦点图/title link href=' CSS/style。CSS ' rel='样式表'/脚本src=' http : js/jquery-1。9 .1 .量滴js /脚本脚本src=' http : js/common。js /脚本/流浆池div class=' wrap ' div class=' banner con '！-容器有做自适应宽度处理，下面的图片会保持居中显示，建议使用最大尺寸的图片填充-ul class=' IMglist ' lia href=' # ' IMG src=' http : images/banner 01。jpg ' alt=' '//a/Li lia href=' # ' img src=' http : images/banner 02。jpg ' alt=' '//a/Li lia href=' # ' img src=' http : images/banner 03。jpg ' alt=' '//a/Li/ul ul class=' BTN list '样式如下：

@ charset“utf-8”；/* 简单reset */body，p，ul，ol，Li { margin : 0；padd : 0；}ul，ol { list-style : none；} img { border:none}a、按钮{ outline : none } . clear fix : after。在{可视性：隐藏后；显示器：块；font-size : 0；内容： " "；clear:两者；高度： 0;} /* 具体样式*/.横幅{ height: 400px}。班纳bannerCon { position:相对；宽度： 60%;高度： 100%;margin: 0自动飞越：隐藏；}.班纳肯imgList { width : 100%；高度： 100%;}.班纳肯imgList li { display:无绝对位置：top : 0；左： 0；宽度： 100%;高度： 100%;背景-颜色： # e2f 6fd/* 这个背景是为了展示宽度大于图片宽度时的区域，可以删除*/z-index : 1；}.班纳肯。阿利区块；高度： 100%;文本对齐：中心；}.imgList阿利img { position : absolutetop : 0；左侧： 50%;边距-左侧：-400像素；/* 这个数值填图片的实际宽度的一半*/}.班纳肯NEX前{显示器：无；绝对位置：前：名50%；宽度： 40px高度： 60px边距-top :-40px；字体：加粗40px/60px Simsun；color: # ccc文本对齐：中心；border : none background : rgba(0，0，0，30);过滤器： progid : maximagettransform .微软。渐变(startColorStr=# 4c 000000，endColorStr=# 4c 000000)；光标：指针；z-index : 3；}.班纳肯NEX之前。show { display : inline-block；}.班纳肯沪指{左： 13%；}.班纳肯。下一个{右： 13%；}.班纳肯btnList { position:绝对值；左： 0；bottom: 20px宽度： 100%;高度： 12px文本对齐：居中；z-index : 6；_overflow:隐藏；}.班纳肯btnList li { display: inline}。班纳肯列表Li span {显示： in-block；宽度： 12px高度： 12pxmargin : 0 5pxborder-半径： 6px背景色： # 14829 e；光标：指针；}.班纳肯列举李。cur span {底色： # f30}Js代码如下：

//加载在文本读取之后的射流研究…语句开始======================================================================函数fadeImg(obj，速度，间隔){ //父级容器，淡出淡入速度，切换间隔$('.'obj ).每个（函数(){ var $box=$(this)，$imgUl=$box.children ' .imgList ')，$imgLi=$imgUl.children('li ')，$btnUl=$box.children(' .btnList ')，$btnLi=$btnUl.children('li ')，$btnPreNex=$box.children(' .pre-nex ')，n=$imgLi.length，k=0，Player=setInterval(function(){ fade()}，interval)；$imgLi.eq(0).fadeIn(速度);//第一张先淡入函数fade(){ //淡出淡入事件k=1；if(k=n){ k=0；} $btnLi.removeClass('cur ').方程式(k)1 .添加CLaSS(' cur ')；$imgLi.fadeOut(速度)。方程式(k)1 .fadeIn(速度);};$btnLi.click(function(){ //小圆点点击事件var索引=$ btnli。索引(这个)；$(这个)。addClass('cur ').兄弟姐妹('里').移除CLaSS(' cur ')；$imgLi.fadeOut(速度)。eq(指数)。fadeIn(速度);k=指数；});$btnPreNex.click(function(){ //左右按钮点击事件if(！$ IMgli。是(' :动画'){ if($(this).有类(' next '){ k=1；if(k=n){ k=0；} } else { k=-1；if(k ^ 0){ k=n-1；} } $btnLi.removeClass('cur ').方程式(k)1 .添加CLaSS(' cur ')；$imgLi.fadeOut(速度)。方程式(k)1 .fadeIn(速度);} });$box.hover(//鼠标移入事件（不用触发器是为了兼容1.9 的JQ库)函数(){ clearInterval(播放器)；$ btnprenex。add CLaSS(' show ')；}，function(){ Player=setInterval(function(){ fade()}，interval)；$ btnprenex。移除类(' show ')；} );});} $(function () { //读取轮播事件fadeImg('bannerCon '，1000，3000)；});日本季刊日本季刊库用1.7 的都是没有问题的，希望对大家的学习有所帮助，感觉不错的同学就默默的点个赞吧。