sagscroller.jsを使って文字や画像を自動で縦スクロールする方法｜DAD UNION

sagscroller.jsを使ってリストタグに設定した文字リンクや画像を自動で縦スクロールする方法をご紹介します。

Contents

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

文字と画像2パターンの縦スクロールエリアの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の記述

※文字（id=”mysagscroller”）と画像（id=”mysagscroller2″）の2つのエリアを縦スクロールするように設定しました。オプションでスピードや自動スクロール等の設定が可能です。

<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>

文字と画像2パターンの縦スクロールエリアの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-->