摘要和图片向不同方向滑动的jquery幻灯特效 效果超酷
时间:2010-07-01 来源:酷站代码
2.在<body>区依次加入以下代码
幻灯图片代码示例
<div id="contentRight"> <div style="visibility: visible; overflow: hidden; left: 0px; height: 780px;" class="showcaseImages"> <ul style="height: 2600px; top: -1040px;"> <li style="float: none;width: 500px; height: 260px;"> <div class="item"><a href="http://www.5icool.org"><img src="images/rockable_t.jpg" alt="Rockable Press" height="244" width="494"></a></div></li> <li style="float: none; width: 500px; height: 260px;"> <div class="item"><a href="http://www.5icool.org"><img src="images/tuts_t.jpg" alt="Tuts+ Mad Skills" height="244" width="494"></a></div></li> 。。。(完整样式见源文件) </div>
摘要代码示例
<div id="contentLeft"> <div style="visibility: visible; overflow: hidden; left: 0px; width: 480px;" class="showcaseTexts"> <ul style="width: 2880px; left: -1440px;"> <li style="float: left;width: 480px; height: 250px;"> <div class="item"><h2><a href="http://tavshan.com/demo/wordfolio/?p=24">App Storm</a></h2> <p>Write the description of the post to the excerpt input. The speed of showcase is editable from admin panel. Phasellus felis ipsum, hendrerit quis, blandit eget, tincidunt eu, elit. Maecenas eget leo non ante commodo mollis. Cras rutrum congue ante.</p> <p>Web Address : <a href="#">www.5icool.org</a></p> <p class="readMore fS10"><a href="http://www.5icool.org">READ MORE</a></p> </div></li> 。。。(完整样式见源文件) </div>
JS控制代码
<script type="text/javascript">
function loadCarouselLite() {
$(".showcaseImages").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 3,
vertical: true,
auto: 5000,
speed: 500
});
$(".showcaseTexts").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 1,
auto: 5000,
speed: 500,
btnGo:
['goto1', '.goto2']
});
$('.goto2').click();
}
function gotoPrev() {
$('.prev').click();
}
function hideLoading() {
$('.loading').fadeOut();
}
$(document).ready(function() {
if ($.browser.msie && $.browser.version=="6.0") {
$('.loading').css({
'width': $(window).width(),
'height': $(window).height()
});
$('.loading img').css({
'left': '50%',
'top': '50%',
'margin' : '-10px 0px 0px -110px'
});
}
setTimeout("loadCarouselLite()", 1000);
setTimeout("gotoPrev()", 2000);
setTimeout("hideLoading()", 2500);
});
</script>
- 栏目搜索>>分类导航
-
Flash幻灯
jQuery幻灯
JS幻灯
Flash相册
jQuery相册
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
-
HTML
CSS
JavaScript
Dreamweaver
Fireworks
设计分享
- 建站教程 网站运营 实用工具 网页模板 网页素材
-
CSS酷站
网上购物
设计团队
设计博客
-
- 下载排行榜
- 带标题和数字导航的JS焦点幻灯特效代码
- 31款简单实用的CSS+JS下拉菜单脚本
- 半透明立体质感的宽屏flash+xml焦点幻灯代码
- 简洁效果多图切换flash幻灯焦点图代码
- 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码
- 透明质感上下滑动带小图预览5屏JS焦点图幻...
- 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码
- 3D立体效果金字塔环形旋转的flash+xml相册代码




