jquery slideshow.js淡出淡进图片轮播切换特效代码下载


jquery slideshow.js淡出淡进图片轮播切换特效代码下载
jquery slideshow.js淡出淡进图片轮播切换特效代码下载以及淡出淡进、图片轮播切换等js/jquery网页特效代码下载。

1. 引入CSS

<link href="css/slideshow_buttontitle.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/slideshow_buttontitle.js"></script>

3. HTML代码

<script language="javascript" type="text/javascript">
$(function() {
	$("#slideshow1").slideshow_buttontitle({
		time_interval: '3000',
		window_background_color: "#FFF",
		window_padding: '1',
		window_width: '300',
		window_height: '250',
		border_size: '1',
		border_color: 'black',
		title_text_color: 'white',
		title_background_color: '#42AEC2',
		button_color: '#84C5D2',
		button_current_color: '#2C7E8F',
		button_size: '15'
	});
	$("#slideshow2").slideshow_buttontitle({
		time_interval: '2000',
		window_background_color: "#FFF",
		window_padding: '2',
		window_width: '200',
		window_height: '150',
		border_size: '2',
		border_color: '#9C0',
		title_text_color: '#000',
		title_background_color: '#9C0',
		button_color: '#9C0',
		button_current_color: '#9F0',
		button_size: '10'
	});
});
</script>
<div style="width:320px;margin:0 auto;">
	<div id="slideshow1" class="slideshow_buttontitle">
		<ul>
			<li><a href="#" title="title1"><img src="images/slideshow_large_1.jpg" alt="slideshow_large"/></a></li>
			<li><a href="#" title="title2"><img src="images/slideshow_large_2.jpg" alt="slideshow_large"/></a></li>
			<li><a href="#" title="title3"><img src="images/slideshow_large_3.jpg" alt="slideshow_large"/></a></li>
			<li><a href="#" title="title4"><img src="images/slideshow_large_4.jpg" alt="slideshow_large"/></a></li>
		</ul>
		<div class="slideshow_simple1_title">
		</div>
		<ul class="slideshow_simple1_nav">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div style="clear: both"></div>
	</div>
	<div style="height:30px;"></div>
	<div id="slideshow2" class="slideshow_buttontitle">
		<ul>
			<li><a href="#" title="title1"><img src="images/slideshow_large_1.jpg" alt="slideshow_large"/></a></li>
			<li><a href="#" title="title2"><img src="images/slideshow_large_2.jpg" alt="slideshow_large"/></a></li>
			<li><a href="#" title="title3"><img src="images/slideshow_large_3.jpg" alt="slideshow_large"/></a></li>
			<li><a href="#" title="title4"><img src="images/slideshow_large_4.jpg" alt="slideshow_large"/></a></li>
		</ul>
		<div class="slideshow_simple1_title">
		</div>
		<ul class="slideshow_simple1_nav">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div style="clear: both"></div>
	</div>
</div>

相关推荐

发表评论

相关文章