创建一个带有按钮的定时滑块，这些按钮会影响表格不同部分的文本和图像答案

【问题标题】：creating a timed slider with buttons that affect text and images in different parts of a table创建一个带有按钮的定时滑块，这些按钮会影响表格不同部分的文本和图像
【发布时间】：2015-01-02 13:08:32
【问题描述】：

我正在使用本教程为我的网站创建一个渐变滑块库：https://www.youtube.com/watch?v=QtYP_eSVKfs&list=UUWxB7V9weF702avKxXESdvw&index=5

我的图片在画廊中循环播放，带有上一个和下一个箭头来导航画廊，并在下一个和上一个箭头之间添加了单独的按钮以转到单独的图片，但是我遇到了要描述每个图片的文字问题图片。文本位于单独的列中，并且像图像一样循环显示，但是当我单击导航按钮时，文本会一直从原来的位置滚动，而不是移动到与图像对应的文本。

这是 JSFiddle 上带有 alt 选项卡的代码，但它似乎不想运行。

http://jsfiddle.net/agwlora/tne3rkse/3/

<table border="0">
<tr>
    <td class="opacBack" valign="top" width="200px">
        <table width="75%" border="0" cellspacing="5px">
            <tr>
                <td><strong>work</strong>
                </td>
            </tr>
            <tr>
                <td>
                    <table width="100%" border="0">
                        <tr>
                            <td width="12%">&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <table width="100%" height="475px" border="0">
            <tr>
                <td valign="bottom">
                    <div id="textslide">1 text</div>
                </td>
            </tr>
        </table>
    </td>
    <td width="800px">
        <div align="center" id="slider">
            <img id="1" src="images/gallery/Commercial/for_site/01.jpg" alt="1" />
            <img id="2" src="images/gallery/Commercial/for_site/02.jpg" alt="2" />
            <img id="3" src="images/gallery/Commercial/for_site/03.jpg" alt="3" />
            <img id="4" src="images/gallery/Commercial/for_site/04.jpg" alt="4" />
            <img id="5" src="images/gallery/Commercial/for_site/05.jpg" alt="5" />
            <img id="6" src="images/gallery/Commercial/for_site/06.jpg" alt="6" />
            <img id="7" src="images/gallery/Commercial/for_site/07.jpg" alt="7" />
            <img id="8" src="images/gallery/Commercial/for_site/08.jpg" alt="8" />
            <img id="9" src="images/gallery/Commercial/for_site/09.jpg" alt="9" />
            <img id="10" src="images/gallery/Commercial/for_site/10.jpg" alt="10" />
            <img id="11" src="images/gallery/Commercial/for_site/12.jpg" alt="11" />
            <img id="12" src="images/gallery/Commercial/for_site/13.jpg" alt="12" />
            <img id="13" src="images/gallery/Commercial/for_site/14.jpg" alt="13" />
            <img id="14" src="images/gallery/Commercial/for_site/15.jpg" alt="14" />
            <img id="15" src="images/gallery/Commercial/for_site/16.jpg" alt="15" />
            <img id="16" src="images/gallery/Commercial/for_site/17.jpg" alt="16" />
            <img id="17" src="images/gallery/Commercial/for_site/18.jpg" alt="17" />
            <img id="18" src="images/gallery/Commercial/for_site/19.jpg" alt="18" />
            <img id="19" src="images/gallery/Commercial/for_site/20.jpg" alt="19" />
            <img id="20" src="images/gallery/Commercial/for_site/21.jpg" alt="20" />
            <img id="21" src="images/gallery/Commercial/for_site/22.jpg" alt="21" />
            <img id="22" src="images/gallery/Commercial/for_site/23.jpg" alt="22" />
        </div>
    </td>
</tr>
<tr>
    <td valign="top">&nbsp;</td>
    <td>
        <div align="center">
<a id="prev" href="#" onclick="prev(); return flase"><img src="images/gallery/buttons/arrow_previous.png"  </a>

<a href="#" onclick="goTo1(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="1" /> </a>

<a href="#" onclick="goTo2(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="2" /> </a>

<a href="#" onclick="goTo3(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="3" /> </a>

<a href="#" onclick="goTo4(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="4" /> </a>

<a href="#" onclick="goTo5(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="5" /> </a>

<a href="#" onclick="goTo6(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="6" /> </a>

<a href="#" onclick="goTo7(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="7" /> </a>

<a href="#" onclick="goTo8(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="8" /> </a>

<a href="#" onclick="goTo9(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="9" /> </a>

<a href="#" onclick="goTo10(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="10" /> </a>

<a href="#" onclick="goTo11(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="11" /> </a>

<a href="#" onclick="goTo12(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="12" /> </a>

<a href="#" onclick="goTo13(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="13" /> </a>

<a href="#" onclick="goTo14(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="14" /> </a>

<a href="#" onclick="goTo15(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="15" /> </a>

<a href="#" onclick="goTo16(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="16" /> </a>

<a href="#" onclick="goTo17(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="17" /> </a>

<a href="#" onclick="goTo18(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="18" /> </a>

<a href="#" onclick="goTo19(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="19" />  </a>

<a href="#" onclick="goTo20(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="20" /> </a>

<a href="#" onclick="goTo21(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="21" /> </a>

<a href="#" onclick="goTo22(); return flase"><img src="images/gallery/buttons/button_thumbnail.png" alt="22" /> </a>

<a href="#" onclick="next(); return flase"><img src="images/gallery/buttons/arrow_next.png" /> </a>

        </div>
    </td>
</tr>
</table>
</div>
</td>
</tr>
</table>

抱歉，如有任何帮助，将不胜感激，谢谢。

【问题讨论】：

标签： javascript jquery image button slider

【解决方案1】：

所以我想通了，在 JavaScript 中，我使用 sliderInt-1 而不是 i 作为引号，并将其包含在函数 next()、prev() 等中：

function prev(){
    newSlide=sliderInt-1;
    showSlide(newSlide);
    $("#textslide").html(quotes[sliderInt-1]);
}

在 startSlider、next()、prev() 和 goto##() 函数内部

【讨论】：