Demo Online
Bước 1: Chèn đoạn mã dưới đây vào trong <head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="sagscroller.css" />
<script src="sagscroller.js">
/***********************************************
* DOTNET GROUP
* Visit http://dotnet.edu.vn
* Please keep this notice intact
***********************************************/
</script>
<style type="text/css">
/* #SAG scroller demo #1 */
div#mysagscroller{
width: 200px; /*width of scroller*/
height:250px;
}
div#mysagscroller ul li{
background:navy;
color:white;
padding:5px;
margin-bottom:5px; /*bottom spacing between each LI*/
}
div#mysagscroller ul li:first-letter{
font-size:28px;
background:white;
color:black;
padding:0 2px;
margin-right:2px;
}
/* #SAG scroller demo #2 */
div#mysagscroller2{
width: 250px; /*width of scroller*/
height:300px;
border:7px solid #C0C0C0;
}
div#mysagscroller2 ul li img{
border-width:0;
display:block; /*this causes each image to be flush against each other*/
}
</style>
<script>
//SAG scroller demo #1:
var sagscroller1=new sagscroller({
id:'mysagscroller',
mode: 'manual' //<--no comma following last option
})
//SAG scroller demo #2:
var sagscroller2=new sagscroller({
id:'mysagscroller2',
mode: 'auto',
pause: 2500,
animatespeed: 400 //<--no comma following last option
})
</script>
Bước 2:
Bước 3:
Chèn đoạn Code sau vào phần BODY, để hiển thị:
<div id="mysagscroller" class="sagscroller">
<li>Ajax is a group of interrelated web development techniques used on the client-side to create interactive web applications.</li>
<li>XML's design goals emphasize simplicity, generality, and usability over the Internet.</li>
<li>SVG and HTML5's canvas element allow for the creation of simple graphical objects using programming.</li>
<li>The new audio and video elements of HTML5 offer an alternative to flash for embedding multimedia on the web.</li>
<li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
</ul>
</div>
<br />
<div id="mysagscroller2" class="sagscroller">
<li><a href="#"><img src="http://i29.tinypic.com/xp3hns.jpg" /></a></li>
<li><a href="#"><img src="http://i26.tinypic.com/11l7ls0.jpg" /></a></li>
<li><a href="#"><img src="http://i31.tinypic.com/119w28m.jpg" /></a></li>
<li><a href="#"><img src="http://i27.tinypic.com/34fcrxz.jpg" /></a></li>
</ul>
</div>