each()문을 써야하는 이유는 무엇일까 특징을 살펴보자?

1. 일반 for문보다 가독성이 좋다
2. 객체형을 다루기가 쉽다.
3. Array 객체에서 사용가능
4. 빠른편이다.
5. 리턴값을 받지 못한다.

for, foreach, each 

var arr= [ 
			{name : '알리송', backnumber : '1'}
          , {name : '반다이크', backnumber : '4'} ];

//for문
for (var i = 0; i <arr.length; i++) {
  console.log('element', i, arr[i]);
  console.log(arr[i].name);
  console.log(arr[i].backnumber);
  console.log(arr[i].name + arr[i].backnumber);
};


foreach문
arr.forEach (function (el, index) {
  console.log('element', index, el);
  console.log(el.name);
  console.log(el.backnumber);
  console.log(el.name + el.backnumber);
});


$.each문
$.Each (arr, function (index, el) {
  console.log('element', index, el);
  console.log(el.name);
  console.log(el.backnumber);
  console.log(el.name + el.backnumber);
});

loopedSlider

loopedSlider 0.5.7 – No longer in development

Check out the next version of loopedSlider, now called Slides https://github.com/nathansearles/Slides

loopedSlider is a plugin made for jQuery that solves a simple problem, the looping of slide content. It was created to be easy to implement, smooth and most of all end the “content rewind” that most other content sliders suffer from.

Info

Check out the next version of loopedSlider, now called Slides http://slidesjs.com

Developed by Nathan Searles, http://nathansearles.com

Complete instructions can be found at http://nathansearles.com/plugin/loopedslider/

For updates, follow Nathan Searles on Twitter

Examples

• Simple example using images, DIVs and auto generated pagination
• Simple text and auto height example using LIs
• Multiple sliders and auto play with auto restart
• Styled example

Markup

<div id="loopedSlider">
	<div class="container">
	        <div class="slides">
	                <div><img src="01.jpg" alt="" /></div>
	                <div><img src="02.jpg" alt="" /></div>
	                <div><img src="03.jpg" alt="" /></div>
	                <div><img src="04.jpg" alt="" /></div>
	        </div>
	</div>
	<a href="#" class="previous">previous</a>
	<a href="#" class="next">next</a>
</div>

CSS

.container { width:500px; height:375px; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:500px; display:none; }

Initialize

<script type="text/javascript" charset="utf-8">
        $(function(){
                $('#loopedSlider').loopedSlider();
        });
</script>

Defaults

container: ".container", //Class/id of main container. You can use "#container" for an id.
slides: ".slides", //Class/id of slide container. You can use "#slides" for an id.
pagination: "pagination", //Class name of parent ul for numbered links. Don't add a "." here.
containerClick: true, //Click slider to goto next slide? true/false
autoStart: 0, //Set to positive number for true. This number will be the time between transitions.
restart: 0, //Set to positive number for true. Sets time until autoStart is restarted.
hoverPause: false, //Set to true to pause on hover, if autoStart is also true
slidespeed: 300, //Speed of slide animation, 1000 = 1second.
fadespeed: 200, //Speed of fade animation, 1000 = 1second.
autoHeight: 0, //Set to positive number for true. This number will be the speed of the animation.
addPagination: false //Add pagination links based on content? true/false

Defining Local Defaults

<script type="text/javascript" charset="utf-8">
        $(function(){
			$('#loopedSlider').loopedSlider({
				addPagination: true,
				slidespeed: 500
			});
        });
</script>

Defining Global Defaults

<script type="text/javascript" charset="utf-8">
        $(function(){
			$.fn.loopedSlider.defaults.addPagination = true;
			$.fn.loopedSlider.defaults.slidespeed = 500;
        });
</script>