Demo1




Demo2




Demo3




Help

Step1:include css and js files.

<script type="text/javascript" src="js/jquery.js"></script>
<link href="css/webwidget_slideshow_dot.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/webwidget_slideshow_dot.js"></script>

Step2:create slideshow images and text.

<div id="demo1" class="webwidget_slideshow_dot">
<ul>
<li><a href="link1" title="Sky"><img src="images/slideshow_large_1.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
<li><a href="link2" title="Sea"><img src="images/slideshow_large_2.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
<li><a href="link3" title="Flower"><img src="images/slideshow_large_3.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
<li><a href="link4" title="Treelink4"><img src="images/slideshow_large_4.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
</ul>
<div style="clear: both"></div>
</div>

Step3:add script.

<script language="javascript" type="text/javascript">
$(function() {
$("#demo1").webwidget_slideshow_dot({
slideshow_time_interval: '5000',
slideshow_window_width: '200',
slideshow_window_height: '200',
slideshow_title_color: '#17CCCC',
soldeshow_foreColor: '#000',
directory: 'images/'
});
});
</script>

parameter explanatory

slideshow_time_interval: Image interval time (millisecond)
slideshow_window_width: Slideshow window width(px)
slideshow_window_height: Slideshow window height(px)
slideshow_title_color: Title color
directory: Icon image directory