使用JavaScript或jQuery在水平滚动的div上添加点击事件

Question

我过去两天一直在寻找一个简单的javascript或jquery代码来实现这个功能。我想使用javascript或jquery来实现水平滚动的div以展示我的网页作品集页的图片和描述性文本。它的功能与此处所示的glide-onclick滚动非常相似：http://www.dyn-web.com/code/scroll/demos.php#horiz。不幸的是，该代码许可证需要$40，而我只是一名身无分文的学生。

页面加载时，将显示三张作品图片。其余的隐藏在向右的溢出中。当点击左箭头（我可以创建）时，从右边出现一个新的图像滑动视图。点击右箭头将其发送回溢出区域。我不想要滚动条，只想要箭头控制幻灯片。

非常感谢您提供任何帮助。谢谢。

- Chad

---

真的吗？! 那个功能要 40 美元吗？让我看看能不能举个例子……那是在 div 中还是幻灯片占据整个页面？ - Joseph Marikle

你知道吗，即使没有付款，你仍然可以查看js文件。 - kei

@kei 正确...从中学习是可以的...但实际使用就是盗窃... - Joseph Marikle

页面的主要内容div中将包含所有图像的div。每个图像可能也会在自己的div中，这样我就可以用描述性文本和链接来设置它的样式。谢谢。 - Chad

Answer 1

您可以直接使用以下代码：

您只需使用此类代码：

function FixMargin(left) {
    $(this).css("left", left);
}

$(document).ready(function () {

$('#rightbutton').click(function () {
    var left = parseInt($("#bitToSlide").css('left'), 10);
    $("#bitToSlide").animate({ left: left - pageWidth }, 400, FixMargin(left - pageWidth));
});

$('#leftbutton').click(function () {
    var left = parseInt($("#bitToSlide").css('left'), 10);
    $("#bitToSlide").animate({ left: left + pageWidth }, 400, FixMargin(left + pageWidth));
});

}

当你的HTML代码看起来像这样：

<div id="slideleft" class="slide">
    <div class="inner" id="bitToSlide" style="width:1842px">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr valign="top">
                <td id="page1" style="width: 614px">
                </td>

                <td id="page2" style="width: 614px">
                </td>
            </tr>
        </table>
    </div>
</div>

你的 CSS 看起来像这样：

.slide
{
position:relative;
overflow:hidden;
height:365px;
width:597px;
margin:1em 0;
background-color:#E9ECEF;
border:0px
}

.slide .inner
{
position:absolute;
left:0;
bottom:0;
height:365px;
padding:0px;
background-color:#E9ECEF;
color:#333
}

我很久以前写了上面的内容-所以你可能想稍微更新一下（例如用div替换表格），但这个方法是有效的。

显然，您还需要在那里放置两个按钮。

- Peter Munnings

---

我已经接近完成了，但在Dreamweaver中，您的JavaScript代码会生成错误（代码末尾出现红色框）。有任何想法为什么吗？我已将其包装在<script type="text/javascript"> </script> - Chad

Answer 2

有很多jQuery插件可以让你轻松实现这一点。例如：http://slidesjs.com/

希望这能帮到你。

- Cherik

---

谢谢您的建议，但我已经尝试过类似于您发布的 jQuery 滑块，但并不完全符合我的需求。 - Chad

Answer 3

你可以看一下iscroll 4。

http://cubiq.org/iscroll-4

你有一个 scrollTo 方法或 scrollToElement 方法...

- ChristopheCVB

Answer 4

你可以像这样做。这只是给你一个提示，代码没有经过测试。

<div id="imageContainer">
  <div id="imageWrapper">
    <img />
    <img />
  </div>
  <span id="left">Left</span>
  <span id="right">right</span>
</div>

var imageWidth = 200;
$("#left").click(function(){
  $("#imageWrapper").animate({marginLeft:"-="+imageWidth}, 500);
  //Offcourse you need to handle the corner cases when there is not image to move left
});

$("#right").click(function(){
  $("#imageWrapper").animate({marginLeft:"+="+imageWidth}, 500);
});

- ShankarSangoli