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"/> 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"> 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"> 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