首页
所有分类
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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
js实现模拟购物商城案例
May 18 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
简介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
荷兰购物网站(99) 瑞典购物网站(55) 比利时购物网站(33) 芬兰购物网站(10) 南非购物网站(8) 葡萄牙购物网站(13) 泰国购物网站(30) 哥伦比亚购物网站(5) 土耳其购物网站(10) 欧洲购物网站(15)
You might like
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Tornado 多进程实现分析详解
2018/01/12 Python
python八皇后问题的解决方法
2018/09/27 Python
python 标准差计算的实现（std）
2019/07/29 Python
PHP开发工程师面试问题集锦
2012/11/01 面试题
最新计算机专业自荐信
2013/10/16 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
2014年文秘工作总结
2014/11/25 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL