首页
所有分类
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 相关文章推荐
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
vue3使用vue-count-to组件的实现
Dec 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
nginx(76) Windows server 2012(17) mounted(1) el-table(1) Mybatis-Plus(3) TableField(1) 日志格式分析(1) create(1) 子查询(1) 组策略(1)
You might like
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪？
2015/07/31 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python中int()函数的用法浅析
2017/10/17 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
使用python远程操作linux过程解析
2019/12/04 Python
迪拜航空官方网站：flydubai
2017/04/20 全球购物
美国购物网站：Clickhere2shop
2021/01/28 全球购物
实习生求职自荐信
2014/02/07 职场文书
合作协议书怎么写
2014/04/18 职场文书
精神文明建设标语
2014/06/16 职场文书
2014员工聘用协议书（最新版）
2014/11/24 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
青春雷锋观后感
2015/06/10 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
新店开业策划方案怎么书写？
2019/07/05 职场文书
七年级作文之下雨天
2019/12/23 职场文书
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技