首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现首页图片淡入淡出效果的方法

Posted in Javascript onJune 10, 2015

本文实例讲述了jQuery实现首页图片淡入淡出效果的方法。分享给大家供大家参考。具体分析如下：

这里演示当当网的品牌店铺首页效果，演示地址为：http://static.dangdang.com/gm/topic/2270_181320.shtml

效果图如下所示：

jQuery实现首页图片淡入淡出效果的方法

需求：

1. 绿色区域要求在图片上方，半透明显示

2. 当鼠标移动到红色区域，切换相应的图片

3. 首页的三张大图轮转

HTML：

<div id="carousel"> 
 <div id="carouselimg" class="content_top"> 
  <div id="imgcontainer" class="slide_panel"> 
   <a target="_blank" href="http://www.baidu.com" mce_href="http://www.baidu.com"><img src="images/brandshop/band_lx_717x280.gif" mce_src="images/brandshop/band_lx_717x280.gif"/></a> 
   <a target="_blank" href="http://www.google.com" mce_href="http://www.google.com"><img src="images/brandshop/band_agz_717x280.gif" mce_src="images/brandshop/band_agz_717x280.gif"/></a> 
   <a target="_blank" href="http://www.dangdang.com" mce_href="http://www.dangdang.com"><img src="images/brandshop/band_qb_717x280.gif" mce_src="images/brandshop/band_qb_717x280.gif"/></a> 
  </div> 
</div>
<div id="carouseltitle"> 
  <ul> 
   <li> 
    <a href="#" mce_href="#">联想 <span>lenovo</span></a> 
   </li> 
   <li> 
    <a href="#" mce_href="#">爱国者 <span>aigo</span></a> 
   </li> 
   <li> 
    <a href="#" mce_href="#">倩碧 <span>CLINIQUE</span></a>
   </li> 
  </ul> 
</div>

CSS：

<mce:style type="text/css"><!-- 
 *{ 
  padding:0; 
  margin:0; 
 } 
 #carousel{ 
  border-color:#DFDFDF;border-style:solid;border-width:0 1px 1px;
  position:relative;/*DO NOT delete this line*/ 
 } 
 #carousel ul{ 
  list-style:none; 
 } 
 #carousel #carouselimg{ 
  position:relative;/*fix ie7 overflow bug*/ 
  overflow:hidden; 
 } 
 #carousel #carouselimg #imgcontainer{ 
  position:absolute; 
  left:0px; 
  top:0px; 
 } 
 #carousel #carouselimg img{ 
  float:left;/*fix ie6 auto-margin bug*/ 
  border:0; 
  /*display:none;*/ 
 } 
 #carousel #carouseltitle{ 
  position:absolute; 
  bottom:0px; 
 } 
 #carousel #carouseltitle ul{ 
 } 
 #carousel #carouseltitle li{ 
  width:239px; 
  height:30px; 
  line-height:30px; 
  font-size:14px; 
  text-align:center; 
  background:#000; 
  color:#FFF; 
  float:left; 
  cursor:pointer; 
  opacity:.6; 
  filter:alpha(opacity=60); 
 } 
 #carousel #carouseltitle .active{ 
  background:#cfaf73; 
  color:#FFF; 
  opacity:.9; 
  filter:alpha(opacity=90); 
 } 
 #carousel #carouseltitle .active a{ 
  color:#000; 
 } 
 #carousel #carouseltitle li a{ 
   text-decoration:none; 
   color:#fff; 
 } 
 #carousel #carouseltitle li a span{ 
  font-family:Arial; 
 } 
--></mce:style><style type="text/css" mce_bogus="1"> *{ 
  padding:0; 
  margin:0; 
 } 
 #carousel{ 
  border-color:#DFDFDF;border-style:solid;border-width:0 1px 1px;
  position:relative;/*DO NOT delete this line*/ 
 } 
 #carousel ul{ 
  list-style:none; 
 } 
 #carousel #carouselimg{ 
  position:relative;/*fix ie7 overflow bug*/ 
  overflow:hidden; 
 } 
 #carousel #carouselimg #imgcontainer{ 
  position:absolute; 
  left:0px; 
  top:0px; 
 } 
 #carousel #carouselimg img{ 
  float:left;/*fix ie6 auto-margin bug*/ 
  border:0; 
  /*display:none;*/ 
 } 
 #carousel #carouseltitle{ 
  position:absolute; 
  bottom:0px; 
 } 
 #carousel #carouseltitle ul{ 
 } 
 #carousel #carouseltitle li{ 
  width:239px; 
  height:30px; 
  line-height:30px; 
  font-size:14px; 
  text-align:center; 
  background:#000; 
  color:#FFF; 
  float:left; 
  cursor:pointer; 
  opacity:.6; 
  filter:alpha(opacity=60); 
 } 
 #carousel #carouseltitle .active{ 
  background:#cfaf73; 
  color:#FFF; 
  opacity:.9; 
  filter:alpha(opacity=90); 
 } 
 #carousel #carouseltitle .active a{ 
  color:#000; 
 } 
 #carousel #carouseltitle li a{ 
   text-decoration:none; 
   color:#fff; 
 } 
 #carousel #carouseltitle li a span{ 
  font-family:Arial; 
 } 
</style>

引入River Zhang 的fr.carousel.js

FR={ 
 Version:'1.0.0', 
 Author:'River Zhang(zhang_hechuan@hotmail.com)', 
 Lisence:'MIT Lisence' 
}; 
FR.Util={ 
 //Replace document.getElementById. 
 $:function(id){ 
 return document.getElementById(id); 
 }, 
 //Replace getElementsByTagName. 
 $$:function(node, tag){ 
 return node.getElementsByTagName(tag); 
 }, 
 creat:function(node,name){ 
 var element=document.createElement(name); 
 node.appendChild(element); 
 return element; 
 }, 
 //Event Binding functions. 
 addEvent:function(eventType,eventFunc,eventObj){ 
 eventObj = eventObj || document; 
 if(window.attachEvent)eventObj.attachEvent("on"+eventType,eventFunc); 
 if(window.addEventListener) eventObj.addEventListener(eventType,eventFunc,false); 
 }, 
 setOpacity:function(obj, value) { 
 if (document.all) obj.style.filter = "alpha(opacity=" + value + ")"; 
 else obj.style.opacity = value / 100; 
 }, 
 setPosition:function(obj, x, y){ 
 var curx=parseInt(obj.style.left); 
 var cury=parseInt(obj.style.top); 
 if(isNaN(curx)) curx=cury=0; 
 var newx=curx+x; 
 var newy=cury+y; 
 obj.style.left=newx+'px'; 
 obj.style.top=newy+'px'; 
 } 
}; 
FR.Carousel={ 
 version:'1.1', 
 mode:1, 
 steps:20, 
 period:25, 
 width:300, 
 height:200, 
 bgColor:'#000000', 
 autoSwitch:true, 
 delay:5000, 
 _semaphore:0,/* DO NOT try to modify this value */ 
 start:function(args){ 
 if(typeof(args)!='undefined'){ 
  FR.Carousel.mode=args.mode||FR.Carousel.mode; 
  FR.Carousel.steps=args.steps||FR.Carousel.steps; 
  FR.Carousel.period=args.period||FR.Carousel.period; 
  FR.Carousel.width=args.width||FR.Carousel.width; 
  FR.Carousel.height=args.height||FR.Carousel.height; 
  FR.Carousel.bgColor=args.bgColor||FR.Carousel.bgColor; 
  FR.Carousel.autoSwitch=args.autoSwitch||FR.Carousel.autoSwitch; 
  FR.Carousel.delay=args.delay||FR.Carousel.delay; 
 } 
 FR.Util.addEvent("load",FR.Carousel.run,window); 
 }, 
 run:function(){ 
 FR.Carousel.initialCSS(); 
 FR.Carousel.counter='frimg0'; 
 var carouselimg=FR.Util.$('carouselimg'); 
 var img=FR.Util.$$(carouselimg, 'img'); 
 for(var i=0;i!=img.length;++i){ 
  img[i].id='frimg'+i; 
  if(FR.Carousel.mode==4 || FR.Carousel.mode==5) continue; 
  img[i].style.position="absolute"; 
  img[i].style.left="0 px"; 
  img[i].style.top="0 px"; 
  FR.Util.setOpacity(img[i], 0); 
 } 
 if(FR.Carousel.mode!=4) FR.Util.setOpacity(img[0], 100); 
 if(FR.Carousel.mode==1) bindFunction=function(name){FR.Carousel.fade(FR.Util.$(name), FR.Carousel.steps, FR.Carousel.period);}; 
 else if(FR.Carousel.mode==2) bindFunction=function(name){FR.Carousel.flash(FR.Util.$(name), FR.Carousel.steps, FR.Carousel.period);}; 
 else if(FR.Carousel.mode==3) bindFunction=function(name){FR.Carousel.fadeIntoColor(FR.Util.$(name), FR.Carousel.steps, FR.Carousel.period);}; 
 else if(FR.Carousel.mode==4) bindFunction=function(name){FR.Carousel.scroll(name, FR.Carousel.steps, FR.Carousel.period);}; 
 else if(FR.Carousel.mode==5) bindFunction=function(name){FR.Carousel.crawl(name, FR.Carousel.steps, FR.Carousel.period);}; 
 var carouseltitle=FR.Util.$('carouseltitle'); 
 var li=FR.Util.$$(carouseltitle, 'li'); 
 li[0].className='#carousel #carouseltitle active'; 
 FR.Carousel.autoCarousel(img.length); 
 for(var i=0;i!=li.length;++i){ 
  (function(){ 
  var name='frimg'+i; 
  li[i].onmouseover=function(){ 
   clearInterval(FR.Carousel.s); 
   if(!FR.Carousel._semaphore){ 
   li[FR.Carousel.counter.split('')[FR.Carousel.counter.length-1]].className=''; 
   this.className='#carousel #carouseltitle active'; 
   bindFunction(name); 
   } 
  }; 
  li[i].onmouseout=function(){ 
   FR.Carousel.autoCarousel(img.length); 
  } 
  })(); 
 } 
 }, 
 autoCarousel:function(length){ 
 if(FR.Carousel.autoSwitch){ 
  FR.Carousel.s=setInterval(function(){ 
  var carouseltitle=FR.Util.$('carouseltitle'); 
  var li=FR.Util.$$(carouseltitle, 'li'); 
  li[FR.Carousel.counter.split('')[FR.Carousel.counter.length-1]].className=''; 
  var next=(parseInt(FR.Carousel.counter.split('')[FR.Carousel.counter.length-1])+1)%length; 
  li[next].className='#carousel #carouseltitle active'; 
  name='frimg'+next; 
  bindFunction(name); 
  },FR.Carousel.delay); 
 } 
 }, 
 initialCSS:function(){ 
 var carouselimg=FR.Util.$('carouselimg'); 
 var carousel=FR.Util.$('carousel'); 
 carouselimg.style.width=FR.Carousel.width+"px"; 
 carouselimg.style.height=FR.Carousel.height+"px"; 
 carousel.style.width=FR.Carousel.width+"px"; 
 carousel.style.height=FR.Carousel.height+"px"; 
 if(FR.Carousel.mode==5){ 
  var imgcontainer=FR.Util.$('imgcontainer'); 
  var img=FR.Util.$$(carouselimg, 'img'); 
  var size=img.length*FR.Carousel.width; 
  imgcontainer.style.width=size+"px"; 
 } 
 }, 
 fade:function(obj, steps, speed) { 
 FR.Carousel._semaphore=1; 
 var value1=0; 
 var value2=100; 
 if(obj.id!=FR.Carousel.counter){ 
  var carouselimg=FR.Util.$('carouselimg'); 
  var img=FR.Util.$$(carouselimg, 'img'); 
  for(var i=0;i!=img.length;++i){ 
  if(i!=FR.Carousel.counter.split('')[FR.Carousel.counter.length-1]) 
  FR.Util.setOpacity(img[i], 0); 
  } 
  temp=FR.Carousel.counter; 
  FR.Carousel.counter=obj.id; 
  tempobj=FR.Util.$(temp); 
  var increment=100/steps; 
  FR.Carousel.i=setInterval(function(){ 
  if(value1<=100){ 
   FR.Util.setOpacity(obj,value1); 
   FR.Util.setOpacity(tempobj,value2); 
   value1+=increment; 
   value2-=increment; 
  } else { 
   clearInterval(FR.Carousel.i); 
   FR.Carousel._semaphore=0; 
  } 
  },speed); 
 }else { 
  FR.Carousel._semaphore=0; 
  return; 
 } 
 }, 
 flash:function(obj, steps, speed) { 
 FR.Carousel._semaphore=1; 
 var value1=0; 
 if(obj.id!=FR.Carousel.counter){ 
  var carouselimg=FR.Util.$('carouselimg'); 
  var img=FR.Util.$$(carouselimg, 'img'); 
  for(var i=0;i!=img.length;++i){ 
  FR.Util.setOpacity(img[i], 0); 
  } 
  FR.Carousel.counter=obj.id; 
  var increment=100/steps; 
  FR.Carousel.i=setInterval(function(){ 
  if(value1<=100){ 
   FR.Util.setOpacity(obj,value1); 
   value1+=increment; 
  } else { 
   clearInterval(FR.Carousel.i); 
   FR.Carousel._semaphore=0; 
  } 
  },speed); 
 }else { 
  FR.Carousel._semaphore=0; 
  return; 
 } 
 }, 
 fadeIntoColor:function(obj, steps, speed){ 
 FR.Carousel._semaphore=1; 
 var value1=100; 
 var value2=0; 
 if(obj.id!=FR.Carousel.counter){ 
  var carouselimg=FR.Util.$('carouselimg'); 
  carouselimg.style.backgroundColor=FR.Carousel.bgColor; 
  var img=FR.Util.$$(carouselimg, 'img'); 
  for(var i=0;i!=img.length;++i){ 
  if(i!=FR.Carousel.counter.split('')[FR.Carousel.counter.length-1]) 
  FR.Util.setOpacity(img[i], 0); 
  } 
  temp=FR.Carousel.counter; 
  FR.Carousel.counter=obj.id; 
  tempobj=FR.Util.$(temp); 
  var increment=100/steps; 
  FR.Carousel.i=setInterval(function(){ 
  if(value1>=0){ 
   FR.Util.setOpacity(tempobj,value1); 
   value1-=increment; 
  } 
  else if(value1<0 && value2<=100){ 
   FR.Util.setOpacity(obj,value2); 
   value2+=increment; 
  } else { 
   clearInterval(FR.Carousel.i); 
   FR.Carousel._semaphore=0; 
  } 
  },speed); 
 } else { 
  FR.Carousel._semaphore=0; 
  return; 
 } 
 }, 
 scroll:function(curno, steps, speed){ 
 FR.Carousel._semaphore=1; 
 var ic=FR.Util.$('imgcontainer'); 
 var count=(curno.split('')[curno.length-1]-FR.Carousel.counter.split('')[FR.Carousel.counter.length-1])*FR.Carousel.height; 
 FR.Carousel.counter=curno; 
 var value1=0; 
 var increment=count/steps; 
 FR.Carousel.i=setInterval(function(){ 
  if(Math.abs(value1)<Math.abs(count)){ 
  if(count>0){ 
   FR.Util.setPosition(ic,0,-increment); 
   value1-=increment; 
  } 
  else{ 
   FR.Util.setPosition(ic,0,-increment); 
   value1+=increment; 
  } 
  } else { 
  clearInterval(FR.Carousel.i); 
  FR.Carousel._semaphore=0; 
  } 
 },speed); 
 }, 
 crawl:function(curno, steps, speed){ 
 FR.Carousel._semaphore=1; 
 var ic=FR.Util.$('imgcontainer'); 
 var count=(curno.split('')[curno.length-1]-FR.Carousel.counter.split('')[FR.Carousel.counter.length-1])*FR.Carousel.width; 
 FR.Carousel.counter=curno; 
 var value1=0; 
 var increment=count/steps; 
 FR.Carousel.i=setInterval(function(){ 
  if(Math.abs(value1)<Math.abs(count)){ 
  if(count>0){ 
   FR.Util.setPosition(ic,-increment,0); 
   value1-=increment; 
  } 
  else{ 
   FR.Util.setPosition(ic,-increment,0); 
   value1+=increment; 
  } 
  } else { 
  clearInterval(FR.Carousel.i); 
  FR.Carousel._semaphore=0; 
  } 
 },speed); 
 } 
};

可以实现图片的轮转效果，但是点击图片后，每次链接跳转都是最后一张图的a href

查看fr.carousel.js ，原来，它实现的思路是将三张图一张叠在一张上边，使用setInterval() ,将一张图的opacity 值置为1，其余两张为0。但是，这将导致你点击图片后，每次的链接都是最上边的那张图(即最后倩碧那一张)。

解决方法：

设置轮转图的 z-index，当图片显示的时候，其父节点<a> 的z-index 比其它元素高。

jQuery实现：

// 判断img轮转，实现a跳转 
setInterval(function(){ 
 $("#imgcontainer a").each(function(i){ 
  var img = $(this).children("img"); 
  var op = img.css("opacity"); 
  if(op>0){ 
   img.css("z-index","100"); 
   $(this).css("z-index","100"); 
  }else{ 
   img.css("z-index","0"); 
   $(this).css("z-index","0"); 
  } 
 }) 
},100);

希望本文所述对大家的jQuery程序设计有所帮助。

jQuery实现首页图片淡入淡出效果的方法

- Author -

spring21st

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 #Javascript
javascript中一些util方法汇总
Jun 10 #Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 #Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 #Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 #Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 #Javascript
jquery获取当前元素索引值用法实例
Jun 10 #Javascript
委托书(259) 主持词(345) 意向书(73) 担保书(46) 聘任书(31) 承诺书(369) 责任书(145) 建议书(203) 竞聘书(31) 广告词(105)
You might like
一个比较不错的PHP日历类分享
2014/11/18 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
IE8 原生JSON支持
2009/04/13 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
js确定对象类型方法
2012/03/30 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
详解vue更改头像功能实现
2019/04/28 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python学习小技巧总结
2018/06/10 Python
举例讲解Python常用模块
2019/03/08 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
中专生求职自荐信范文
2013/12/22 职场文书
哈理工毕业生的求职信
2013/12/22 职场文书
关于教师节的广播稿
2014/09/10 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
文艺节目主持词
2015/07/06 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
vue递归实现树形组件
2022/07/15 Vue.js