JavaScript 图片广告自动与手动的切换

1.代码


  
   
   
   
  
  
 

 
   

 
       
       
       
   

    
   

 
     

 
     

 
     

 
   

 

 
 

2.代码
?$(document).ready(function() {
 
    var upPic = $("#pictrue>a").first(); // 上次显示的图片
    var nowPic; // 当前显示的图片
    var nowi = 1;
    var yy; //用来计算图片编号的位置
    var upPicNo = $("#select>div").first(); //上次显示的图片编号
    var nowPicNo; // 当前显示的图片编号
    var size;
 
    // 得到所要显示图片的数量
    size = $("#select>div").size();
     
    // 将除第一张图片以外的图片淡出,并初始化为第一张图片选中
    $("#pictrue>a:gt(0)").fadeOut("slow");
     
    // 第一张图片选中的同时图片编号以为选中
    upPicNo.css({
        "background-position": "0 -350"
    });
       
    // 当点击图号时,对应的图片就显示
    $("#select>div").click(function() {
        nowPicNo = $(this);
        nowi = nowPicNo.attr("tabindex");
        nowPic = $("#pictrue>a:eq("+(nowi-1)+")");
        if (!nowPic.is(':visible')) {
            pictrueChange(nowPic, nowPicNo);
        }
    });
 
    /**
                **
                */
    function pictrueChange(nowPic, nowPicNo) {
        //*************************************
        // 将上次选中的编号样式改回到未点击样式
        var upNo = upPic.attr("tabindex");
        yy = ( - 100 - (upNo - 1) * 25) + "px";
        upPicNo.css({
            "background-position": "0 " + yy
        });
 
        // 当前被点击图号的样式
        yy = ( - 350 - (nowi - 1) * 25) + "px";
        nowPicNo.css({
            "background-position": "0 " + yy
        });
        upPicNo = nowPicNo;
 
        upPic.fadeOut("slow");
        nowPic.fadeIn("slow");
        upPic = nowPic;
    };
 
    function autoPic() {
        nowi = nowi + 1;
        if (nowi <= size) {
            nowPic = $("#pictrue>a:eq("+(nowi-1)+")");
            nowPicNo = $("#select>div:eq("+(nowi-1)+")");
 
            pictrueChange(nowPic, nowPicNo);
        } else {
            nowi = 0;
        }
    }
 
    setInterval(autoPic, 3000);
 
    // 图片编号的数字样式
    $("#select>div").hover(function() {
        // 判断如果当前图号被选中时,就不更改当前图号的鼠标移入样式
        hoverFunction($(this), 225);
    },
    function() {
        // 判断如果当前图号被选中时,就不更改当前图号的鼠标移出样式
        hoverFunction($(this), 100);
    });
 
    /**
                **
                */
    function hoverFunction(picNumber, numLoc) {
        var oldCss = picNumber.css("background-position");
        oldCss = oldCss.substring(5, oldCss.length - 2);
 
        if (oldCss < 350) {
            yy = ( - numLoc - (picNumber.attr("tabindex") - 1) * 25) + "px";
            picNumber.css({
                "background-position": "0 " + yy
            });
        }
    }
 
    //$.extend({
    //  show:function(){
    //  alert("ready");
    //}
    //});
    //setInterval("show()",3000);   
});