使用jq.orbit.js插件制作一个漂亮的旋转木马效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

什么是jq.orbit.js

jq.orbit.js是一个基于 jQuery 的幻灯片插件，jq.orbit.js可以制作带缩略图的幻灯片，并且它还具有计时器这个特别的功能，orbit幻灯片内容可以是图片也可以是视频或者是div等其他内容。 本文介绍使用orbit制作旋转木马效果。

引入文件

首先引入css和jquery .js

<link href="css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery/1.10.2/jquery.min.js"></script>

制作html

<div class="jqfree">
    <div class="container">
        <div id="pics" class="orbit">
            <a href="#">
                <img src="images/1.jpg" />
            </a><a href="#">
                <img src="images/2.jpg"></a> <a href="#">
                    <img src="images/3.jpg"></a> <a href="#">
                        <img src="images/4.jpg"></a> <a href="#">
                            <img src="images/5.jpg"></a>
        </div>
    </div>
</div>

调用js文件

<script type="text/javascript" src="js/jq.orbit.js"></script>
<script>
    $('#pics').orbit({
        frontendWidth: 397,		//frontend Img Width
        frontendHeight: 300,
        frontendBorder: '1px solid #d9d9d9',
        frontendLeft: 270,  //第一张左边距
        backendWidth: 350, //第一个背景图片宽度
        backendTop: 20,	//backend Img  1 Position
        backendLeft: 110, //backend Img  1 left
        backendLeft3: 480, //backend Img  1 rgiht
        backendBorder: '1px solid #d9d9d9',	 
        backendWidth2: 300, //backend Img Width 2
        backendTop2: 40,	// backend Img Position 2      
        backendLeft4: 645,// backend Img Position right 
        backendLeft2: 0, //backend Img Position left
        backendBorder2: '1px solid #d9d9d9',
        sceneWidth: 950,
        sceneHeight: 300,
    });
</script>

主要参数

  • frontendWidth:第一张图片宽度

  • frontendHeight:第一张图片高度

  • frontendBorder:第一张图片边框css

  • frontendLeft:第一张图片左边距

  • backendWidth:第一个背景图片宽度

  • backendTop:第一个背景图片Position top

  • backendLeft:第一个背景图片Position left