PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > Jquery插件 > jQuery弹出层 > 正文

    jquery图片轮播90°旋转过渡效果插件jquery.rotate.js

    作者:admin来源:B5教程网浏览:时间:2014-04-28 14:10:01我要评论
    分享到

    内容介绍

    本插件可以对网页内的普通图片进行旋转,有相当丰富的参数可以进行设置,可以设定旋转的方向,旋转的角度,还可以设定鼠标事件,当鼠标滑过时动态旋转,非常棒。
    图片90°旋转过渡的jquery轮播效果。点击左右按钮,图片会旋转90°并且渐隐,然后下一张或上一张会渐显。图片的旋转不会导致图片角度的改变,仍然正确显示。
    使用方法:
    1、引入下面的css
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    2、引入下面的js和jQuery:
    <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.rotate.js"></script>
    <script src="js/script.js"></script>
    3、在html的body里面加入下面的html代码:
    <div id="slideShowContainer">
        <div id="slideShow">
            <ul>
                <li><img src="img/photos/1.jpg" width="100%" alt="Fish" /></li>
                <li><img src="img/photos/2.jpg" width="100%" alt="Ancient" /></li>
                <li><img src="img/photos/3.jpg" width="100%" alt="Industry" /></li>
                <li><img src="img/photos/4.jpg" width="100%" alt="Rain" /></li>
            </ul>
            </div>   
        <a id="previousLink" href="#">&raquo;</a>
        <a id="nextLink" href="#">&laquo;</a>
    </div>
     
    下载资源:188 下载积分:0
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-88-163-1.html
    相关热词搜索: 图片轮播 rotate 旋转 过渡