Jquery codaSlider hack-如何在图像上添加小三角形_Jquery_Css_Coda Slider

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

jquery css

Jquery codaSlider hack-如何在图像上添加小三角形,jquery,css,coda-slider,Jquery,Css,Coda Slider,退房我已经删除了UL并选择了div来控制它，但我遇到了一个问题。我想添加一个三角形，表示当前显示的面板。目前，我正在考虑将三角形添加到实际的slide.jpg中，但是如果有人想添加另一张幻灯片，这是非常糟糕的如何在当前面板中动态添加三角形比如：（它添加在图片上）我的CSS： #control { width: 938px; height: 65px; border-right: 1px solid #d1d1d1; border-left: 1px solid #d1d1d1; bor

退房

我已经删除了UL并选择了div来控制它，但我遇到了一个问题。我想添加一个三角形，表示当前显示的面板。目前，我正在考虑将三角形添加到实际的slide.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;

}

我会用按钮而不是图像来做

我可以看到你有一个扣子

因此，您可以向active imagebutton添加活动状态，然后

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

或者类似的：）

我会使用伪元素和CSS添加一个没有图像的箭头：

带有股票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+。对于IE7及更低版本，我会使用@Marco建议的图像，或者干脆不用担心

更新：

我有一些时间，所以我对您的具体实现进行了更多的研究

澄清一下，除了获取“当前幻灯片”箭头外，还需要帮助javascript处理标记中的更改

请看下面的代码：

记下这些更改：

在HTML中，我将

.navigation

类添加到

#control

元素中。这将有助于使标记与CodaSlider脚本一起工作

在javascript中：在脚本的第34行（引用此脚本：），将

.parents（'ul:first'）

更改为

.parents（'.navigation:first'）

，并在第53行更改

$（'ul.navigation a:first'）。单击（）到$（'div.navigation a:first'）。单击（）
在CSS中，我做了一些样式声明来覆盖一些常用的CodaSlider CSS来处理您的维度。您可能需要，也可能不需要，这取决于您的实现
这里有一个全屏演示：

函数显示隐藏（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'；
返回false；
}
A.
{
光标：指针；
背景色：透明；
排名：0；
垂直对齐：文本顶部；
}


身体


希望这能奏效
单击我1
单击我1
单击我1
单击我1


希望这能奏效。。。。。你可以把你的图像放在div的旁边（div1，div2，div3，div4）。很抱歉，代码需要lil清理。：） 那么这个会覆盖在我的按钮上方吗？没有必要设置额外的高度？这看起来很棒，但这不是我的问题。。我想在上面的示例屏幕截图中添加一个活动箭头。覆盖面板内容的按钮：）这怎么不添加覆盖面板内容的活动箭头？你看过JSFIDLE吗？当然，我没有使用你的类，但我没有你的HTML的上下文来真正理解它们。我没有这样做，因为我没有使用UL，而是为每个按钮使用一个div类..+我看不到制作箭头的CSS：（@SMacFadyen是的，但是类甚至不一样。所以我只是利用CodaSlider的资源来建立一个工作模型。你使用的是什么浏览器？@SMacFadyen这是一个屏幕截图，它应该是什么样子：我很好奇你使用的是什么浏览器。
 <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>