首页 > 网页特效 > jQuery幻灯 > 摘要和图片向不同方向滑动的jquery幻灯特效效果超酷

摘要和图片向不同方向滑动的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>

相关热词：jquery幻灯 JS幻灯 jQuery

收藏至我的帐号

点击下载

下载排行榜: 带标题和数字导航的JS焦点幻灯特效代码; 31款简单实用的CSS+JS下拉菜单脚本; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 3D立体效果金字塔环形旋转的flash+xml相册代码

教程排行榜: 去掉discuz论坛中forum.php最全的方法分享; QQ、淘宝、MSN、Skype在线状态代码生成方法; 10个Web开发者必备的优秀线框工具推荐; 国外十五款优秀的免费开源电子商务平台; wordpress实现调用单页功能的简易教程; 22个网页设计师必备的在线色彩组合配色工具; 10个网页设计web开发常用的一些免费小工具推荐; nginx的php-fpm参数配置优化调整方法总结

摘要和图片向不同方向滑动的jquery幻灯特效 效果超酷

摘要和图片向不同方向滑动的jquery幻灯特效效果超酷