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

这是一个全屏演示：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>

希望这可行......你可以将你的图像放在 div （div1，div2，div3，div4）的旁边。抱歉，代码需要清理一下。:)

于 2011-10-14T14:06:09.590 回答
0

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

我可以看到你有一个buttonInside。

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

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

或类似的东西 ：）

于 2011-10-14T12:01:27.640 回答