169it科技资讯
169it -->


当前位置:  编程技术>jquery

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

    来源: 互联网  发布时间:2014-10-09

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

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

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

需求:
1. 绿色区域要求在图片上方,半透明显示
2. 当鼠标移动到红色区域,切换相应的图片
3. 首页的三张大图轮转
HTML:
 

代码示例:
<div id="carousel"> 
    <div id="carouselimg" > 
<div id="imgcontainer" > 
    <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淡入淡出效果代码。   代码示例: <!DOCTYPE html> <html> <head> <title>jquery自动切换淡入淡出效果_www.</title> <style type="text/css"> .slideshow { height: 232px; width: 232px; margin: auto } .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } </style> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="http://cloud.......


    ▪jquery实现添加图片淡入淡出效果的代码

     例子,jquery图片淡入淡出效果。   代码示例: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"  "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <title>图片淡入淡出-www.yuju100.com</title>  <script type="text/javascript" language="javascript" charset="utf-8" src="jquery-1.4.2.min.js">  // <![cdata[    // ]]>  </script>  <script type="text/javascript" language="javascript" charset="utf-8">  // &......


    ▪jquery图片淡入淡出与图片切换效果的例子

     例子,jquery制作图片淡入淡出图片切换效果。 jquery相册插件制作图片淡入淡出效果,图片自动轮播淡进淡出效果,可用于jquery图片相册特效。 代码:   代码示例: <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> //图片切换调用语句 imgtransition({speed: 3000, animate: 1000}); $.fn.imgtransition = function(o){     var defaults = {         speed : 5000,         animate : 1000     };     o = $.extend(defaults, o);     return this.ea......


 
最新技术文章:
    ▪jquery怎么限制文本框只能输入数字?

     如何用jquery 限制文本框只能输入数字呢?   先来看一个简单的例子:    代码示例: $("input[name='fangwenyudinhuishu']").keyup(function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).bind("paste",function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).css("ime-mode", "disabled");    以上是keyup事件处理,接着处理了CTR+V事件,最后是css设置输入法不可用。 例子,用jquery限制文本框只能输入数字:(......


    ▪jquery显示与隐藏div的方法示例

     例子,显示与隐藏div。   $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法  以下是一些显示与隐藏div,给元素设置style属性的方法。   1,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性   $("#sendPhoneNum").attr("class", "n_input3");  2,给元素设置style属性   $("#top_notice").attr("style", "display:block;");    3,通过jquery的css方法,设置div隐藏   $("#sendPhoneNum").c......


    ▪jquery怎么获取div的id值?

     例子,jquery获得div的id。   <div id="product_shift_out_{m}"> </div>  <script language = "JavaScript" type="text/javascript">  $(document).ready(function(){  name = $('div').eq(0).attr('id');  alert(name)  });  </script> eq(0)是取第一个jq元素。   eq(index) 匹配一个给定索引值的元素 -------------- Matches a single element by its index. 返回值 Element 参数 index (Number) : 从 0 开始计数 例子,查找第二行。   <table> <tr><td>Header 1</td></tr> <tr><td>Va......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2015,169IT.COM,站长邮箱:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号