News Display with Graphics - Create a news display with graphic images slider.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser
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>