News Display with Graphics - Create a news display with graphic images slider. Compatible Browsers: Example: View Code Demo |
<html>
<head>
<title>News Display with Graphics Javascript Code Snippet</title>
<style>
BODY {font-family:verdana,arial,ms sans serif; font-size:90%;}
#news li {font-family:verdana,arial,ms sans serif; font-size:90%; width:200px;
height:300px; /* adjust height to fit text for all slides - so it doesn't expand & shrink accordingly */
overflow: hidden; border:1px solid #000000; list-style-type:none; color:#000000; background:#dddddd; display:none;
box-shadow:0 0 6px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 0 6px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0 0 6px rgba(0, 0, 0, 0.5);
}
#news li img {display:block;}
#news li p {margin:0; padding:3px; font-size:.8em; border-top:1px solid #000;}
</style>
<script>
<!--
// Begin News Display with Graphics
// == This Script Free To Use Providing This Notice Remains ==
// == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library ==
// == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply ==
// == Created by: Fang | http://www.webdeveloper.com/forum/showthread.php?t=191419 Licensed under: Public Domain ==
-->
function postNews() {
aLI=document.getElementById('news').getElementsByTagName('li');
for(var i=0; i<aLI.length; i++) {
aLI[i].style.display="none";
aLI[i].getElementsByTagName('p')[0];
}
rotate(aLI.length-1);
};
var aLI=[];
var timerRUN=null;
var Speed=4000; // change speed as required - each 1000 = 1 second
function rotate(idx) {
aLI[idx].style.display="none";
idx=(idx<aLI.length-1)? ++idx : 0;
aLI[idx].style.display="block";
timerRUN=setTimeout('rotate('+idx+')', Speed);
}
function inView() {
var newsItem=0;
for(var i=0; i<aLI.length; i++) {
if(aLI[i].style.display=="block") {newsItem= i;}
}
return newsItem;
}
// Multiple onload function created by: Simon Willison at http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
postNews();
});
</script>
</head>
<body style="background-color:#ffffff;">
<div><ul id="news">
<li><img src="images/pix1-sm.gif" width="200" height="150" alt="Picture 1">
<p><strong>#1 Mountain Scene</strong><br /><br />This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /><br />[ <a href="#">read more</a> ]</p>
</li>
<li><img src="images/pix2-sm.gif" width="200" height="150" alt="Picture 2">
<p><strong>#2 Mountain Lake</strong><br /><br />This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /><br />[ <a href="#">read more</a> ]</p>
</li>
<li><img src="images/pix3-sm.gif" width="200" height="150" alt="Picture 3">
<p><strong>#3 Lone Mountain Tree</strong><br /><br />This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /><br />[ <a href="#">read more</a> ]</p>
</li>
</ul></div>
<br /><br />
<p>Replace the images with your own... create as many <LI> slides as you need.</p>
<p>Adjust the STYLES ' #news {height:300px; ' to fit the largest <LI> text so that the slides are uniform in size.</p>
<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_46.html">News Display with Graphics</a> page. ]
</div>
</body>
</html>
|
Scroll