関連†

• JavaScript
• jQuery

概要†

画像をクロスフェードさせます。

方法†

• index.html

  <div class="key-visual">
  	<ul>
  		<li>
  			<a href="#">
  				<img src="images/key-visual-01.jpg" />
  			</a>
  		</li>
  		<li>
  			<a href="#">
  				<img src="images/key-visual-02.jpg" />
  			</a>
  		</li>
  		<li>
  			<a href="#">
  				<img src="images/key-visual-03.jpg" />
  			</a>
  		</li>
  	</ul>
  </div>

• style.css

  .key-visual {
  	width: 940px;
  	height: 220px;
  }
  
  .key-visual > ul {
  	position: relative;
  }
  
  .key-visual > ul > li {
  	display: none;
  	position: absolute;
  	top: 0;
  	left: 0;
  }
  
  .key-visual > ul > li:first-child {
  	display: list-item;
  }

• key-visual.js

  jQuery(function(){
  	var timeToFade = 1000;
  	var timeToWait = 4000;
  	var crossFade = function() {
  		var list = jQuery('.key-visual > ul');
  		var current = jQuery(list).children(':nth-child(1)');
  		var next = jQuery(list).children(':nth-child(2)');
  		jQuery(next).fadeIn(timeToFade);
  		jQuery(current).fadeOut(timeToFade, function() {
  			jQuery(this).remove();
  			list.append(this);
  		});
  		setTimeout(crossFade, timeToWait);
  	};
  	setTimeout(crossFade, timeToWait);
  });

解説†

クロスフェードしては後ろへ、クロスフェードしては後ろへ、です。

参考†

• http://d.hatena.ne.jp/prime503/20100112/1263279086