javascript - slider 第一图像固定宽度

Question

在我的 slider 代码主页上，我想固定第一张图片的宽度。是否有可能来自 css 或 html。因为我试过但没有用。我当前的 slider CSS 代码如下。

#slider {
    background-attachment: scroll;
    background-color: #FFFFFF;
    background-image: url("http://silverharmony.in/wp-content/uploads/2012/10/Slider_bg.png");
    background-position: 50% 0;
    background-repeat: repeat;
    display: block;
    float: left;
    width: 100%;
}

.inner, .wrapper {
    display: block;
    height: 100%;
    margin: 0 auto;
    position: relative;
    width: 960px;
    z-index: 0;
}

ul.kwicks {
    background-color: #333333;
    border-radius: 3px 3px 3px 3px;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

ul.kwicks li {
    background: url("../images/icons/ajax_loader.gif") no-repeat scroll 50% 50% transparent;
    display: block;
    overflow: hidden;
    padding: 0;
}

.kw_img {
    display: block;
}

.kw_img img {
    vertical-align: middle;
}

.kw_shadow {
    background: url("../images/icons/overlay.png") repeat-y scroll 0 0 transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    height: 100%;
    position: absolute;
    right: 0;
    width: 40px;
    z-index: 2;
}

.last .kw_shadow {
    background: none repeat scroll 0 0 transparent !important;
    border-right: 0 none;
}

我当前的 Slider HTML 代码如下。

<div id="slider">
<div class="inner">
    <ul style="width:960px; height:400px; margin:15px 0;" data-width="960" data-max="660" class="kwicks" id="kwicks-1">
        <li class="kwick" style="left: 0px; width: 192px; margin: 0px; position: absolute;">
            <div class="kw_shadow"></div>
            <div class="kw_img">
                <img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/2.jpg&amp;h=400&amp;w=960&amp;zc=1&amp;q=100">
            </div>
        </li>
        <li class="kwick" style="left: 192px; width: 192px; margin: 0px; position: absolute;">
            <div class="kw_shadow"></div>
            <div class="kw_img">
                <img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/Image-2.jpg&amp;h=400&amp;w=960&amp;zc=1&amp;q=100">
            </div>
        </li>
        <li class="kwick" style="left: 384px; width: 192px; margin: 0px; position: absolute;">
        <div class="kw_shadow"></div>
        <div class="kw_img">
                <img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/3.png&amp;h=400&amp;w=960&amp;zc=1&amp;q=100">
            </div>
        </li>
        <li class="kwick" style="left: 576px; width: 192px; margin: 0px; position: absolute;">
        <div class="kw_shadow"></div>
        <div class="kw_img">
                <img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/Image-1.jpg&amp;h=400&amp;w=960&amp;zc=1&amp;q=100">
        </div>
        </li>
        <li class="kwick last" style="right: 0px; width: 192px; margin: 0px; position: absolute;">
        <div class="kw_shadow"></div>
        <div class="kw_img"><img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/1.jpg&amp;h=400&amp;w=960&amp;zc=1&amp;q=100"></div>
        </li>
    </ul>
</div>

目前我的 slider 看起来像这样。 http://silverharmony.in/

我真的很想喜欢下面的链接。

http://silverharmony.in/wp-content/uploads/2012/10/slider-screenshoot.png

Answer 1

slider 正在使用 Kwicks jQuery 插件。我添加了第一个 li 元素 .kwicks-selected 类来实现你正在寻找的东西。

此处示例 jsFiddle