codaSlider hack - 如何在图像上添加小三角形答案

【问题标题】：codaSlider hack - how do I add little triangles overlaying an imagecodaSlider hack - 如何在图像上添加小三角形
【发布时间】：2011-12-07 17:02:27
【问题描述】：

查看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;

}

【问题讨论】：

标签： jquery css coda-slider

【解决方案1】：

我会在按钮而不是图像上做。

我可以看到你有一个 buttonInside。

所以你可以为 ACTIVE 图像按钮添加一个活动状态，然后拥有

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

或类似的东西:)

【讨论】：

这个会覆盖在我的按钮上方吗？不需要设置额外的高度？

【解决方案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 中，我做了一些样式声明来覆盖一些常用的 CodaSlider CSS 以适应您的尺寸。根据您的实施，您可能需要也可能不需要。

这是一个全屏演示：http://jsfiddle.net/blineberry/SfJzv/embedded/result/

【讨论】：

这看起来不错，但这不是我的问题。我想在上面的示例屏幕截图中添加一个活动箭头。按钮覆盖面板中的内容:)
这不是在面板内容上添加一个活动箭头吗？你看过 jsFiddle 吗？当然我没有使用你的类，但我没有你的 HTML 上下文来真正理解它们。
好吧，我确实提到我没有使用 UL，而是为每个按钮使用了一个 div 类.. + 我看不到制作箭头的 CSS :(
@SMacFadyen 是的，但课程甚至不一样。所以我只是利用 CodaSlider 的资源来建立一个工作模型。你用的是什么浏览器？
@SMacFadyen 这是它的外观截图：cl.ly/AwKM我很好奇您使用的是什么浏览器。

【解决方案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）的一侧。抱歉，代码需要清理一下。 :)

【讨论】：