php实例 shell脚本 jquery选择器 python模拟登录 linux命令 nginx apache
当前位置：首页 > 脚本编程 > jquery > jquery特效 > 正文

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

发布时间：2019-10-24编辑：脚本学堂
有关jquery设置图片淡入淡出效果的例子，jquery实现首页图片的淡入与淡出，感兴趣的朋友参考下。

当当网的品牌店铺经过一个星期的设计和制作，昨天终于全部上线了。

在完成过程中，主要遇到的问题是首页的图片的轮转效果。

效果：http://static.dangdang.com/gm/topic/2270_181320.shtml

需求：
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自动切换淡入淡出效果的例子

与 jQuery实现首页图片淡入淡出效果 有关的文章

浏览排行

栏目分类

栏目导航

热点文章

关于本站 | 网站地图 | 联系我们 | 免责声明 | 友情链接
鄂ICP备13010364号-22

CopyRight © 2010-2021 脚本学堂 Jb200.com , All Rights Reserved.