平常常用的JS整理

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

[/code]
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