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

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

添加时间:2021-02-10 19:33:28
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:图片轮播
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

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

分类:图片代码 > 图片轮播 难易:初级
<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="https://jy.tp.yuanmeng.life/"><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="https://jy.tp.yuanmeng.life/"><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="https://jy.tp.yuanmeng.life/"><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;
    }
}
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:jQuery适合企业站产品展示的焦点轮播图

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.099102s