spring21st 通过本文主要向大家介绍了jQuery,首页图片,淡入淡出等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文实例讲述了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.l