jQuery图片轮播加悬停效果

查看演示立即下载

插件描述：jQuery图片轮播加悬停效果

=======以下内容由会员只看不发了提供============

使用方法

1.将文档内内部样式表保存到目录css下的style.css文件中，并在页面中链接到这个样式表文件

1	`<link` `rel="stylesheet"` `type="text/css"` `href="css/style.css"` `media="screen"` `/>`

2.添加jquery.SuperSlide2.js

<script type="text/javascript" src="js/jquery.SuperSlide2.js"></script>

3.添加图片效果js（可根据实际情况整理到外部js文件中）

$(document).ready(function () {
     
    /* 图片滚动效果 */
    $(".mr_frbox").slide({
        titCell: "",
        mainCell: ".mr_frUl ul",
        autoPage: true,
        effect: "leftLoop",
        autoPlay: true,
        vis: 4
    });
     
    /* 鼠标悬停图片效果 */
    $(".mr_zhe_hover").css("top", $('.mr_zhe').eq(0).height());
    $("li").mouseout(function (e) {
        if ((e.pageX < $(this).offset().left || e.pageX > ($(this).offset().left + $(this).width())) || (e.pageY < $(this).offset().top || e.pageY > ($(this).offset().top + $(this).height()))) {
            $(this).find('.mr_zhe_i').show();
            $(this).find('.mr_zhe_hover').hide().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
            return false;
        }
 
    });
    $('.mr_zhe').mouseover(function (event) {
        $(this).find('.mr_zhe_i').hide();
        $(this).find('.mr_zhe_hover').show().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
        return false;
    });
     
});

4.html部分

<div class="friend">
    <div class="mr_frbox">
        <img class="mr_frBtnL prev" src="images/mfrl.gif" />
        <div class="mr_frUl">
            <ul id="mr_fu">
                <li><a href="/">
                    <img src="images/i.jpg" />
                </a>
                    <div class="mr_zhe">
                        <div class="mr_zhe_i">
                            <h1>
                                I</h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                        <div class="mr_zhe_hover">
                            <h1>
                                <img src="images/plus.gif"></h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="/">
                    <img src="images/i2.jpg" />
                </a>
                    <div class="mr_zhe">
                        <div class="mr_zhe_i">
                            <h1>
                                E</h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                        <div class="mr_zhe_hover">
                            <h1>
                                <img src="images/plus.gif"></h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="/">
                    <img src="images/i3.jpg" />
                </a>
                    <div class="mr_zhe">
                        <div class="mr_zhe_i">
                            <h1>
                                S</h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                        <div class="mr_zhe_hover">
                            <h1>
                                <img src="images/plus.gif"></h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="/">
                    <img src="images/i4.jpg" />
                </a>
                    <div class="mr_zhe">
                        <div class="mr_zhe_i">
                            <h1>
                                A</h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                        <div class="mr_zhe_hover">
                            <h1>
                                <img src="images/plus.gif"></h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <img class="mr_frBtnR next" src="images/mfrr.gif" />
    </div>
</div>

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： Easy validate修改版
下一个特效：满屏花瓣