日常經常使用的JS整理

一、左右可控制的箭頭

var slideOperate = { 
    slideUlId :"",//UL id 用於操做Ul 
    fadeInTime :200,//淡出淡入時間 
    slideDownTime : 200,//滑動時間
    i:0,
    init:function(){
       varliwidth=$("#" + slideOperate.slideUlId + " li").outerWidth();
       varlen=$("#" + slideOperate.slideUlId + " li").length;
      jQuery("#pro_list ul").width(len*liwidth);
    },
    nextLeft:function(){//往右滑動 
       var lastLi =$("#" + slideOperate.slideUlId + " li:first-child");
       varlen=$("#" + slideOperate.slideUlId + " li").length;
      this.i--;
      if(this.i<0){
         this.i=len-1;
       }
       varliwidth=$("#" + slideOperate.slideUlId + " li").outerWidth();
       $("#" +slideOperate.slideUlId +"ul").animate({"left":-this.i*liwidth},200);
    }, 
    nextRight:function(){//往右滑動 
       var lastLi =$("#" + slideOperate.slideUlId + " li:first-child");
       varlen=$("#" + slideOperate.slideUlId + " li").length;
      //jQuery("#pro_list ul").width(len*375);
      this.i++;
      if(this.i>=len){
         this.i=0;
       }
       varliwidth=$("#" + slideOperate.slideUlId + " li").outerWidth();
       $("#" +slideOperate.slideUlId +"ul").animate({"left":-this.i*liwidth},200);
    }, 
    nextDown:function(){//往下滑動(前提Ul豎排) 
       var lastLi =$("#" + slideOperate.slideUlId + "li:last-child"); 
      $(lastLi).find("div").fadeOut();//隱藏最後一個li的內容 
      $(lastLi).hide();//隱藏最後一個li 
       $("#" +slideOperate.slideUlId + "li:first-child").before(lastLi);//前置 
      $(lastLi).slideDown(slideOperate.slideDownTime,function(){ 
      lastLi.find("div").fadeIn(slideOperate.fadeInTime); 
      }); 
    } 
};
$(document).ready( 
   function(){ 
      slideOperate.slideUlId = "pro_list";
      slideOperate.init();
      jQuery(".img_n").click(function(){
         slideOperate.nextLeft();
       });
      jQuery(".img_p").click(function(){
         slideOperate.nextRight();
       });
});

頁面結構：

二、背景焦點圖帶視頻播放（http://wmg.wool-merino.com/index.html）

$(document).ready(function(){
        var index=0;
        var sWidth = $("#focus").width(); //獲取焦點圖的寬度（顯示面積）
        var len = $("#focus ul li").length; //獲取焦點圖個數
        picarr=["\/upload\/news\/1377741086793988532.jpg","\/upload\/news\/1377741095541912294.jpg","\/upload\/news\/1377741117272870151.jpg"];
        videoarr=["\/upload\/news\/1377743814378074972.mp4","\/upload\/news\/1377109843323032934.mp4","\/upload\/news\/1377109694931006898.mp4"];
        linkarr=["","",""];
        for(i=0;ien;i++){
                $("#focus li").eq(i).css({"background":"url("+picarr[i]+")","background-position":"center 0"});
                if(linkarr[i]!=""){
                        $("#focus li").eq(i).html(' href="'+linkarr[i]+'" target="_blank">mg src="/templates/default/images/1x1.gif" width="100%" height="572"/></<span>a>');
                }
        }
        //本例爲左右滾動，即全部li元素都是在同一排向左浮動，因此這裏須要計算出外圍ul元素的寬度
        if(navigator.userAgent.indexOf("MSIE")>0){
                //alert(navigator.userAgent.indexOf("MSIE 9.0"));
                if(navigator.userAgent.indexOf("MSIE 9.0")>0){
                        isie=0;
                }
                else{
                        isie=1;
                }
        }
        $("#focus ul").css("width",sWidth * (len));
        $("#focus li").css("width",sWidth);
        var picTimer=setInterval(function(){
                showPics(index);
                index++;
               if(index == len) {index = 0;}
       },5000);
       //顯示圖片函數，根據接收的index值顯示相應的內容
       function showPics(index) { //普通切換
               var nowLeft = -index*sWidth; //根據index值計算ul元素的left值
               $("#focus ul").stop(true,false).animate({"left":nowLeft},1000); //經過animate()調整ul元素滾動到計算出的position
               //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //爲當前的按鈕切換到選中的效果
               $(".control a").eq(index).addClass("current").siblings().removeClass("current");
       }
       $(".control a").click(function(){
               clearInterval(picTimer);
               j=$(this).index();
               showPics(j);
       });
       $(".close").click(function(){
               $('.bg').hide();                                           
               //$(".pop_video").hide();
               if(!isie){
                       document.getElementByIdx_x("my_video_1").pause();
               }
               else{
                       $("#videoarea").empty();
               }
               $(".pop_video").fadeOut(1000);
       });
  });
function showvideo(vindex){
        if(videoarr[vindex]!=''){
                $(".bg").width($(document).width());  
                $('.bg').height($(document).height());  
                $('.bg').css('left',0);     
                $('.bg').css('top',0);
                if(isie){
                        $("#videoarea").empty();
                        $("#videoarea").html('ideo src="'+videoarr[vindex]+'" width="990" height="570" controls autobuffer id="ie6player"></<span>video>');
                        $(".pop_video").fadeIn(1000);
                        html5media();
                }
                else{
                        $("#videoarea").html('ideo id="my_video_1" class="video-js vjs-default-skin" controls preload="false" width="990" height="570">ource src="'+videoarr[vindex]+'" type="video/mp4">ource src="http://paikytest3.paiky.com.cn/images/video0.ogv" type="video/ogg"></<span>video>');
                        $("#my_video_1").load();
                        $(".pop_video").fadeIn(1000);
                        document.getElementByIdx_x("my_video_1").play();
                }
        }
        else{
                return;
        }
}

三、純背景焦點圖（http://beidi888.paiky.com.cn/）

var isie=0;
$(document).ready(function(){
    var index=0;
    var sWidth = $("#focus").width(); //獲取焦點圖的寬度（顯示面積）
    var len = $("#focus ul li").length; //獲取焦點圖個數
    //本例爲左右滾動，即全部li元素都是在同一排向左浮動，因此這裏須要計算出外圍ul元素的寬度
    if(navigator.userAgent.indexOf("MSIE")>0){
            //alert(navigator.userAgent.indexOf("MSIE 9.0"));
            if(navigator.userAgent.indexOf("MSIE 9.0")>0){
                    isie=0;
            }
            else{
                    isie=1;
            }
    }
    $("#focus ul").css("width",sWidth * (len));
    $("#focus li").css("width",sWidth);
    var picTimer=setInterval(function(){
            showPics(index);
            index++;
            if(index == len) {index = 0;}
    },5000);
    //顯示圖片函數，根據接收的index值顯示相應的內容
    function showPics(index) { //普通切換
            var nowLeft = -index*sWidth; //根據index值計算ul元素的left值
            $("#focus ul").stop(true,false).animate({"left":nowLeft},1000); //經過animate()調整ul元素滾動到計算出的position
            //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //爲當前的按鈕切換到選中的效果
            $(".control a").eq(index).addClass("current").siblings().removeClass("current");
    }
    $(".control a").click(function(){
            clearInterval(picTimer);
            j=$(this).index();
            showPics(j);
    });
});

 四、3張圖片播放的效果http://kaijuepijiu.paiky.com.cn/product_list.html