css - 使用数字导航调整简易 slider 1.7 版的宽度和高度-6ren

css - 使用数字导航调整简易 slider 1.7 版的宽度和高度

转载作者：行者123 更新时间：2023-11-28 14:21:42

av 因为这个问题挠我的头太久了。我想更改 easy slider 1.7 版的宽度和高度，我在许多其他地方进行了研究后浏览了本网站的常见问题解答部分，cudn'找不到解决方案。请帮忙。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Pilot project</title>  
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/easySlider1.7.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){   
                $("#slider").easySlider({
                    auto: true, 
                continuous: true,
                numeric: true
            });
        }); 
    </script>
<link href="pilotp.css" rel="stylesheet" type="text/css"  media="screen"/>
<link href="v1.7.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li><a href="http://">Home</a></li>
        <span>
        <a href="http://">Web Hosting         </a>
        <a href="http://">Domain Registration </a>  
        </span>
</li>
<li><a href="http://">Consultancy</a>
        <span>
        <a href="http://">I.S Audit</a>
        <a href="http://">Information Security </a>
        </span>
</li>
<li>
<a href="http://">Career's</a>
</li>
<li>
<a href="http://">Contact Us</a>
</li>
<li>
<a href="http://">Testimonials</a>
</li>
</ul>
</div>
</div>
    <div id="container">
    <div class="slidercontainer" style="background-color:fuchsia;width:800px;height:300px"><!--Will hold the slider -->
    <div id="content" style="background-color:yellow;width:800px; height:299px;">
    <div id="slider" style="background-color:pink;width:800px;height:298px;">
       <ul>             
                <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
                <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
                <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
                <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
                <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
       </ul>
    </div>
    </div>
    </div>
    </div>
</body>
</html>

这是CSS

/* Easy Slider */
    #slider ul, #slider li,
    #slider2 ul, #slider2 li{
        margin:0;
        padding:0;
        list-style:none;

        }
    #slider2{margin-top:1em;}
    #slider ul li, #slider2 ul li{ 
        /* 
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */ 
        width:800px;
        height:241px;
        overflow:hidden; 
        }   
    #prevBtn, #nextBtn,
    #slider1next, #slider1prev{ 
        display:block;
        width:30px;
        height:77px;
        position:absolute;
        left:-30px;
        top:71px;
        z-index:1000;
        }   
    #nextBtn, #slider1next{ 
        left:696px;
        }                                                       
    #prevBtn a, #nextBtn a,
    #slider1next a, #slider1prev a{  
        display:block;
        position:relative;
        width:30px;
        height:77px;
        background:url(../images/btn_prev.gif) no-repeat 0 0;   
        }   
    #nextBtn a, #slider1next a{ 
        background:url(../images/btn_next.gif) no-repeat 0 0;   
        }   

    /* numeric controls */

    ol#controls
        {   
        height:28px;
        margin-top:-20em;
        margin-bottom:1em;
        margin-right:0px;
        margin-left:8px;
        padding-top:0px;
        padding-bottom:0px;
        padding-left:0px;
        padding-right:0px;

        }
    ol#controls li
        {
        margin:0 15px 0 0; 
        padding:0;
        float:left;
        list-style:none;
        height:28px;
        line-height:28px;
        }
    ol#controls li a
        {
        float:left;
        height:28px;
        line-height:28px;
        border:1px solid #ccc;
        background:#DAF3F8;
        color:#555;
        padding:0 10px;
        text-decoration:none;
        }
    ol#controls li.current a
        {
        background:#5DC9E1;
        color:#fff;
        }
    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
    /*just added */
    ol#controls { margin: -30px 0 0 0 !important; } 

/* // Easy Slider */

最佳答案

请参阅 CSS 文件 screen.css 中的第 73-76 行:

        define width and height of list item (slide)
        entire slider area will adjust according to the parameters provided here

同时改变容器的宽度:

#container{ 
    margin:0 auto;
    position:relative;
    text-align:left;
    width:696px; /* change this */
    background:#fff;        
    margin-bottom:2em;
    }

关于css - 使用数字导航调整简易 slider 1.7 版的宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8432311/