平常常用的JS整理

最新推荐文章于 2022-06-29 23:03:15 发布

hubu2006

最新推荐文章于 2022-06-29 23:03:15 发布

阅读量628

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/hubu2006/article/details/12646889

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、左右可控制的箭头

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();
       });
});

页面结构：

2、背景焦点图带视频播放（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;
        }
}

3、纯背景焦点图（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);
    });
});

4、3张图片播放的效果http://kaijuepijiu.paiky.com.cn/product_list.html