0

CodaSliderをチェックしてください。

ULを削除し、それを制御するためにdivを選択しましたが、問題が発生しています。現在表示されているパネルを示す三角形を追加したいと思います。現時点では、実際のslide.jpgに三角形を追加することを考えていますが、誰かが別のスライドを追加したい場合、これはかなり悪いことです。

現在のパネルに三角形を動的に追加するにはどうすればよいですか？

いいね： http： //i.imgur.com/B0BwU.jpg（画像に追加されています）

私のCSS：

#control {

width: 938px;
height: 65px;
border-right: 1px solid #d1d1d1;
border-left: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
background: #fff url(sliderbg.jpg) repeat;

}

.button { float: left; width: 220px; height: 65px;
margin-right: 15px; border-right: 1px dotted  #d1d1d1; }

.buttonInside { padding: 8px; }

.buttonLast { margin-right: 0; margin-left: 2px; border-right: 0px;}

解決：

含む

ul.navigation a.selected {
background: url(../img/arrow.png) no-repeat top center;
position: relative;
top: -13px;
padding-top: 23px;

}

フローティング要素をインライン要素として設定する幅と高さを指定することはできません

ul.navigation li {
float: left;
margin-right: 12px;
width: 220px;
height: 65px;
border-right: 1px dotted #ddd;

}

4

3 に答える 3

2

疑似要素とCSSを使用して、画像なしで矢印を追加します：http: //jsfiddle.net/blineberry/fqKHK/

ストックCodaSliderを使用したCSSは次のようになります。

ul.navigation a.selected {
  position: relative;

  background: blue;

  color: #FFF;
}
ul.navigation a.selected:before {
  content: '';

  position: absolute;
  height: 0;
  width: 0;
  bottom: -9px;
  left: 50%;
  margin-left: -9px;
  z-index: 1;

  border: 10px solid transparent;
  border-top: 10px solid blue;
  border-bottom: none;
}

ブラウザのサポートは、最新のブラウザとIE8+です。IE 7以下の場合は、@ Marcoがアドバイスするように画像を使用するか、まったく気にしないでください。

アップデート：

時間があったので、あなたの特定の実装でもう少し遊んだ。

明確にするために、「現在のスライド」矢印を取得することに加えて、javascriptをマークアップの変更で機能させるための支援が必要です。

ここのコードを見てください：http：//jsfiddle.net/blineberry/SfJzv/

これらの変更に注意してください。

HTMLで、.navigationクラスを#control要素に追加しました。これにより、マークアップをCodaSliderスクリプトで機能させ続けることができます。

javascript：スクリプトの34行目（このスクリプトを参照：http：//jqueryfordesigners.com/demo/coda-slider.js）で、に変更さ.parents('ul:first')れ.parents('.navigation:first')、53行目でに変更され$('ul.navigation a:first').click();ました$('div.navigation a:first').click();。

CSSで、いくつかのスタイル宣言を行って、標準のCodaSliderCSSの一部をオーバーライドしてディメンションで機能するようにしました。実装によっては、これが必要な場合と不要な場合があります。

これがフルスクリーンのデモです：http：//jsfiddle.net/blineberry/SfJzv/embedded/result/

于 2011-10-14T12:38:30.240 に答える
0 
 <script type="text/javascript" language="javascript">
    function ShowHide(obj) {
        document.getElementById("div1").style.display = 'none';
        document.getElementById("div2").style.display = 'none';
        document.getElementById("div3").style.display = 'none';
        document.getElementById("div4").style.display = 'none';
        document.getElementById(obj).style.display = 'inline';


        return false;
    }
</script>
 <style type="text/css">
    a
    {
        cursor: pointer;
        background-color: Transparent;
        top: 0;
        vertical-align: text-top;
    }
</style>

体

<body>
<form id="form1" runat="server">
<div>
    <p>
        Hope this works</p>
    <div style="width: 938px; height: 100px; z-index: -1; border-right: 1px solid #d1d1d1;
        border-left: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; position: absolute;
        left: 8px; top: 20px; z-index: -1; background-color: Black">
    </div>
    <div style="margin-top: 75px; z-index: 99; background-color: Red; height: 35px; width: 940px">
        <div style="float: left; width: 50%; height: 35px; text-align: center; vertical-align: middle">
            <div style="float: left; width: 50%; height: 35px; background-color: Blue; text-align: center;">
                <div id="div1" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%;">
                </div>
                <a onclick="ShowHide('div1');">ClickMe1</a>
            </div>
            <div style="float: left; width: 50%; height: 35px; background-color: Aqua; text-align: center;
                vertical-align: middle">
                <div id="div2" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%; display: none">
                </div>
                <a onclick="ShowHide('div2');">ClickMe1</a>
            </div>
        </div>
        <div style="float: left; width: 50%; height: 35px">
            <div style="float: left; width: 50%; height: 35px; background-color: Fuchsia; text-align: center;
                vertical-align: middle">
                <div id="div3" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%; display: none">
                </div>
                <a onclick="ShowHide('div3');">ClickMe1</a>
            </div>
            <div style="float: left; width: 50%; height: 35px; background-color: Green; text-align: center;
                vertical-align: middle">
                <div id="div4" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%; display: none">
                </div>
                <a onclick="ShowHide('div4');">ClickMe1</a>
            </div>
        </div>
    </div>
</div>
</form>

これが機能することを願っています.....uは、画像をdiv（div1、div2、div3、div4）の横に配置できます。申し訳ありませんが、コードをクリーンアップする必要があります。:)

于 2011-10-14T14:06:09.590 に答える
0

画像の代わりにボタンでそれを行います。

私はあなたがbuttonInsideを持っているのを見ることができます。

したがって、アクティブな状態をアクティブな画像ボタンに追加して、

.active .buttonInside {margin-top:-20px; background:url(arrow.png) top center; padding-top:28px;}

またはそのようなもの:)

于 2011-10-14T12:01:27.640 に答える