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 |