Question

好的，我们走了，这是我第一次在这里问一个问题。到目前为止，我在过去的几年里刚读过并学到了很多东西。

无论如何，这正是我想要完成的事情：

我希望有一个自动循环和淡入淡出的内容滑块。但也可以将它连接到同一页面上的不同div。

所以我今天一直在关注很多不同的jquery（内容）滑块。并决定使用jquery循环插件。这几乎可以像我想要的那样工作。

但是经过超过4个小时的网络搜索，并尝试不同的解决方案，我想是时候承认我不会自己解决这个问题了。

我坚持使用pageranchorbuilder，我该怎么做呢？或者我从哪里离开？我希望这很清楚......

 <!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">

#nav { margin: 5px; }
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }
#slideshow { text-align:left; margin-bottom:100px;}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.80.js"></script>
<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
       fx:    'fade', 
    speed:  2500 ,
        pager:      '#nav',
        pagerEvent: 'mouseover',
        allowPagerClickBubble: true,
        pagerAnchorBuilder: function(i, el) {
            return '<div style="float:left;height:200px;width:100px;"><a href="' + el.src + '"><img src="http://cloud.github.com/downloads/malsup/cycle/beach'+ (i+1) +'.jpg" width="100" height:"100"/></a></div>';
        }
    });
});
</script>
</head>
<body>

        <div id="slideshow" class="pics">
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
        </div>


<div id="nav"></div>
</body>
</html>

Answer 1

我希望有一个自动循环和淡入淡出的内容滑块。但也可以将它连接到同一页面上的不同div。

你能详细了解一下你究竟想要完成什么吗？

Answer 2

我已经运行了你的代码。

我看到悬停不能始终如一地运作

我尝试使用循环脚本的以下版本

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

它现在可以保持一致 - 希望你想要的方式。

我使用了那个脚本，就像他们在jquery循环演示页面上使用的那样。

我尝试从下载页面下载名为：jquery.cycle.all.latest.min.js的脚本，但它不起作用，因此不确定脚本中的差异是什么。

将鼠标悬停在div上时，带有幻灯片的Jquery Content滑块。 jquery循环

2 个答案: