个人中心
gpt4 book ai didi

javascript - 居中对齐 ul 中 li 的内容

转载 作者：行者123 更新时间：2023-11-28 13:20:20 25 4
gpt4 key购买 nike

这是一个垂直画廊。

http://www.braddockinfotech.com/demo/dvnonline/vod/

当选择图库中的特定视频时，选择左对齐。我希望下图能清楚

enter image description here

如何使选择中心对齐。我的意思是目前选择接触容器的左边界而不是容器的右边界(橙色虚线)。我希望选择只选择内部视频图像而不是容器边框

这是html代码

    <body onkeydown="HandleKeyDown(event);">
    <table cellpadding="0px" cellspacing="0px" border="0px" class="sitewidth">
        <tr>
            <td align="left" valign="top" style="width:800px;">
                <div id='divVideoPlayer'></div>
            </td>
            <td align="center" style="width:140px;">
                <div id="divPlaylistContainer">
                    <div id="playlistNavPrev">
                        <a id="imgNavPrev" onclick="MoveToDirection('Up');"><span class="arrow">&nbsp;</span>
                        </a>
                    </div>
                    <div id="divPlaylist">
                        <!--playlist-->
                        <div id="spanSlider" style='top:0px; position:relative;'>
                            <ul id="ulSlider">
                                <?php $index=1 ; $firstVideoUrl='' ; $firstImageUrl='' ; $videoDetails=G
                                etVideoDetails(); echo "<script> var siteUrl = '".$siteUrl.
                                "' </script>"; while ($row=m ysql_fetch_array($videoDetails)) { echo
                                "<script>video[".$index. "]='";echo $row[3]. "';</script>"; echo "<script>image[".$index.
                                "]='";echo $row[2]. "';</script>"; //echo "<script>title[".$index. "]='";echo
                                $row[1]. "';</script>"; echo "<script>title[".$index. "]='";echo str_replace(
                                "'", "\'",$row[1]). "';</script>"; // 0 - id , 1 - Title , 2- ImageUrl, 3
                                - VideoUrl //echo $row[0].$row[1].$row[2].$row[3]. "<br/>"; //echo
                                "<li id='liButton_".$index. "'><a  onclick=\"ShowVideo( '".$index."');\
                                "><img id='ImageButton_".$index. "' title='".$row[1]. "' alt='".$row[1]. "' src=".$siteUrl.
                                "timthumb/timthumb.php?src=".$row[2]. "&amp;h=54&amp;w=109&amp;zc=1&amp;a=c></a></li>"; $index++;
                                } ?>
                            </ul>
                        </div>
                    </div>
                    <div id="playlistNavNxt">
                        <a id="imgNavNext" onclick="MoveToDirection('Down');"><span class="arrow">&nbsp;</span>
                        </a>
                    </div>
                </div>
            </td>
    </table>
</body>

这是javascript代码

 var video = new Array();
 var image = new Array();
 var title = new Array();
 var noOfImagesCanShow = 6;
 var selected = 1;
 var slideNo = 1;


 String.prototype.trim = function () {
     return this.replace(/^\s+|\s+$/g, "");
 };

 function SetPlayList() {
     var listHtml = '';
     var lastIndex = slideNo * noOfImagesCanShow;
     var firstIndex = (slideNo * noOfImagesCanShow) - (noOfImagesCanShow - 1);
     var rowNo = 1;
     for (var i = firstIndex; i <= lastIndex; i++) {
         if (firstIndex >= 1 && lastIndex < title.length) {
             listHtml += "<li id='liButton_" + rowNo + "'><a  onclick=\"ShowVideo('" + i + "');\"><img id='ImageButton_" + i + "' title=\"" + title[i] + "\" alt='" + title[i] + "' src=" + siteUrl + "timthumb/timthumb.php?src=" + image[(i)] + "&amp;h=54&amp;w=109&amp;zc=1&amp;a=c></a></li>";
             rowNo++;
         }
     }
     document.getElementById('ulSlider').innerHTML = listHtml;
     document.getElementById('liButton_1').tabIndex = 2;
     document.getElementById('liButton_1').focus();
 }

 function ShowVideo(videoIndex) {
     var streamToBeUsed = "";
     var provideType = "";
     if (video[videoIndex].trim().substring(0, 7) == "http://") {
         streamToBeUsed = '';
         provideType = "http";
     } else {
         streamToBeUsed = "rtmp://cp87191.edgefcs.net/ondemand/";
         provideType = "rtmp";
     }
     var autostart = "true";

     if (jwplayer("divVideoPlayer") != null) {
         jwplayer("divVideoPlayer").stop();
     }

     jwplayer("divVideoPlayer").setup({
         file: streamToBeUsed + video[videoIndex].trim(),
         image: image[videoIndex],
         icons: "true",
         autostart: autostart,
         screencolor: "black",
         'width': '800',
         'height': '510',
         streamer: streamToBeUsed,
         provider: provideType,
         events: {
             onBeforePlay: function () {
                 document.getElementById('liButton_' + videoIndex).tabIndex = '2';
                 document.getElementById('liButton_' + videoIndex).focus();
             }
         }
     });
     // clearing all style
     var totalImages = noOfImagesCanShow;
     for (var i = 1; i <= totalImages; i++) {
         var imageId = (((slideNo * noOfImagesCanShow) - (noOfImagesCanShow)) + i).toString();
         if (document.getElementById('liButton_' + i) != null && document.getElementById('ImageButton_' + imageId) != null) {
             document.getElementById('liButton_' + i).className = 'inactiveli';
             document.getElementById('ImageButton_' + imageId).className = 'inactive';
         }
     }
     document.getElementById('liButton_' + videoIndex).className = 'activeli';
     document.getElementById('ImageButton_' + (((slideNo - 1) * noOfImagesCanShow) + parseInt(videoIndex)).toString()).className = 'active';

     SetButtonStatus(((slideNo - 1) * noOfImagesCanShow) + parseInt(videoIndex));


     document.getElementById('liButton_' + videoIndex).tabIndex = '2';
     document.getElementById('liButton_' + videoIndex).focus();
     document.getElementById('divVideoPlayer').tabIndex = '-1';

 }

 function SetButtonStatus(imageIndex) {
     if (imageIndex <= noOfImagesCanShow) {
         document.getElementById('imgNavPrev').className = 'disable_up';
         document.getElementById('imgNavPrev').tabIndex = '-1';
         document.getElementById('imgNavNext').tabIndex = '3';
     } else {
         document.getElementById('imgNavPrev').className = 'enable_up';
         document.getElementById('imgNavPrev').tabIndex = '1';
     }

     if (imageIndex > (image.length - noOfImagesCanShow)) {
         document.getElementById('imgNavNext').className = 'disable_down';
         document.getElementById('imgNavNext').tabIndex = '-1';
         document.getElementById('imgNavPrev').tabIndex = '1';
     } else {
         document.getElementById('imgNavNext').className = 'enable_down';
         document.getElementById('imgNavNext').tabIndex = '3';
     }
 }

 function MoveToDirection(direction) {
     if (direction == 'Down') {
         if (document.getElementById('imgNavNext').className != 'disable_down') {
             slideNo++;
             SetButtonStatus(slideNo * noOfImagesCanShow);
             SetPlayList();
         }
     } else if (direction == 'Up') {
         if (document.getElementById('imgNavPrev').className != 'disable_up') {
             slideNo--;
             SetButtonStatus(slideNo * noOfImagesCanShow);
             SetPlayList();
             document.getElementById('liButton_6').focus();
         }
     }
 }

 function HandleKeyDown(ev) {
     if (document.activeElement != null) {
         var element = document.activeElement;

         if (ev.keyCode == 13) {
             /*User Pressed Enter, Handle If required*/
             if (element.id == "imgNavNext" && element.className != "disable_down") {
                 MoveToDirection('Down');
             } else if (element.id == "imgNavPrev" && element.className != "disable_up") {
                 MoveToDirection('Up');
             } else if (element.id.indexOf("liButton_") > -1) {
                 var nameSections = element.id.split('_');

                 ShowVideo(nameSections[1]);
             }
         } else if (ev.keyCode == 40) {
             /*User Pressed Down*/
             if (element.id.indexOf("liButton_") > -1) {
                 var nameSections = element.id.split('_');

                 var nextIndexToFocus = (parseInt(nameSections[1])) + 1;
                 if (document.getElementById("liButton_" + nextIndexToFocus) != null) {
                     document.getElementById("liButton_" + nextIndexToFocus).tabIndex = element.tabIndex;
                     element.tabIndex = "-1";
                     document.getElementById("liButton_" + nextIndexToFocus).focus();
                 } else //need to focus in navNext
                 {
                     if (document.getElementById('imgNavNext').className != 'disable_down') {
                         document.getElementById('imgNavNext').focus();
                     }
                 }

             } else {
                 if (element.id.indexOf("imgNavPrev") > -1) {
                     document.getElementById("liButton_1").focus();
                 }
             }
         } else if (ev.keyCode == 38) {
             /*User Pressed Up Up*/
             if (element.id.indexOf("liButton_") > -1) {
                 var nameSections = element.id.split('_');

                 var nextIndexToFocus = (parseInt(nameSections[1])) - 1;
                 if (document.getElementById("liButton_" + nextIndexToFocus) != null) {
                     document.getElementById("liButton_" + nextIndexToFocus).tabIndex = element.tabIndex;
                     element.tabIndex = "-1";
                     document.getElementById("liButton_" + nextIndexToFocus).focus();
                 } else //need to focus in navPrev
                 {
                     if (document.getElementById('imgNavPrev').className != 'disable_up') {
                         document.getElementById('imgNavPrev').focus();
                     }
                 }
             } else /* To handle up button from imgNavNext */
             {
                 if (element.id.indexOf("imgNavNext") > -1) {
                     document.getElementById("liButton_6").focus();
                 }
             }
         }
     }
 }

最佳答案

将 margin:0 auto 添加到 .sitewidth 

.sitewidth {
width: 960px;
margin: 0 auto;
}

关于javascript - 居中对齐 ul 中 li 的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14686318/

25 4 0
文章推荐： asp.net - css hover 在 IE 中不起作用
文章推荐： javascript - 删除右键单击表格箭头 firefox
文章推荐： ios - 计算包含相同两个值的数组的数量
文章推荐： javascript - MongoDB shell : How to remove specific elements in all the collections inside a DB
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com