A5下载站：努力做内容最丰富最安全的下载站！ 网站地图最新更新下载排行专题软件发布

热门软件

地铁跑酷

冒险迷岛

全民迷宫

连连消大作战

小河狸创客

阿里健康医鹿

支付宝app

番薯小说

MOMO陌陌

虾米音乐app

位置导航：A5下载 > 源码技巧 > 父类数据

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

时间：2015-06-10 15:19来源：a5源码作者：zhao浏览：78
这篇文章主要介绍了jQuery实现首页图片淡入淡出效果的方法,实例分析了jQuery图片淡入淡出效果的相关使用技巧,需要的朋友可以参考下……

本文实例讲述了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程序设计有所帮助。

 

相关阅读

热文精选

更多

资讯推荐

更多

热门推荐应用

更多

蛇蛇争霸360版 v8.2.0

愤怒的小鸟2 v3.7.1

乐游方块消除 v1.4.1

字母检索 ABCDEFGHIJKLMNOPQRSTUVWXYZ

关于我们联系我们 提交软件广告服务软件发布版权声明网站地图

Copyright © 2008-2023 A5下载(www.A5xiazai.com). 联系方式： 皖ICP备16006312号