小图标轮转

//jsp页面

var result = Ext.JSON.decode(response.responseText);$("#POWERINFO").html('');if(result.length > 0){var  powerhtml = '<div class="pj-Carousel"><div class="pj-Carousel"><div class="pj-Carousel-box">';for(var i = 0; i < result.length/4; i ++ ){powerhtml += '<div id ="powerpanel' + i + '" style = "background: #dfe9f6;" class="pj-Carousel-item" ></div> ';}powerhtml += '</div></div></div>';$("#POWERINFO").html(powerhtml)for(var i = 0; i < result.length; i ++ ){var powerpanel = 'powerpanel' +  parseInt(i / 4);var powerstate = result[i].powerState;var powerFancard = '<div id="powerFancard'+ (i + 1)+ '" style="float: left;margin-left:20px;width: 100px;margin-top:10px">';if(powerstate == "1"){powerFancard += '<img src="show-busines/images/powercokciso.png" width="60px" height="60px"/>';}else if(powerstate == "2"){powerFancard += '<img src="show-busines/images/powernsciso.png" width="60px" height="60px"/>';}else if(powerstate == "3"){powerFancard += '<img src="show-busines/images/powernsciso.png" width="60px" height="60px"/>';}else if(powerstate == "4"){powerFancard += '<img src="show-busines/images/powernsciso.png" width="60px" height="60px"/>';}else if(powerstate == "5"){powerFancard += '<img src="show-busines/images/powernsciso.png" width="60px" height="60px"/>';}else if(powerstate == "6"){powerFancard += '<img src="show-busines/images/powernsciso.png" width="60px" height="60px"/>';}powerFancard += '</div>';$("#" + powerpanel).append(powerFancard);}if (result.length == 1) {$('#powerFancard1').css({"margin" : "70px 0 0 120px"});}if (result.length == 2) {$('#powerFancard1').css({"margin-top" : "50px","margin-left" : "50px"});$('#powerFancard1').css({"margin-top" : "50px"});}$("#POWERINFO").Carousel({'play':'true', //是否循环播放'playTimer':'1500','eventClick':'true',        'auto':'true',   //是否自动播放});}

//css样式

* { margin: 0; padding: 0; }/*body{ background-color: #1E1E1E; color: #666666; }*/li { list-style: none; }.pj-Carousel { width: 280px; height: 230px; margin: 0px auto; overflow: hidden; position: relative; }.pj-Carousel-box { height: 0px; position: absolute; top: 0; left: 0; } .pj-Carousel-item { float: left; height: 175px; } .pj-Carousel-active { position: absolute; bottom: 10px; margin: auto auto; z-index: 5; }.pj-Carousel-color { background-color: #A2A2A2; width: 14px; height: 14px; border-radius: 50%; float: left; margin: 0px 5px; }.pj-Carousel .active { background-color: #272727; }

//配置js

(function($,window,document,undefined){$.fn.tab=function(options){var defaults={"color":"red","background":"#eee","mark":"true","prevButton":"","nextButton":"","timer":"5000","mouseover":"false","click":"true"};var str=$.extend({},defaults,options);this.each(function(){var oThis=$(this);$(oThis).find("li").eq(0).css({"color":str.color,"background":str.background});if(str.click=="true"){$(oThis).find("li").bind("click",Move)}if(str.mouseover=="true"){$(oThis).find("li").bind("mouseover",Move)}function Move(){var oindex=$(this).index();$(this).css({"color":str.color,"background":str.background}).siblings("li").css({"color":"","background":""});oThis.find(".pj-tab").eq(oindex).show().siblings(".pj-tab").hide();mun=oindex}if(str.mark=="true"){var mun=0;setInterval(paly,str.timer)}function paly(){mun++;if(mun>=$(oThis).find("li").size()){mun=0}publicFn()}function publicFn(){oThis.find("li").eq(mun).css({"color":str.color,"background":str.background}).siblings("li").css({"color":"","background":""});oThis.find(".pj-tab").eq(mun).show().siblings(".pj-tab").hide()}if(str.prevButton!=""){var oPrev=str.prevButton;$(oPrev).bind("click",function(){if(mun==0){mun=$(oThis).find("li").size()}mun--;publicFn()})}if(str.nextButton!=""){var oNext=str.nextButton;$(oNext).bind("click",function(){paly()})}});return this};$.fn.CutString=function(options){var defaults={"numbers":"200","lastStr":"..."};var str=$.extend({},defaults,options);this.each(function(){var oThis=$(this);oThis.each(function(){var oText=$(this).text().substring(1,str.numbers)+str.lastStr;$(this).text(oText)})});return this};$.fn.Carousel=function(options){var defaults={"background":"red","play":"true","auto":"true","prevButton":"","nextButton":"","AnTimer":"800","playTimer":"5000","WidthMax":"false","fade":"false","eventClick":"false"};var str=$.extend({},defaults,options);this.each(function(){var oThis=$(this);oThis.each(function(){if(str.WidthMax=="true"){oThis.find(".pj-Carousel").css("width",$(document).width());var oboxWidth=$(document).width()}else{var oboxWidth=oThis.find(".pj-Carousel").width()}var oCarouseL=oThis.find(".pj-Carousel-box");var oItemSzie=oThis.find(".pj-Carousel-item").size();var oActive=oThis.find(".pj-Carousel-active");var oItem=oThis.find(".pj-Carousel-item");oCarouseL.css("width",oboxWidth*oItemSzie+"px");var color="";for(var i=0;i<oItemSzie;i++){color+="<div class ='pj-Carousel-color'> </div>"}oActive.append(color);var colorBg=oThis.find(".pj-Carousel-color").css("background");console.log(colorBg);oThis.find(".pj-Carousel-color").eq(0).addClass("active");oActive.css("marginLeft",(oboxWidth-oActive.width())/2+"px");oItem.css("width",oboxWidth);if(str.eventClick=="true"){oThis.find(".pj-Carousel-color").bind("click",Toevevt)}else{oThis.find(".pj-Carousel-color").bind("mouseover",Toevevt)}function Toevevt(){var oIndex=$(this).index();$(this).addClass("active").siblings(".pj-Carousel-color").removeClass("active");if(str.fade=="true"){oThis.find(".pj-Carousel-item").eq(oIndex).fadeIn(str.WidthMax).siblings(".pj-Carousel-item").fadeOut(str.WidthMax)}else{oCarouseL.animate({"left":-oboxWidth*oIndex+"px"},str.AnTimer)}num=oIndex}var num=0;var timer=null;if(str.fade=="true"){oItem.css({"clear":"both","position":"absolute","left":"0","top":"0"});oItem.eq(0).show().siblings(".pj-Carousel-item").hide()}if(str.auto=="true"){timer=setInterval(plays,str.playTimer)}function plays(){if(str.play=="true"){num++;if(num>=oItemSzie){num=0}publicFn()}else{if(str.play=="false"){if(num>=0&&num<oItemSzie-1){num++;publicFn()}}}}function publicFn(){oThis.find(".pj-Carousel-color").eq(num).addClass("active").siblings(".pj-Carousel-color").removeClass("active");if(str.fade=="true"){oThis.find(".pj-Carousel-item").eq(num).fadeIn(str.AnTimer).siblings(".pj-Carousel-item").fadeOut(str.AnTimer)}else{oCarouseL.animate({"left":-oboxWidth*num+"px"},str.AnTimer)}}if(str.prevButton!=""){var oPrev=str.prevButton;$(oThis.find(oPrev)).bind("click",function(){oCarouseL.stop(true,true);if(str.play=="true"){if(num==0){num=oItemSzie}num--;publicFn()}if(str.play=="false"){if(num>0&&num<oItemSzie){num--;publicFn()}}})}if(str.nextButton!=""){var oNext=str.nextButton;$(oThis.find(oNext)).bind("click",function(){oCarouseL.stop(true,true);if(str.play=="true"){num++;if(num>=oItemSzie){num=0}publicFn()}if(str.play=="false"){if(num>=0&&num<oItemSzie-1){num++;publicFn()}}})}oThis.find(".pj-Carousel").bind("mouseover",function(){clearInterval(timer)});oThis.find(".pj-Carousel").bind("mouseout",function(){timer=setInterval(plays,str.playTimer)})})});return this}})(jQuery,window,document);