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

看着传那么一长串的参数神烦,继续深化!——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()
        }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

Web 前端常用专有名词的正确拼写

本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

15720
来自专栏快乐八哥

jQuery UI Datepicker使用介绍

本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件。jQuery UI带的Datepicker,日历控...

29650
来自专栏WindCoder

Android学习笔记-控件初体验

python为自己自学的,现仍处于初级阶段,这学期开启的是javaEE和Android开发,所以今后可能会同时出现这些方面的总结内容。

8710
来自专栏GIS讲堂

共享个地图控件的样式

源代码下载地址:http://download.csdn.net/detail/gisshixisheng/9008937

19620
来自专栏菩提树下的杨过

silverlight数据绑定模式TwoWay,OneWay,OneTime的研究

asp.net开发中,数据绑定是一个很简单的概念,控件与数据绑定后,控件可以自动把数据按一定的形式显示出来。(当然控件上的值改变后,可以通过提交页面表单,同时后...

24160
来自专栏Bug生活2048

.net core下对于Excel的一些操作及使用

对于后台相关的管理系统,Excel导出是基本的功能,下面就简单说下实现该功能的代码实现吧

19820
来自专栏前端说吧

JS-鼠标经过显示二级菜单

574100
来自专栏Python攻城狮

Selenium 的使用1.网站模拟登录2.动态页面模拟点击3.执行 JavaScript 语句

8320
来自专栏Create Sun

【.net+jquery】绘制自定义表单(含源码)

前言   两年前的时候就想做一个类似的功能,当时思路大家都讨论好了,诸多原因最终还是夭折了。没想到两年多后再这有重新提出要写一个绘制表单的功能。对此也是有点小激...

1.2K80
来自专栏狂码一生

利用ajaxFileUpload.js实现多文件异步上传功能

  AjaxFileUpload.js是网络开发者写好的插件放出来供大家使用用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。在这里我将网络...

754130

扫码关注云+社区

领取腾讯云代金券