Javascript 如何通过jQuery动态刷新幻灯片js_Javascript_Jquery_Html

Javascript 如何通过jQuery动态刷新幻灯片js

javascript jquery html

Javascript 如何通过jQuery动态刷新幻灯片js,javascript,jquery,html,Javascript,Jquery,Html,我已经实现了幻灯片js () 在我的页面中。我已经编写了一个脚本来初始化幻灯片，如下所示 <script> $(function () { $('#slides').slidesjs({ width: 940, height: 500, navigation: false }); }); </s

我已经实现了幻灯片js () 在我的页面中。我已经编写了一个脚本来初始化幻灯片，如下所示

 <script>
        $(function () {
            $('#slides').slidesjs({
                width: 940,
                height: 500,
                navigation: false
            });
        });
    </script>


$（函数（）{
$（“#幻灯片”）.slidesjs({
宽度：940，
身高：500，
导航：错误
});
});

但是现在，当我从数据库动态地向页面添加内容时，下一张幻灯片不起作用，一些人说我需要刷新上面的脚本来重新绘制幻灯片。。现在的问题是，我应该如何通过jQuery刷新它。。？？我也要发布jQuery代码吗

下面是我的jsp代码

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
    <title>Untitled Document</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

      <!-- SlidesJS Required: Link to jQuery -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- End SlidesJS Required -->

    <!-- SlidesJS Required: Link to jquery.slides.js -->
    <script src="resources/js/jquery.slides.min.js"></script>

    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="resources/css/style.css">
    <script src="resources/js/bootstrap.js"></script>



    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- End SlidesJS Required: Start Slides -->


    <!-- End SlidesJS Required -->



    <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
     <script>
        $(function () {
            $('#slides').slidesjs({
                width: 940,
                height: 500,
                navigation: false
            });

        });
    </script> 
    <!-- End SlidesJS Required -->

<script src="resources/js/getProduct.js"></script>

</head>
<body class="bodybg">
<header class="header">
        <br>
        <div class="row">
            <div class="col-lg-10"></div>
            <div class="col-lg-2 text-right">
                <div class="dropdown ">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle Language">Welcome, User 1 <b class="caret caretnew"></b></a>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="#">Setting</a></li>
                        <li><a href="#">Edit Profile </a></li>
                        <li><a href="#">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="pull-left"> <img src="resources/images/logo.jpg" width="67" height="80" alt="" /> </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-left padding0 margin-left3">
                    <h1 class="pageheader">Product List</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding0">
                <div class="col-lg-11 col-md-11 col-sm-11 col-xs-12 text-right voffset2 Language ">Language</div>
                <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12 padding0 ">
                    <ul class="nav nav-tabs">
                        <li class="dropdown active">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle">English <b class="caret"></b></a>

                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </header>

    <!-- SlidesJS Required: Start Slides -->
    <!-- The container is used to define the width of the slideshow -->
    <div class="container">
        <h3 class="pageheader2 text-left voffset4"><a>Select your product</a></h3>
        <div id="slides">

                <a href="#" id="prevButton" class='slidesjs-previous slidesjs-navigation newCallPrev'><img src='resources/images/pre_icon.png'>Prev</a>

                          <div id="item1" class="item">

                                 <div id="offset1" class="voffset4">
                                        <!-- First row of three elements -->
                                 </div>

                                         <div class="clearfix"></div> 

                                 <div id="offset2" class="voffset1">

                                    <!-- Second row of three elements -->

                                 </div>

                         </div> 

                 <a  id="nextButton" class='slidesjs-next slidesjs-navigation newCallNext' href="#">Next <img src='resources/images/next_icon.png'></a>

        </div>

    </div>

</body>
</html>


无标题文件
$（函数（）{
$（“#幻灯片”）.slidesjs({
宽度：940，
身高：500，
导航：错误
});
});







产品清单
Lorem ipsum dolor sit amet，献祭精英
语言

下面是js文件

$(document).ready(function(){

    var n = 0;
    var productCount;
    var page=1;
    var firstOff = 1;
    var secondOff = 2;
    var item1 = 1;
    var item2=2;

    drawRow(n,6);

    function drawRow(pageNumber,pageSize){  
        $.ajax({

            url : "product/getProduct/pageNumber/"+pageNumber+"/pageSize/"+pageSize,
            type : "GET",
            contentType : "application/json",

            success:function(result)
            {
                if(result.statusCode==200)
                {
                    var productDiv;
                    productCount = result.productCount;

                    if(pageNumber==0)
                        {
                            $("#prevButton").hide();
                        }
                    else if(pageNumber>0)
                        {
                            $("#prevButton").show();
                        }

                    if((productCount-(page*pageSize))>0)
                        {
                            $("#nextButton").show();
                        }
                    else if((productCount-(page*pageSize))<=0)
                        {
                            $("#nextButton").hide();
                        }

                    $(".voffset4").children().remove();
                    $(".voffset1").children().remove();

                    $.each(result.productVo,function(i,obj)
                            {

                            productDiv = "<div class='col-lg-4 col-md-4 col-sm-4 col-xs-12'>"+
                                                "<a herf='#' class='btn btn-lg btn-default col-lg-12 col-md-12 col-sm-12 col-xs-12 vcardbg'>"+
                                                    "<div class='pull-left col-lg-3 col-md-4 col-sm-4 col-xs-3 col-lg-offset-2'>" +
                                                        "<img src="+obj.productIcon+" class='img-resposive'>"+
                                                    "</div>"+
                                                        "<span class='col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left'>"+obj.productName+"</span>" +
                                                "</a>" +
                                        "</div>";

                                if(i<3)
                                {
                                    $("#offset"+firstOff).append(productDiv);
                                }
                                else
                                {
                                    $("#offset"+secondOff).append(productDiv);
                                }

                                $("#item"+item1).css("position","static");
                            });
                }
                else
                {   
                    alert(result.statusMessage);    
                }
            },

            error : function(e) 
            {
                console.log("ERROR: ", e);

            }
        });
    }

    $(".newCallNext").click(function(){

        page=page+1;
        n=n+6;

        firstOff = firstOff+2;
        secondOff = secondOff+2;



         var $slideNext = $("<div id='item"+item2+"' class='item'>"+

                        "<div id=offset"+firstOff+" class='voffset4'></div>"+

                        "<div class='clearfix'></div>"+

                        "<div id=offset"+secondOff+" class='voffset1'></div>"+

                        "</div>");

            $("#item"+item1).append(slideNext);

            $slideNext.slidesjs({
                    width: 940,
                    height: 500,
                    navigation: true

            });


        drawRow(n,6);

        item1 = item2;
        item2 =item2+1;

    });

    $(".newCallPrev").click(function(){

        page= page-1;
        n=n-6;
        drawRow(n,6);

    });
});

$（文档）.ready（函数（）{
var n=0；
var产品计数；
var-page=1；
var firstOff=1；
var-secondOff=2；
var item1=1；
var项2=2；
抽绳（n，6）；
函数drawRow（pageNumber，pageSize）{
$.ajax({
url:“product/getProduct/pageNumber/”+pageNumber+“/pageSize/”+pageSize，
键入：“获取”，
contentType:“应用程序/json”，
成功：功能（结果）
{
如果（result.statusCode==200）
{
var-productDiv；
productCount=result.productCount；
如果（页码==0）
{
$（“#prevButton”）.hide（）；
}
否则如果（页码>0）
{
$（“#prevButton”）.show（）；
}
如果（（productCount-（页面*页面大小））>0）
{
$（“#下一个按钮”）.show（）；
}
否则如果（（productCount-（page*pageSize））再次调用并初始化函数$（'#slides'）.slidesjs（），在从数据库向页面动态添加内容后
退出的可能重复可能性是，当您动态更新内容页面时，可能是其他一些html正在得到幻灯片js所需的更新。