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

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

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

html:

<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

*{
                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

$(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()
        }

 

目录
相关文章
|
1月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
35 5
|
1月前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
16天前
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
16 4
JavaScript基础知识-函数的参数
|
9天前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
25天前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
27天前
|
JavaScript
js文字如何轮播?
js文字如何轮播?
22 2
|
27天前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
29 2
|
27天前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
27 2
|
29天前
|
JSON JavaScript 前端开发
JavaScript JSON
JavaScript JSON
|
29天前
|
JSON C语言 数据格式
Python导出隐马尔科夫模型参数到JSON文件C语言读取
Python导出隐马尔科夫模型参数到JSON文件C语言读取
17 1