Блог

В настоящее время я пытаюсь отобразить простую карусель внутри файла .JSP. Кажется, я не могу выяснить, почему он не отображает карусель. Он показывает изображения, но форматирование очень неправильное. текущий код:

 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="coretags" prefix="a"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript">
$(document).ready(function() {  
    //move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.  
    $('#carousel_ul li:first').before($('#carousel_ul li:last'));  

    //when user clicks the image for sliding right  
    $('#right_scroll img').click(function(){  

        //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '  
        var item_width = $('#carousel_ul li').outerWidth()   10;  

        //calculate the new left indent of the unordered list  
        var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;  

        //make the sliding effect using jquery's anumate function '  
        $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){  

            //get the first list item and put it after the last list item (that's how the infinite effects is made) '  
            $('#carousel_ul li:last').after($('#carousel_ul li:first'));  

            //and get the left indent to the default -210px  
            $('#carousel_ul').css({'left' : '-210px'});  
        });  
    });  

    //when user clicks the image for sliding left  
    $('#left_scroll img').click(function(){  

        var item_width = $('#carousel_ul li').outerWidth()   10;  

        /* same as for sliding right except that it's current left indent   the item width (for the sliding right it's - item_width) */  
        var left_indent = parseInt($('#carousel_ul').css('left'))   item_width;  

        $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){  

        /* when sliding to left we are moving the last item before the first item */  
        $('#carousel_ul li:first').before($('#carousel_ul li:last'));  

        /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */  
        $('#carousel_ul').css({'left' : '-210px'});  
        });  

    });  
});  
</script>
<style type="text/css">
    #carousel_inner {  
    float:left; /* important for inline positioning */  
    width:630px; /* important (this width = width of list item(including margin) * items shown */  
    overflow: hidden;  /* important (hide the items outside the div) */  
    /* non-important styling bellow */  
    background: #F0F0F0;  
    }  

    #carousel_ul {  
    position:relative;  
    left:-210px; /* important (this should be negative number of list items width(including margin) */  
    list-style-type: none; /* removing the default styling for unordered list items */  
    margin: 0px;  
    padding: 0px;  
    width:9999px; /* important */  
    /* non-important styling bellow */  
    padding-bottom:10px;  
    }  

    #carousel_ul li{  
    float: left; /* important for inline positioning of the list items */  
    width:200px;  /* fixed width, important */  
    /* just styling bellow*/  
    padding:0px;  
    height:110px;  
    background: #000000;  
    margin-top:10px;  
    margin-bottom:10px;  
    margin-left:5px;  
    margin-right:5px;  
    }  

    #carousel_ul li img {  
    .margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/  
    /* styling */  
    cursor:pointer;  
    cursor: hand;  
    border:0px;  
    }  
    #left_scroll, #right_scroll{  
    float:left;  
    height:130px;  
    width:15px;  
    background: #C0C0C0;  
    }  
    #left_scroll img, #right_scroll img{  
    /*styling*/  
    cursor: pointer;  
    cursor: hand;  
    }  
</style>
    <div id='carousel_container'>  
      <div id='left_scroll'><img src='left.png' /></div>  
      <div id='carousel_inner'>  
            <ul id='carousel_ul'>  
                <li><img src='http://0adb8101b7ae4114a392-dfaacb9b5d3eae26a1de1132d02b2b65.r33.cf3.rackcdn.com/3d-small-people-standing-in-front-of-a-roadsigns-100151388.jpg' /></li>  
                <li><img src='http://0adb8101b7ae4114a392-dfaacb9b5d3eae26a1de1132d02b2b65.r33.cf3.rackcdn.com/3d-small-people-standing-in-front-of-a-roadsigns-100151388.jpg' /></li>  
                <li><img src='http://0adb8101b7ae4114a392-dfaacb9b5d3eae26a1de1132d02b2b65.r33.cf3.rackcdn.com/3d-small-people-standing-in-front-of-a-roadsigns-100151388.jpg' /></li>  
                <li><img src='http://0adb8101b7ae4114a392-dfaacb9b5d3eae26a1de1132d02b2b65.r33.cf3.rackcdn.com/3d-small-people-standing-in-front-of-a-roadsigns-100151388.jpg' /></li>  
                <li><img src='http://0adb8101b7ae4114a392-dfaacb9b5d3eae26a1de1132d02b2b65.r33.cf3.rackcdn.com/3d-small-people-standing-in-front-of-a-roadsigns-100151388.jpg' /></li>  
            </ul>  
      </div>  
      <div id='right_scroll'><img src='right.png' /></div>  
    </div>  
  

но когда я запускаю его, он показывает это:

Он должен отображать простую карусель со стрелками вправо и влево. Возможно ли, что это Jquery?