JQuery幻灯片可能不起作用

时间:2015-09-01 07:41:59

标签: javascript jquery html css

我是网络开发的新手,我将此滑块集成到我的页面中:Slideshow source+tutorial

如果我在不同的本地页面上运行它,滑块可以正常运行,但是在我的运行中出现以下问题: 1-pagination +箭头不显示 我不能把它放在中心位置

我的CSS:

<style>

            @font-face {
                font-family: imp1;
                src: url(fonts/blackchancery/BLKCHCRY.TTF);
            }

            * { margin: 0; outline: none; }


            html {

                background: #32c951 url(img/noise.png);

            }

            body {


                padding-right: 25px;
                padding-left: 25px;
                padding-top: 10px;
                padding-bottom: 25px;
                width:1200px;

            }


            #header
            {
                position:top fixed;
                padding-bottom:15px;

            }

            #menu-bar {

                margin: 0px 0px 0px 0px;
                padding: 6px 0px 4px 0px;
                line-height: 100%;
                border-radius: 0px;
                -webkit-border-radius: 0px;
                -moz-border-radius: 0px;
                box-shadow: 0px 0px 0px #666666;
                -webkit-box-shadow: 0px 0px 0px #666666;
                -moz-box-shadow: 0px 0px 0px #666666;
                background: #2D964D url(img/noise.png);
                border: solid 1px #FFFFFF;
                z-index:999;
            }
            #menu-bar li {
                margin: 0px 0px 3px 0px;
                padding: 0px 6px 0px 12px;
                float: left;
                position: relative;
                list-style: none;
            }
            #menu-bar a {
                font-weight: bolder;
                font-family: helvetica;
                font-style: italic;
                font-size: 16px;
                color: #FFFDFD;
                text-decoration: none;
                display: block;
                padding: 6px 20px 6px 20px;
                margin: 0;
                margin-bottom: 3px;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                text-shadow: 0px 0px 0px #000000;
            }
            #menu-bar li ul li a {
                margin: 0;
            }
            #menu-bar .active a, #menu-bar li:hover > a {
                background: #82FF4D;
                color: #2A7D35;
                -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
                -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
                box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
                text-shadow: 0px 0px 0px #FFFFFF;
            }
            #menu-bar ul li:hover a, #menu-bar li:hover li a {
                background: none;
                border: none;
                color: #666;
                -box-shadow: none;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
            }
            #menu-bar ul a:hover {
                background: #82FF4D !important;
                color: #000000 !important;
                border-radius: 0;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                text-shadow: 0px 0px 0px #FFFFFF;
            }
            #menu-bar li:hover > ul {
                display: block;
            }
            #menu-bar ul {
                background: #2A7D35;
                display: none;
                margin: 0;
                padding: 0;
                width: 185px;
                position: absolute;
                top: 30px;
                left: 0;
                border: solid 1px #B4B4B4;
                border-radius: 10px;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                -webkit-box-shadow: 2px 2px 3px #222222;
                -moz-box-shadow: 2px 2px 3px #222222;
                box-shadow: 2px 2px 3px #222222;
            }
            #menu-bar ul li {
                float: none;
                margin: 0;
                padding: 0;
            }
            #menu-bar ul a {
                padding:10px 0px 10px 15px;
                color:#FFFFFF !important;
                font-size:15px;
                font-style:italic;
                font-family:helvetica;
                font-weight: bold;
                text-shadow: 0px 0px 0px #FFFFFF;
            }
            #menu-bar ul li:first-child > a {
                border-top-left-radius: 10px;
                -webkit-border-top-left-radius: 10px;
                -moz-border-radius-topleft: 10px;
                border-top-right-radius: 10px;
                -webkit-border-top-right-radius: 10px;
                -moz-border-radius-topright: 10px;
            }
            #menu-bar ul li:last-child > a {
                border-bottom-left-radius: 10px;
                -webkit-border-bottom-left-radius: 10px;
                -moz-border-radius-bottomleft: 10px;
                border-bottom-right-radius: 10px;
                -webkit-border-bottom-right-radius: 10px;
                -moz-border-radius-bottomright: 10px;
            }
            #menu-bar:after {
                content: ".";
                display: block;
                clear: both;
                visibility: hidden;
                line-height: 0;
                height: 0;
            }
            #menu-bar {
                display: inline-block;
            }
            html[xmlns] #menu-bar {
                display: block;
            }


            #wrapper {

                background-color: rgba(255, 255, 255, 0.8); /* (R, B, G, OPACITY */
                position:center;    

            }



            #main_content  {


                text-align:center;
            }


            #footer {

                position:fixed;
                height:20px;
                background-color:red;
                bottom:0px;
                left:0px;
                right:0px;
                margin-bottom:0px;
                background:#FFFFFF url(img/noise.png);
                text-align:center;
            }

            #footer_content {

                width:960px;


            }

            #footer li {
                display:inline;
            }

            p {
                font-family:imp1;
            }

            #welco_mes {

                font-family:imp1;
                font-size:35px;
                color:black;
            }

            </style>

我怀疑整个问题来自我的CSS;一个元素导致幻灯片以这种方式运行。

JSFiddle链接:https://jsfiddle.net/nvsp94d7/3/ 虽然如果包含幻灯片的js + css,幻灯片立即粘贴在左侧+所有控件都不会显示

1 个答案:

答案 0 :(得分:1)

这是你的小提琴{@ 3}}的一个分支,它与父div相比具有分页和幻灯片中心。我不得不更换幻灯片图片,因为它们没有提供。

分页未显示的内容,我怀疑是因为您没有将pagination.png复制到正确的位置。它由CSS引用,因此与../images/pagination.png的位置相比需要craftyslide.css

将div居中只是添加

的问题
#slideshow {
    margin: 0 auto;
}

到你的CSS文件