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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

<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.erdangjiade.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.erdangjiade.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.erdangjiade.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;
    }
}