jQuery Cycle Plugin(サイト)

サンプルページ（別ページ）

必要なファイル

• jquery.js
• jQuery Cycle Plugin
• jquery.easing.1.3.js

javascriptの読み込み

<!-- include jQuery library -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 600;
$(document).ready(function() {

//#slideshowの部分の効果
    $('#slideshow').cycle({
		fx: 'fade'
		});

//#slideshow02の部分の効果
		$('#slideshow02').cycle({
    fx:    'zoom',
    delay: -1000
   	});

//#slideshow03の部分の効果
		$('#slideshow03').cycle({
		    fx:    'scrollDown',
		    delay: -1000 ,
		});

//#slideshow04の部分の効果
		$('#slideshow04').cycle({
    fx:      'custom',
    cssBefore:{
        left: 332,
        top: -232,
        display: 'block'
    },
    animIn: {
        left: 0,
        top: 0
    },
    animOut: {
        left: 232,
        top: 332
    },
    delay: -3000
 		});

//#slideshow05の部分の効果
		$('#slideshow05').cycle({
    fx: 'custom',
    cssBefore: {
        top:  0,
        left: 0,
        width: 0,
        height: 0,
        zIndex: 1
    },
    animIn:  {
        width: 300,
        height: 230
    },
    animOut: {
        top:  300,
        left: 300,
        width: 0,
        height: 0
    },
    cssAfter: {
        zIndex: 0
    },
    delay: -500
 		});

});
</script>

htmlの記述

	<div id="slideshow" class="slide">
		<img src="img/sample008.jpg" alt="" />
		<img src="img/sample009.jpg" alt="" />
		<img src="img/sample010.jpg" alt="" />
		<img src="img/sample011.jpg" alt="" />
		<img src="img/sample012.jpg" alt="" />

	</div>

	<div id="slideshow02" class="slide">
		<img src="img/sample008.jpg" alt="" />
		<img src="img/sample009.jpg" alt="" />
		<img src="img/sample010.jpg" alt="" />
		<img src="img/sample011.jpg" alt="" />
		<img src="img/sample012.jpg" alt="" />

	</div>
	<div id="slideshow03" class="slide">
		<img src="img/sample008.jpg" alt="" />
		<img src="img/sample009.jpg" alt="" />
		<img src="img/sample010.jpg" alt="" />
		<img src="img/sample011.jpg" alt="" />
		<img src="img/sample012.jpg" alt="" />

	</div>
	<div id="slideshow04" class="slide">
		<img src="img/sample008.jpg" alt="" />
		<img src="img/sample009.jpg" alt="" />
		<img src="img/sample010.jpg" alt="" />
		<img src="img/sample011.jpg" alt="" />
		<img src="img/sample012.jpg" alt="" />

	</div>
	<div id="slideshow05" class="slide">
		<img src="img/sample008.jpg" alt="" />
		<img src="img/sample009.jpg" alt="" />
		<img src="img/sample010.jpg" alt="" />
		<img src="img/sample011.jpg" alt="" />
		<img src="img/sample012.jpg" alt="" />

	</div>

cssの記述

<style type="text/css">
.slide {
	height:262px;
	width: 332px;
	margin:0 20px 20px 0;
	text-align:center;
	float:left;
	overflow:hidden;
	}
.slide img {
	width:300px;
	padding: 15px;
	border: 1px solid #ccc;
	background-color: #eee;
	margin:0 auto;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
</style>