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

 

目录
相关文章
|
2月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
10天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
27 7
|
2月前
|
存储 JSON JavaScript
js中JSON的使用
介绍JSON的基本概念和在JavaScript中的使用方式,包括JSON格式的语法规则、使用`JSON.stringify()`和`JSON.parse()`方法进行对象与字符串的转换,以及处理JSON数组数据。
js中JSON的使用
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
79 2
前端JS读取文件内容并展示到页面上
|
1月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
|
1月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
|
1月前
|
JavaScript
js文字如何轮播?
js文字如何轮播?
13 1
|
1月前
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
63 3
|
2月前
|
XML JSON JavaScript
js的json格式
js的json格式
|
1月前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
55 0