前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS-【同页面多次调用】轮播特效封装-json传多个参数

JS-【同页面多次调用】轮播特效封装-json传多个参数

作者头像
xing.org1^
发布2018-05-17 16:31:30
4.4K0
发布2018-05-17 16:31:30
举报
文章被收录于专栏:前端说吧

看着传那么一长串的参数神烦,继续深化!——json传参:

html:

代码语言:javascript
复制
<div class="scrollBanner">
            <ul class="bannerBox">
                <li><a href="javascript:;"><img src="1.jpg" /></a></li>
                <li><a href="javascript:;"><img src="2.jpg" /></a></li>
                <li><a href="javascript:;"><img src="3.jpg" /></a></li>
                <li><a href="javascript:;"><img src="4.jpg" /></a></li>
                <li><a href="javascript:;"><img src="5.jpg" /></a></li>
                <li><a href="javascript:;"><img src="6.jpg" /></a></li>
            </ul>
            
            <a class="btn leftPrev" title="上一张"></a>
            <a class="btn rightNext" title="下一张"></a>
            <div class="num">
                <span class="current"></span>
                <span class=""></span>
                <span class=""></span>
                <span class=""></span>
                <span class=""></span>
                <span class=""></span>
            </div>
        </div>
        <div class="scrollBanner2">
            <ul class="bannerBox2">
                <li><a href="javascript:;"><img src="1.jpg" /></a></li>
                <li><a href="javascript:;"><img src="2.jpg" /></a></li>
                <li><a href="javascript:;"><img src="3.jpg" /></a></li>
                <li><a href="javascript:;"><img src="4.jpg" /></a></li>
                <li><a href="javascript:;"><img src="5.jpg" /></a></li>
                <li><a href="javascript:;"><img src="6.jpg" /></a></li>
            </ul>
            
            <a class="btn leftPrev2" title="上一张"></a>
            <a class="btn rightNext2" title="下一张"></a>
            <div class="num2">
                <span class="current"></span>
                <span class=""></span>
                <span class=""></span>
                <span class=""></span>
                <span class=""></span>
                <span class=""></span>
            </div>
        </div>

css

代码语言:javascript
复制
*{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            .scrollBanner,.scrollBanner2{
                position: relative;
                overflow: hidden;
                width: 400px;
                height: 320px;
                margin: 0 auto;
            }
            .bannerBox,.bannerBox2{
                position: absolute;
                width: 2400px;
                height: 320px;
            }
            .bannerBox li,.bannerBox2 li{
                float: left;
            }
            .bannerBox li a,.bannerBox2 li a{
                font-size: 60px;
                font-weight: 900;
            }
            .bannerBox li a img,.bannerBox2 li a img{
                width: 400px;
                height: 320px;
                display: block;
            }
            .btn{
                display: inline-block;
                position: absolute;
                top: 50%;
                    width: 54px;
                height: 56px;
                margin-top: -28px;
                background: url('btn.gif') no-repeat;
                opacity: 0.5;
            }
            .btn:hover{
                cursor: pointer;
                opacity: 1;
            }
            .leftPrev,.leftPrev2{
                left: 10px;
                background-position: -7px top;
            }
            .rightNext,.rightNext2{
                right: 10px;
                background-position: left -62px;
            }
            .num,.num2{
                display: inline-block;
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 36px;
                margin-top: -28px;
                text-align: right;
                background-color: rgba(123,123,123,0.8);
            }
            .num span,.num2 span{
                display: inline-block;
                width: 12px;
                background-color: #F18A00;
                height: 12px;
                margin-right: 6px;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                box-sizing: border-box;
            }
            .num span:hover,.current,.num2 span:hover{
                cursor: pointer;
                border: 2px solid #ffd;
            }

js

代码语言:javascript
复制
$(function(){
            var duration;
            var playTime;
//            banner(".scrollBanner li",".bannerBox",".num",".leftPrev",".rightNext")
            banner({
                a : ".scrollBanner li",
                b : ".bannerBox",
                c : ".num",
                d : ".leftPrev",
                e : ".rightNext"
            });
            banner({
                a : ".scrollBanner2 li",
                b : ".bannerBox2",
                c : ".num2",
                d : ".leftPrev2",
                e : ".rightNext2"
            });
        });
        
        banner = function(one){
            
            var $newLi = $(one.a).eq(0).clone();
            $(one.b).append($newLi);
            var $oUL = $(one.b);
            var $oLIs = $oUL.children();
            var $oNavlist = $(one.c).children();
            var $prev = $(one.d);
            var $Next = $(one.e);
            var index = 0;
            var imgLenth = $oLIs.length - 1;
            function xtd(){
                    $Next.on("click",function(){
                    index++;
                    if(index > imgLenth){
                        index = 1;
                        $oUL.css({"left":0+"px"})
                    }
                    move(index);
                })
                $prev.on("click",function(){
                    index--;
                    if(index < 0){
                        index = 2;
                        $oUl.css({"left":-(imgLength)*$oLIs.eq(0).width()+"px"})
                    }
                    move(index);
                })
                
                function move(index){
                    $oUL.stop().animate({
                        "left":index*(-$oLIs.eq(0).width())+"px"
                    },100);
                    $oNavlist.removeClass("current");
                    $oNavlist.eq(index >= imgLenth?0:index).addClass("current");
                }
            }
            xtd()
        }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-02-24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档