Jquery implements a simple and practical carousel, and jquery implements a simple and practical

Jquery implements a simple and practical carousel, and jquery implements a simple and practical

WEB development is often used in a situation where various items in a container are displayed cyclically and cyclically, with corresponding navigation bar prompts, because this can be used in many places, in addition, the functions are very similar. Therefore, to share this function, you must note that jQuery supports this function. You can search and download it online. The following is a summary, view the Code directly,

1. Save the following as an independent file itemPlayerApp. js:

//attend: this need jQuery.js support var itemPlayerApp={  author:'shenzhenNBA',  version:'v1.0',  appMaxNum:0,  playData:'1xplay',  playerID:"",  speed:3000,  appPlay:function(){    var f=this.playData.toLowerCase().split('x');   if(f[1]=='play'){    var i;    try{i=parseInt(f[0]);}catch(e){i=0;}    if(i>=this.appMaxNum){i=0;}       this.appTab(i);      this.playData=(++i)+"xplay";   }    },  appTab:function(tabIndex){   var k,j;   try{k=parseInt(tabIndex);}catch(e){k=0;}     for(j=0;j<this.appMaxNum;j++){       if(k==j){         $('#itemNav'+j).css({'background-color':'#333333','color':'#FFFFFF'});        $('#item'+j).show('fast');       }else{      $('#itemNav'+j).css({'background-color':'#CCCCCC','color':'#000000'});    $('#item'+j).hide('fast');     }   }    },  appActive:function(){   var _this = this;   this.playerID = setInterval(function(){ _this.appPlay(); },this.speed);  },  init:function(refContainerId,intervalTime,refWidth,refHeight){    var cid = "";    var w = 300;   var h = 200;   if(refContainerId == 'undefined' || refContainerId == null || refContainerId == ''){    return;   }else{    cid = $.trim(refContainerId);   }    if(refWidth == 'undefined' || refWidth == null || refWidth == ''){    w = 300;   }else{    w = parseInt(refWidth);   }    if(refHeight == 'undefined' || refHeight == null || refHeight == ''){    h = 200;   }else{    h = parseInt(refHeight);   }       $('#' + cid).css({"position":"relative",'width':w,'height':h,'overflow':'hidden'});   $('#' + cid + "NavCon").css({'color':'#333333','height':'26px','position':'absolute','width':'95%','left':'0','bottom':'3px','text-align':'right','display':'block'});   var t = 0;   if(intervalTime == 'undefined' || intervalTime == null){    t = 3000;   }else{    try{ t = parseInt(intervalTime);}catch(e){ t = 3000;}   }   this.speed = t;   var navList = "#" + cid + "NavCon a";   this.appMaxNum = $(navList).size();   if(0 == this.appMaxNum){ return; }   var _this = this;   $(navList).each(function(i){    $(this).css({'padding':'2px 5px','margin-right':'2px','background-color':'#CCCCCC'});    if(i == 0){     $(this).css({'background-color':'#333333','color':'#FFFFFF'});    }        $(this).mouseover(function(){    _this.playData=i+'xstop';    _this.appTab(i);     });    $(this).mouseout(function(){    _this.playData=i+'xplay';    _this.appTab(i);    });   });  } }; 

Ii. How to use:

1. Introduce the jQery file and itemPlayerApp. js file to the web page to be used, for example:

<Script language = "javascript" src = "xpath/itemPlayer. js"> </script>

2. Create an HTML file in the following format

<div id="containerID"><div id="containerIDNavCon"><a id="itemNav0" class="item1" href="#">1</a><a id="itemNav1" class="item1" href="#">2</a><a id="itemNav2" class="item1" href="#">3</a></div><div id="containerIDItemCon"><a id="item0" href="#"></a><a id="item1" href="#"></a><a id="item2" href="#"></a></div></div>

Note:As simple as possible, You Need To Create HTML in the appropriate format. The main requirements are as follows. Pay attention to the color section,

// A, id = containerIDNavCon and id = containerIDItemCon should have the same number of connected A elements;
// B. Add NavCon to the ID of the navigation container, as shown in containerIDNavCon;
// C. the ID of each A element in the navigation container is composed of itemNav and an incremental numerical sequence starting with 0, as shown in the green section above;
// D. the ID of each A element in the project container is displayed as follows: the item is added with an ascending Number Sequence starting with 0, as shown in the purple part above;

3. Load the event onload on the WEB page, initialize and enable the carousel function, for example:
Window. onload = function (){
ItemPlayerApp. init ('Container', 3000,300,200 );
ItemPlayerApp. active ();
}

Iii. Example below

If all the files are put in a folder,

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 
Tip: Download jQuery. js files online.
You can use it directly when using it.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.