取材とライティングを行うフリーランスライターです。

サイトリニューアルに際して実装したJavaScript,jQuery【2】

Chrysanthemum
画像をスライド表示できるjQueryプラグインです。
サイトに動きをつけることができるのが一番の魅力ですね。ダウンロードファイルには5つのタイプがありますが、ここでは「Standard」を採用し、制作実績として紹介しているサイトのバナーを順に表示しています。見せられる画像やアピールできる実績が乏しい場合でも、うまくアピールできるツールだと思います。

head内




jsファイル(slider2011.js)
注:WordPressでは$の代わりにjQueryと記述します。

jQuery(function(){
jQuery('#slides').slides({
preload: true,
preloadImage: 'images/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
			});
		});

HTML

Works

CSS

.topWorks{
	width:332px;
	margin-top:66px;
	height:156px;
}

#slides {
	position:relative;
	margin-top:6px;
	background:#FFF;
}

.slides_container {
	width:322px;
	padding-top:5px;
	padding-left:5px;
	overflow:hidden;
	display:none;
}

.slides_container a {
	width:322px;
	height:94px;
	display:block;
}

.slides_container a img {
	display:block;
}

.pagination {
	margin:4px auto 0;
	width:100px;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(images/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

コメント