Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 182 lines (178 sloc) 13.2 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Demo</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
</head><body>
<link href="css/webwidget_slideshow_common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/webwidget_slideshow_common.js"></script>
<h2>Demo1</h2><br>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_slideshow_common1").webwidget_slideshow_common({
slideshow_transition_effect: 'slide_down',//slide_left slide_down fade_in
slideshow_time_interval: '4000',
slideshow_window_width: '300',
slideshow_window_height: '23',
slideshow_border_style: 'solid',//dashed dotted double groove hidden inset none outset ridge solid
slideshow_border_size: '0',
slideshow_border_color: '#000',
slideshow_border_radius: '5',
slideshow_padding_size: '3',
soldeshow_background_color: '#CCC'
});
});
</script>
<div id="webwidget_slideshow_common1" class="webwidget_slideshow_common">
<ul>
<li><a style="padding-left:5px;" href="link1" title="Link1"> Link1 Link1 Link1 Link1 Link1</a></li>
<li><a style="padding-left:5px;" href="link2" title="Link2"> Link2 Link2 Link2 Link2 Link2</a></li>
<li><a style="padding-left:5px;" href="link3" title="Link3"> Link3 Link3 Link3 Link3 Link3</a></li>
<li><a style="padding-left:5px;" href="link4" title="Link4"> Link4 Link4 Link4 Link4 Link4</a></li>
</ul>
<div style="clear: both"></div>
</div>
<br>
<br>
<h2>Demo2</h2><br>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_slideshow_common2").webwidget_slideshow_common({
slideshow_transition_effect: 'slide_left',//slide_left slide_down fade_in
slideshow_time_interval: '3000',
slideshow_window_width: '150',
slideshow_window_height: '110',
slideshow_border_style: 'none',//dashed dotted double groove hidden inset none outset ridge solid
slideshow_border_size: '1',
slideshow_border_color: '#000',
slideshow_border_radius: '10',
slideshow_padding_size: '10',
soldeshow_background_color: 'blue'
});
});
</script>
<div id="webwidget_slideshow_common2" class="webwidget_slideshow_common">
<ul>
<li><a style="line-height:17px;color:#F4F4F4;text-decoration:none;" href="link1" title="Title1">Title1</a><p style="color:#CCC;">description description description description description description description description</p></li>
<li><a style="line-height:17px;color:#F4F4F4;text-decoration:none;" href="link2" title="Title2">Title2</a><p style="color:#CCC;">description description description description description description description description</p></li>
<li><a style="line-height:17px;color:#F4F4F4;text-decoration:none;" href="link3" title="Title3">Title3</a><p style="color:#CCC;">description description description description description description description description</p></li>
<li><a style="line-height:17px;color:#F4F4F4;text-decoration:none;" href="link4" title="Title4">Title4</a><p style="color:#CCC;">description description description description description description description description</p></li>
</ul>
<div style="clear: both"></div>
</div>
<br><br>
<h2>Demo3</h2><br>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_slideshow_common3").webwidget_slideshow_common({
slideshow_transition_effect: 'fade_in',//slide_left slide_down fade_in
slideshow_time_interval: '6000',
slideshow_window_width: '150',
slideshow_window_height: '150',
slideshow_border_style: 'solid',//dashed dotted double groove hidden inset none outset ridge solid
slideshow_border_size: '2',
slideshow_border_color: '#000',
slideshow_border_radius: '5',
slideshow_padding_size: '10',
soldeshow_background_color: '#666'
});
});
</script>
<div id="webwidget_slideshow_common3" class="webwidget_slideshow_common">
<ul>
<li><a style="line-height:17px;color:#F4F4F4;text-decoration:none;" href="link1" title="Title1"><img border="0" src="images/slideshow_large_1.jpg" width="130" height="110" /><br/>Title1</a></li>
<li><a style="line-height:17px;color:#F4F4F4;text-decoration:none;" href="link2" title="Title2"><img border="0" src="images/slideshow_large_2.jpg" width="130" height="110" /><br/>Title2</a></li>
<li><a style="line-height:17px;color:#F4F4F4;text-decoration:none;" href="link3" title="Title3"><img border="0" src="images/slideshow_large_3.jpg" width="130" height="110" /><br/>Title3</a></li>
<li><a style="line-height:17px;color:#F4F4F4;text-decoration:none;" href="link4" title="Title4"><img border="0" src="images/slideshow_large_4.jpg" width="130" height="110" /><br/>Title4</a></li>
</ul>
<div style="clear: both"></div>
</div>
<br><br>
<h2>Demo4</h2><br/><br/>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_slideshow_common4").webwidget_slideshow_common({
slideshow_transition_effect: 'slide_down',//slide_left slide_down fade_in
slideshow_time_interval: '3500',
slideshow_window_width: '150',
slideshow_window_height: '270',
slideshow_border_style: 'solid',//dashed dotted double groove hidden inset none outset ridge solid
slideshow_border_size: '2',
slideshow_border_color: '#000',
slideshow_border_radius: '0',
slideshow_padding_size: '10',
soldeshow_background_color: 'transparent'
});
});
</script>
<div id="webwidget_slideshow_common4" class="webwidget_slideshow_common">
<ul>
<li><a style="line-height:17px;color:#666;text-decoration:none;" href="link1" title="Title1"><img border="0" src="images/slideshow_large_1.jpg" width="130" height="110" /><br/>Title1<br/><img border="0" src="images/slideshow_large_1.jpg" width="130" height="110" /><br/>Title1</a></li>
<li><a style="line-height:17px;color:#666;text-decoration:none;" href="link2" title="Title2"><img border="0" src="images/slideshow_large_2.jpg" width="130" height="110" /><br/>Title2<br/><img border="0" src="images/slideshow_large_2.jpg" width="130" height="110" /><br/>Title2</a></li>
<li><a style="line-height:17px;color:#666;text-decoration:none;" href="link3" title="Title3"><img border="0" src="images/slideshow_large_3.jpg" width="130" height="110" /><br/>Title3<br/><img border="0" src="images/slideshow_large_3.jpg" width="130" height="110" /><br/>Title3</a></li>
<li><a style="line-height:17px;color:#666;text-decoration:none;" href="link4" title="Title4"><img border="0" src="images/slideshow_large_4.jpg" width="130" height="110" /><br/>Title4<br/><img border="0" src="images/slideshow_large_4.jpg" width="130" height="110" /><br/>Title4</a></li>
</ul>
<div style="clear: both"></div>
</div>
<br/><br/>
<h2>Demo5</h2><br/><br/>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_slideshow_common5").webwidget_slideshow_common({
slideshow_transition_effect: 'slide_left',//slide_left slide_down fade_in
slideshow_time_interval: '3500',
slideshow_window_width: '285',
slideshow_window_height: '125',
slideshow_border_style: 'dotted',//dashed dotted double groove hidden inset none outset ridge solid
slideshow_border_size: '1',
slideshow_border_color: 'red',
slideshow_border_radius: '5',
slideshow_padding_size: '5',
soldeshow_background_color: 'transparent'
});
});
</script>
<div id="webwidget_slideshow_common5" class="webwidget_slideshow_common">
<ul>
<li><a style="line-height:17px;color:#FFF;text-decoration:none;" href="link1" title="Title1"><img style="border:3px solid white;" src="images/slideshow_large_1.jpg" width="130" height="110" /><img style="border:3px solid white;" src="images/slideshow_large_1.jpg" width="130" height="110" /></a></li>
<li><a style="line-height:17px;color:#FFF;text-decoration:none;" href="link2" title="Title2"><img style="border:3px solid white;" src="images/slideshow_large_2.jpg" width="130" height="110" /><img style="border:3px solid white;" src="images/slideshow_large_2.jpg" width="130" height="110" /></a></li>
<li><a style="line-height:17px;color:#FFF;text-decoration:none;" href="link3" title="Title3"><img style="border:3px solid white;" src="images/slideshow_large_3.jpg" width="130" height="110" /><img style="border:3px solid white;" src="images/slideshow_large_3.jpg" width="130" height="110" /></a></li>
<li><a style="line-height:17px;color:#FFF;text-decoration:none;" href="link4" title="Title4"><img style="border:3px solid white;" src="images/slideshow_large_4.jpg" width="130" height="110" /><img style="border:3px solid white;" src="images/slideshow_large_4.jpg" width="130" height="110" /></a></li>
</ul>
<div style="clear: both"></div>
</div>
<br/><br/>
<h2>Help</h2>
<h4>Step1:include css and js files.</h4>
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;<br />
&lt;link href=&quot;css/webwidget_slideshow_common.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;js/webwidget_slideshow_common.js&quot;&gt;&lt;/script&gt;<br/>
<h4>Step2:create slideshow images and text.</h4>
<p>&lt;div id=&quot;<span style="color:red;">webwidget_slideshow_common</span>&quot; class=&quot;webwidget_slideshow_common&quot;&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a style=&quot;line-height:17px;color:#F4F4F4;text-decoration:none;&quot; href=&quot;link1&quot; title=&quot;Title1&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;images/slideshow_large_1.jpg&quot; width=&quot;130&quot; height=&quot;110&quot; /&gt;&lt;br/&gt;Title1&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a style=&quot;line-height:17px;color:#F4F4F4;text-decoration:none;&quot; href=&quot;link2&quot; title=&quot;Title2&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;images/slideshow_large_2.jpg&quot; width=&quot;130&quot; height=&quot;110&quot; /&gt;&lt;br/&gt;Title2&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a style=&quot;line-height:17px;color:#F4F4F4;text-decoration:none;&quot; href=&quot;link3&quot; title=&quot;Title3&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;images/slideshow_large_3.jpg&quot; width=&quot;130&quot; height=&quot;110&quot; /&gt;&lt;br/&gt;Title3&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a style=&quot;line-height:17px;color:#F4F4F4;text-decoration:none;&quot; href=&quot;link4&quot; title=&quot;Title4&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;images/slideshow_large_4.jpg&quot; width=&quot;130&quot; height=&quot;110&quot; /&gt;&lt;br/&gt;Title4&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;div style=&quot;clear: both&quot;&gt;&lt;/div&gt;<br />
&lt;/div&gt;</p>
<h4>Step3:add script.</h4>
<p>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;<br />
$(function() {<br />
$(&quot;#<span style="color:red;">webwidget_slideshow_common</span>&quot;).webwidget_slideshow_common({<br />
slideshow_transition_effect: 'fade_in',//option: slide_left,slide_down,fade_in<br />
slideshow_time_interval: '6000',<br />
slideshow_window_width: '150',<br />
slideshow_window_height: '150',<br />
slideshow_border_style: 'solid',//option: dashed dotted double groove hidden inset none outset ridge solid<br />
slideshow_border_size: '2',<br />
slideshow_border_color: '#000',<br />
slideshow_border_radius: '5',<br />
slideshow_padding_size: '10',<br />
soldeshow_background_color: '#666'<br />
});<br />
});<br />
&lt;/script&gt;</p>
</body></html>