< >
样式(css): /*xn_c_ba_wrap*/ .xn_c_ba_wrap{position:relative;width:100%;overflow:hidden;} .xn_c_ba_wrap .dotBox{width:100%;text-align:center;padding-top:10px;position:absolute;bottom: 8px;} .xn_c_ba_innerBox li{width:100%;} .xn_c_ba_wrap img{width:100%;} .xn_c_ba_wrap .dotBox span{display: inline-block; width: 15px; height: 15px; margin: 0 5px;background:#fff; cursor: pointer;border-radius:100%;} .xn_c_ba_wrap .dotBox span.curr{background:#9f7c3a;} /*end_xn_c_ba_wrap*/ 效果(script): /*xn_c_ba_wrap*/ $(function(){ if(!$("#xn_c_ba_wrap").length>0){ return; }; (function($){ $.fn.extend({ ESlide3:function(left,right,isScroll,time){ var $items = this; var $left=left; var $right=right; var _isScroll=isScroll||true; var timer=time||3000; var $out =$left.parent(); var iLilen=$items.children().length; var $items_li=$items.children(); var li_width=parseInt($items_li.outerWidth(true)); var curr=0; var prev=0; var html="
"; var imgH=$(".xn_c_ba_innerBox").find("img").eq(0).height(); //初始化 function chushi(){ var imgH=$(".xn_c_ba_innerBox").find("img").eq(0).height(); var imgW=$(".xn_c_ba_innerBox").find("img").eq(0).width(); li_width=imgW; $(".xn_c_ba_innerBox li.curr").siblings().css("left","100%") $(".xn_c_ba_wrap").height(imgH); $('.xn_c_ba_innerBox img').each(function(){ $(this).parent().parent().height(imgH); // $(this).parent().parent().width(imgW); li_width=imgW; }); $('.xn_c_ba_img img').unbind('load').bind('load',function(){ setTimeout(function() { var imgH=$(".xn_c_ba_innerBox").find("img").eq(0).height(); $('.xn_c_ba_innerBox img').each(function(){ $(this).parent().parent().height(imgH); // $(this).parent().parent().width(imgW); li_width=imgW; }); $(".xn_c_ba_wrap").height(imgH); }, 1000); }); }; chushi(); $(window).resize(function(){ chushi();}) $items_li.css({ "position":"absolute", "top":0, "left":li_width+"px" }) $items_li.first().css("left",0); $items.parent().append(html); var $dotBox=$items.parent().find(".dotBox"); for(var i=0;i"); } var $dotSpan=$dotBox.children(); $dotSpan.first().addClass("curr"); $items_li.first().addClass("curr"); if(iLilen==1){ return; } $left.click(function(){ if(curr==iLilen-1){ return; } prev=curr; curr++; nextImg(); }); $right.click(function(){ if(curr==0){ return; } prev=curr; curr--; prevImg(); }); function nextImg(){ li_width=parseInt($items_li.outerWidth(true)); $items_li.eq(curr).css({"left":li_width+"px"}); $items_li.eq(curr).animate({"left":0},500); $items_li.eq(prev).animate({"left":-li_width+"px"},500); $dotSpan.eq(curr).addClass("curr").siblings().removeClass("curr"); $items_li.eq(curr).addClass("curr").siblings().removeClass("curr"); } function prevImg(){ li_width=parseInt($items_li.outerWidth(true)); $items_li.eq(curr).css({"left":-li_width+"px"}); $items_li.eq(curr).animate({"left":0},500); $items_li.eq(prev).animate({"left":li_width+"px"},500); $dotSpan.eq(curr).addClass("curr").siblings().removeClass("curr"); $items_li.eq(curr).addClass("curr").siblings().removeClass("curr"); } $dotSpan.on("click",function(e){ var _index=$(this).index(); prev=curr; curr=_index; // (_index>prev)?: if(_index>prev){ prevImg(); console.log(11) } if(_index