jQuery Slidorion插件图片新闻焦点图和手风琴结合图片切换展示



173 689 230



特效描述:jQuery Slidorion 焦点图 手风琴 图片切换,jQuery Slidorion插件图片切换,制作图片新闻焦点图片切换和竖直手风琴两种特效结合的图片切换效果。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/slidorion.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.slidorion.min.js"></script>

3. HTML代码

<div id="header"><h1>SLIDORION</h1></div>
<div id="topmenu">
	<ul>
		<li class="active"><a href="demo.html">实例一</a></li>
		<li><a target="_blank" href="fullscreen-demo.html">实例二</a></li>
		<li><a href="slidorion-background-demo.html">实例三</a></li>
		<li><a href="slidorion-basic-demo.html">实例四</a></li>
		<li><a href="slidorion-multiple-demo.html">实例五</a></li>  
		<li><a href="slidorion-navigation.html">实例六</a></li>
		<li><a href="slidorion-overrandom-demo.html">实例七</a></li>
		<li><a href="slidorion-random-demo.html">实例八</a></li>
		<li><a href="slidorion-sliderandom-demo.html">实例九</a></li>   
	</ul>
</div>
<div id="slidorion">
	<div id="slider">
		<div id="slide1" class="slide"><a href="http://www.dijiuzhanzhang.com"><img src="img/spiderman.jpg" width="488" height="400" alt="jsfoot" /></a></div>
		<div id="slide2" class="slide"><a href="http://www.dijiuzhanzhang.com"><img src="img/kick-ass.jpg" width="488" height="400" alt="jsfoot" /></a></div>
		<div id="slide3" class="slide"><a href="http://www.dijiuzhanzhang.com"><img src="img/hot-fuzz.jpg" width="488" height="400" alt="jsfoot" /></a></div>
	</div>
	<div id="accordion">
		<div class="link-header">新功能</div>
		<div class="link-content">
			<p><strong>Slidorion</strong>最近添加可一些新的功能。</p>
			<p>目前,它<strong>支持HTML</strong>而不仅仅是图像, 提高的可用性Slidorion的特定。</p>
			<p>已添加了一些新的效果,最重要的<strong>平移和缩放</strong>! 随着性能升级和重要的<strong>bug修复</strong>。</p>
		</div>
		<div class="link-header">嵌入图像</div>
		<div class="link-content">
			<p>蝙蝠侠提高了赌注在他的战争犯罪。中尉吉姆·戈登和地区检察官哈维·登特的帮助下,蝙蝠侠拆除余下的犯罪组织,困扰着城市的街道。但他们很快就发现自己的猎物所释放出一个上升的犯罪主谋小丑吓坏了公民的Gotham混乱的统治。</p>
			<a href="http://www.imdb.com/title/tt0468569/">阅读更多</a>
		</div>
		<div class="link-header">当前高亮</div>
		<div class="link-content">
			<p>伦敦的警察,天使PC尼古拉斯是不错的。太美好了。停止他的团队寻找坏的其余部分,他被重新分配到安静的小镇桑福德。一切似乎都安静的天使,直到两位演员被发现身首异处。这就是所谓的事故,但天使是不会接受的,尤其是当越来越多的人将死了。</p>
			<a href="http://www.imdb.com/title/tt0425112/">阅读更多</a>
		</div>
	</div>
</div><!--slidorion end-->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript">
$(function() {
	$('#slidorion').slidorion({
		first: 2,
		autoPlay: true,
		easing: 'easeInOutCubic',
		effect: 'random'
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滑动选项卡 滑动切换 滚动切换 滚动条切换 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 flash焦点图 flash幻灯片 flashbanner flash图片轮播 自动滚动图片轮播 叠加浮动层 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 层叠叠加 叠加层叠 层叠 叠加 加载更多 焦点图 幻灯片 轮播图 bar焦点图 图片叠加 图片层叠 滚动切换 滚动条切换 图片切换 图片选项卡 图标选项卡 纯图片轮播 图片轮播 滑动手风琴 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到