Question

我删除了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;

}

Answer 1

我会使用伪元素和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();更改为{ {1}}。

在CSS中我做了一些样式声明来覆盖一些库存CodaSlider CSS来处理你的尺寸。根据您的实施情况，您可能需要也可能不需要。

以下是全屏演示：http://jsfiddle.net/blineberry/SfJzv/embedded/result/

Answer 2

我会在按钮而不是图像上执行此操作。

我可以看到你有一个buttonInside。

因此，您可以将活动状态添加到ACTIVE图像按钮，然后

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

或类似的东西：）

Answer 3

 <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>

希望这有效.....你可以将你的图像放在div（div1，div2，div3，div4）的旁边。对不起，代码需要清理。：）

codaSlider hack - 如何添加覆盖图像的小三角形

3 个答案: