jQuery适合企业站产品展示的焦点轮播图

分享一款动画效果的全屏焦点图广告轮播，点击小图标可切换对应大图片，以动画效果显示大图片。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

<div class="banner-img absolute">
    <div class="relative">
        <div class="leftimg left1" moveInDerection="6" moveInSpeed="1000" moveInType="linear" fadeInSpeed="1000" fadeInType="linear" moveOutDerection="2" moveOutSpeed="1000" moveOutType="linear" fadeOutSpeed="1000" fadeOutType="linear">
            <a href="http://www.sucaihuo.com"><img width="343" height="420" src="images/bannerindex-5/text.png" alt="盈峰资本网站建设上线"/></a>
        </div>
        <div class="rightimg right1" moveInDerection="2" moveInSpeed="1000" moveInType="linear" fadeInSpeed="1000" fadeInType="linear" moveOutDerection="2" moveOutSpeed="1000" moveOutType="linear" fadeOutSpeed="1000" fadeOutType="linear">
            <a href="http://www.sucaihuo.com"><img width="742" height="386" src="images/bannerindex-5/pic.png" alt="盈峰资本网站建设上线"/></a>
        </div>

        <div class="leftimg left2" moveInDerection="7" moveInSpeed="1000" moveInType="linear" fadeInSpeed="1000" fadeInType="linear" moveOutDerection="7" moveOutSpeed="700" moveOutType="linear" fadeOutSpeed="700" fadeOutType="linear">
            <a href="http://www.sucaihuo.com"><img width="343" height="420" src="images/bannerindex-2/text.png" alt="深中润投资控股网站改版"/></a>
        </div>
    </div>
</div>
<ul class="banner-bt absolute">
    <li><a class="pointer" target="1"><span class="ico" style="background-image:url('images/bannerindex-5/icon.png')"></span></a></li>
    <li><a class="pointer" target="2"><span class="ico" style="background-image:url('images/bannerindex-2/icon.png')"></span></a></li>
    <li><a class="pointer" target="3"><span class="ico" style="background-image:url('images/bannerindex-1/icon.png')"></span></a></li>
</ul>

function getInDirectionTween(e, moveDirecrion, moveInSpeed, moveInType) {
    moveInSpeed = parseInt(moveInSpeed);
    e.css("opacity", "0");
    switch (moveDirecrion) {
        case'0':
            e.css("left", "0").css("top", "0");
            e.animate({"left": "0", "opacity": "1"}, {
                duration: moveInSpeed, easing: moveInType
            });
            break;
        case'1':
            e.css("left", "0").css("top", "-460px");
            e.animate({"top": "0", "opacity": "1"}, {
                duration: moveInSpeed, easing: moveInType
            });
            break;
        case'2':
            e.css("left", "460px").css("top", "-460px");
            e.animate({"top": "0", "left": "0", "opacity": "1"}, {
                duration: moveInSpeed, easing: moveInType
            });
            break;
        case'3':
            e.css("left", "460px").css("top", "0");
            e.animate({"left": "0", "opacity": "1"}, {
                duration: moveInSpeed, easing: moveInType
            });
            break;
        case'4':
            e.css("left", "460px").css("top", "460px");
            e.animate({"left": "0", "top": "0", "opacity": "1"}, {
                duration: moveInSpeed, easing: moveInType
            });
            break;
        case'5':
            e.css("left", "0").css("top", "460px");
            e.animate({"top": "0", "opacity": "1"}, {
                duration: moveInSpeed, easing: moveInType
            });
            break;
        case'6':
            e.css("left", "-460px").css("top", "460px");
            e.animate({"left": "0", "top": "0", "opacity": "1"}, {
                duration: moveInSpeed, easing: moveInType
            });
            break;
        case'7':
            e.css("left", "-460px").css("top", "0");
            e.animate({"left": "0", "opacity": "1"}, {
                duration: moveInSpeed, easing: moveInType
            });
            break;
        case'8':
            e.css("left", "-460px").css("top", "-460px");
            e.animate({"left": "0", "top": "0", "opacity": "1"}, {
                duration: moveInSpeed, easing: moveInType
            });
            break;
    }
}