菜菜鸟banner-JQuery处女开发实录----请仔细阅读

最新推荐文章于 2024-09-10 17:57:28 发布

原创最新推荐文章于 2024-09-10 17:57:28 发布 · 924 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #jquery插件 #jquery #border #float #2010

这篇博客记录了一位新手使用JQuery开发banner的全过程。作者从需求出发，思考并实现了鼠标悬停时图片变化的交互效果，包括渐变功能和自动播放选项。文章详细阐述了每个步骤，包括样式设定、事件监听以及背景颜色变化的处理，并提供了源码供读者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    写这篇文章的目的，主要是记录自己第一次开发JQuery插件，banner的历程，如有有幸被刚接触JQuery的人看到得到一些小小的感悟，那就是我的成功，本人是个刚接触JQuery的菜鸟，这篇文章也是，看了一个博主的开发，才自己理解。

首先，JQuery开发不多说，jquery.js文件到处都可以找到，在google和csdn上都有引用我就不多说了！

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

课题：公司让你开发一个banner，有具体要求.没办法用现成的，怎么半，这时候就要自己开发，所以我认为这叫开发！

思考：~~~~~~~~~~~~~~~~~~~~~~~~~~~！

第一：

*{ margin:0; padding:0;}
ul { list-style:none;}
/*dabai.chen 2010-12-02 banner */
#bannerBox { height:260px; width:540px; overflow:hidden;  position:relative; border:#E7E7E7 solid 1px; background:#FFF; font-size:12px;}
#bannerImgesBox { position:relative; height:270px;}
#bannerImgesBox a { position:absolute; left:0; top:0; text-decoration: none; display:none;}
#bannerImgesBox a img { border:0;}
#bannerTextBox { height:14px; background:url(/images/bannerListBg.jpg) -2px 0; position:absolute; z-index:100; bottom:4px; right:4px; width:536px;}
#bannerTextBox ul { list-style:none;height:16px; float:right;}
#bannerTextBox ul li { float:left; displ ay:inline; height:16px;  text-align:center; width:16px; overflow:hidden; margin-right:1px;}
#bannerTextBox ul li  a {  border:#313131 solid 1px; display:block; color:#FFF;text-decoration:none; background:#666666; width:14px; height:14px; line-height:14px; margin:0 auto;}
#bannerTextBox ul li  a:hover { background: #CA0068;}
 
/*选中*/
#bannerTextBox ul li.thisHover  a{background: #CA0068; }
/**/

第二：

<body>
<div id="bannerBox">
  <div id="bannerImgesBox"> <a href="http://dabaii.com" target="_blank"  style="display:block;" ><img  src="1.jpg"></a> <a href="http://dabaii.com" target="_blank" ><img  src="2.jpg"></a> <a href="http://dabaii.com" target="_blank" ><img  src="3.jpg"></a> </div>
  <div id="bannerTextBox">
    <ul>
      <li class="thisHover" set="0"><a href="###">1</a></li>
      <li set="1"><a href="###">2</a></li>
      <li set="2"><a href="###">3</a></li>
    </ul>
  </div>
</div>

</body>

这样基本的样式就出来了，主要是在这基本的样式上做动作，这就是需要思考的地方了，图片自己看着弄就行了。

第三：首先基本的样式写出来，自己画一张草图，把样子画出来.

$(function(){})

然后在里面开始写自己的想法，

【1】鼠标移动到 1 2 3上面的时候，图片发生变化，对嘛！

$(function(){
//$('#bannerTextBox ul li').mousemove(function(){//1.选择器的使用2.选择器里面是单引号3.function是加()
$('#bannerTextBox').find('li').mouseover(function(){ $('#bannerImgesBox').find('a').eq(i).fadeIn('slow');})

这样就能实现鼠标移上去的功能，渐变功能，可是有一个问题，当你鼠标移动到任何数字上，在移动到其他的1或者 2上不会发生渐变，是因为并没有指定哪个图片出来！

【2】

$(function(){
//$('#bannerTextBox ul li').mousemove(function(){//1.选择器的使用2.选择器里面是单引号3.function是加()

var i = $(this).attr('set');//取出对应图片来。
$('#bannerTextBox').find('li').eq(i).mouseover(function(){ $('#bannerImgesBox').find('a').eq(i).fadeIn('slow');})
此时的效果还是不那么如意，你可以自己试一试，是因为少一个东西，$("#bannerImgesBox").find('a').hide();这时候完全没问题了！

【3】就得想，要判断是鼠标移上去或者是自动触发。写到一个函数里面

function changeBanner(i){
$("#bannerImgesBox").find('a').hide();
if(){
$("#bannerImgesBox").find('a').eq(这里是自动变化的图片值).fadeIn("slow");   
}else{
$("#bannerImgesBox").find('a').eq(i).fadeIn("slow");
}

【4】要考虑的问题就是：如果打开就是自动播放，还是当鼠标移走的时候自动播放，所以要加2行代码！

.mouseout(function(){ t1 = setInterval(changeBanner,'3000');

var t1 = setInterval(changeBanner,'3000');

【5】就是图片背景颜色的变化

$('#bannerTextBox').find(".thisHover").removeClass('thisHover');

然后判断是是佛是手动还是自动

下面是源码：

<script type="text/javascript" src="http://www.dabaii.com/demo/20100907/js/jquery.js"></script>    
<script type="text/javascript">     
//dabai.chen 2010-12.02 for zhenai.com index    
     
//无插件 banner切换效果    
$(function(){    
    //获取可点触发编号    
    $('#bannerTextBox').find('li').mouseover(function(){    
                        //停止自动切换    
                        clearInterval(t1);    
                        //获取编号自定义值 以获取对应图片    
                        var i = $(this).attr('set');    
                        //调用切换效果，切换到当前鼠标焦点编号的banner    
                        changeBanner('x',i);    
                        //设置当前编号的颜色     
                        setListNo.apply(this,['x']);    
                 }).mouseout(function(){    
                        //鼠标离开编号 自动开始继续切换    
                        t1 = setInterval(changeBanner,'3000');    
    })    
//定义可触发编号 该变量用来自动切换过程中累加计算 用于判断是否到达最好一个banner位置    
var bannerListIndex = 1;    
     
//设置编号 参数setNo 用来判断方法是setInterval自动触发的还是 mouseover手动触发    
function setListNo(setNo){    
    //清空历史的选中位置    
    $('#bannerTextBox').find(".thisHover").removeClass('thisHover');    
    //如果是setInterval自动触发    
    if(setNo!="x"){    
            //通过 定义可触发编号bannerListIndex 累加参数判断选中位置    
            $('#bannerTextBox').find("li").eq(setNo).addClass("thisHover");    
        }    
    //如果是手动触发    
    else{    
            //通过设置当前鼠标点击对象设置 选中位置    
            $(this).addClass("thisHover");      
        }    
    }    
     
//切换方法 参数o 用来判断是否是手动出发  i 用来记录手动出发位置，以便真确定义显示图片    
function changeBanner(o,i){    
        $("#bannerImgesBox").find('a').hide();    
        if(o != 'x'){    
            setListNo(bannerListIndex);    
            $("#bannerImgesBox").find('a').eq(bannerListIndex).fadeIn("slow");    
        }else{    
                
            $("#bannerImgesBox").find('a').eq(i).fadeIn("slow");    
            bannerListIndex = i;    
            }    
        // 累加bannerListIndex 于判断是否到达最后一个banner位置     
        bannerListIndex++;    
        if(bannerListIndex > 2 ){    
            bannerListIndex = 0    
        }    
    }    
//changeBanner();    
var t1 = setInterval(changeBanner,'3000');    
})    
</script>

原文地址：http://www.dabaii.com/?action=show&id=95

仔细理解下，要改变的2中方式：渐变效果的改变，还有就是不一定鼠标移走，非得从孟飞开始吧！