【簡単】sagscroller.jsで文字と画像を自動縦スクロールさせる方法｜DAD UNION

この記事では、sagscroller.jsを使ってリストタグに設定した文字リンクや画像を自動で縦スクロールする方法をご紹介します。
縦スクロールエリアを簡単に設定し、ページのデザインをより動的で魅力的にすることができます。

Contents

文字と画像の縦スクロールエリアのCSS記述
sagscroller.jsを使ってリストタグに設定した文字リンクや画像を自動で縦スクロールするJavaScriptの記述
文字と画像の縦スクロールエリアのHTML記述
sagscroller：文字や画像を自動で縦スクロールするデモページ
ソース元：Dynamic Drive DHTML Scripts- SAG Content Scroller
最後に

文字と画像の縦スクロールエリアのCSS記述

まず、縦スクロールエリアのCSSを記述します。ここでは、文字リンク用のエリア（id=”mysagscroller”）と画像用のエリア（id=”mysagscroller2″）の2パターンを用意しました。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}

.sagscroller{
	width: 310px;
	height:300px;
	overflow:hidden;
	position:relative;
	border:5px solid black;
}
.sagscroller ul{
	position:absolute;
	margin:0;
	padding:0;
	background:white;
	list-style:none;
	width: 300px;
}
.sagscroller ul li{
	display:block;
}
.sagscroller ul li .rsslabel{
	margin-top:5px;
	font-size:12px;
	clear: both;
}
/* 文字リスト縦スクロールデモ */
div#mysagscroller{
	width: 310px;
	height:310px;
	float:left;
}
div#mysagscroller ul li{
	color:000000;
	padding:5px;
	margin-bottom:5px;
}
div#mysagscroller ul li:first-letter{
	font-size:24px;
	background:#666666;
	color:#ffffff;
	padding:0 2px;
	margin-right:2px;
}
/* 画像縦スクロールデモ */
div#mysagscroller2{
	width: 300px;
	height:600px;
	border:5px solid #C0C0C0;
	float:right;
}
div#mysagscroller2 ul li img{
	border-width:0;
	display:block;
}
-->
</style>

sagscroller.jsを使ってリストタグに設定した文字リンクや画像を自動で縦スクロールするJavaScriptの記述

次に、JavaScriptを使ってリストタグに設定した文字リンク（id=”mysagscroller”）や画像（id=”mysagscroller2″）を自動で縦スクロールする方法をご紹介します。
sagscroller.jsを使用することで、簡単に縦スクロール機能を追加できます。オプションでスピードや自動スクロール等の設定が可能です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="sagscroller.js"></script>
<script type="text/javascript">
/* 文字リスト縦スクロールデモ */
var sagscroller1=new sagscroller({
	id:'mysagscroller',
	mode: 'manual'
})
/* 画像縦スクロールデモ */
var sagscroller2=new sagscroller({
	id:'mysagscroller2',
	mode: 'auto',
	pause: 2500,
	animatespeed: 400
})
</script>

文字と画像の縦スクロールエリアのHTML記述

最後に、縦スクロールエリアのHTMLを記述します。ここでは、文字リンクエリア（id=”mysagscroller”）と画像エリア（id=”mysagscroller2″）の2つのパターンを用意しました。

<div id="idWrap">
    <h1>文字と画像を設定したリストタグを自動で縦スクロールします</h1>

<div id="mysagscroller" class="sagscroller">
	<ul>
		<li><a href="https://dad-union.com/javascript/158">表示画像をjQueryを使用して点滅させる方法</a></li>
		<li><a href="https://dad-union.com/javascript/155">jQueryとsetIntervalで複数のpng画像一定間隔で切替える方法</a></li>
		<li><a href="https://dad-union.com/javascript/153">jquery.tablesorter：テーブルタグをソート可能にするJs</a></li>
		<li><a href="https://dad-union.com/javascript/148">snowfall.jquery：紙吹雪を表示するJs</a></li>
		<li><a href="https://dad-union.com/javascript/146">jquery.countdown.js：設定日からのカウントダウンを表示</a></li>
		<li><a href="https://dad-union.com/javascript/158">表示画像をjQueryを使用して点滅させる方法</a></li>
		<li><a href="https://dad-union.com/javascript/155">jQueryとsetIntervalで複数のpng画像一定間隔で切替える方法</a></li>
		<li><a href="https://dad-union.com/javascript/153">jquery.tablesorter：テーブルタグをソート可能にするJs</a></li>
		<li><a href="https://dad-union.com/javascript/148">snowfall.jquery：紙吹雪を表示するJs</a></li>
		<li><a href="https://dad-union.com/javascript/146">jquery.countdown.js：設定日からのカウントダウンを表示</a></li>
	</ul>
</div>


<div id="mysagscroller2" class="sagscroller">
	<ul>
	<li><img src="i1.jpg" alt="1" /></li>
	<li><img src="i2.jpg" alt="2" /></li>
	<li><img src="i3.jpg" alt="3" /></li>
	<li><img src="i4.jpg" alt="4" /></li>
	<li><img src="i5.jpg" alt="5" /></li>
	<li><img src="i6.jpg" alt="6" /></li>
	<li><img src="i7.jpg" alt="7" /></li>
	<li><img src="i8.jpg" alt="8" /></li>
	<li><img src="i9.jpg" alt="9" /></li>
	<li><img src="i10.jpg" alt="10" /></li>
	</ul>
</div>
    
</div><!--/idWrap-->