Fatal编程技术网
  • jquery/
  • jQuery循环-如何根据当前幻灯片放映索引设置寻呼机动画

jQuery循环-如何根据当前幻灯片放映索引设置寻呼机动画

jquery plugins indexing

jQuery循环-如何根据当前幻灯片放映索引设置寻呼机动画,jquery,plugins,indexing,cycle,pager,Jquery,Plugins,Indexing,Cycle,Pager,以下是我所拥有的： 我在页面上有5张滑动照片，滑动照片下面有1-5个传呼机。我想一次只显示3个寻呼机，所以第4和第5个寻呼机现在是隐藏的。您可以单击“下一步”按钮来设置包含寻呼机的div的动画，以显示第4页和第5页，单击“上一页”按钮，然后返回显示第1页到第3页 以下是我想要实现但不知道如何实现的目标… 如何使包含所有寻呼机的div向左移动，以便在幻灯片放映滑向第四张照片时显示第四和第五页寻呼机？？意思是当幻灯片到达第四张照片时，我如何使该div移动，就像我单击“下一步”按钮一样？？（当幻灯片返

以下是我所拥有的： 我在页面上有5张滑动照片，滑动照片下面有1-5个传呼机。我想一次只显示3个寻呼机，所以第4和第5个寻呼机现在是隐藏的。您可以单击“下一步”按钮来设置包含寻呼机的div的动画，以显示第4页和第5页，单击“上一页”按钮，然后返回显示第1页到第3页

以下是我想要实现但不知道如何实现的目标… 如何使包含所有寻呼机的div向左移动，以便在幻灯片放映滑向第四张照片时显示第四和第五页寻呼机？？意思是当幻灯片到达第四张照片时，我如何使该div移动，就像我单击“下一步”按钮一样？？（当幻灯片返回到第一张照片时，寻呼机应再次移动，以便再次显示第一至第三张寻呼机。）

我不知道脚本的哪个部分可以让我知道哪个幻灯片当前处于活动状态。如果我知道，我想我可以在第四个激活时触发div的动画

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cycle Test</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
        fx:     'turnDown',
        speed:  'fast',
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#nav li:eq(' + (idx) + ') a';
        }
    });
});

</script>
<script type="text/javascript">
$(document).ready(function() {
    $('#next_control').click(function() {
        var c = $('#nav_content');
        var pos = c.position();
        var w = c.width();
        var status = w + pos.left;
        var dif = w - 190;
        var x = w + dif;
        if (status > 190) {
            c.stop().animate({
                left: pos.left - 180
            }, 500)
        };
    });
});

$(document).ready(function() {
    $('#prev_control').click(function() {
        var c = $('#nav_content');
        var pos = c.position();
        if (pos.left < 0) {
            c.stop().animate({
                left: pos.left + 180
            }, 500)
        };
    });
});
</script>
<style type="text/css">
<!--

* {
    margin: 0px;
    padding: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
 #slideshow {
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}
#bot {
    background-color: #CCC;
    height: 50px;
    width: 290px;
    margin-top: 10px;
    position: relative;
}
#nav_content #nav li {
    list-style-type: none;
    float: left;
    height:50px;
    width: 50px;
    margin-left: 10px;
}


#bot #nav_wrapper {
    background-color: #FFF;
    float: left;
    height: 50px;
    width: 190px;
    overflow: hidden;
    position: relative;
}
#bot #previous {
    float: left;
    height: 50px;
    width: 50px;
}
#bot #next {
    float: right;
    height: 50px;
    width: 50px;
}
#bot #nav_wrapper #nav_content {
    height: 50px;
    width: 310px;
    position: absolute;
    left: 0px;
    top: 0px;
}
-->
</style>
</head>

<body>
<div id="slideshow">
<img src="img/beach1.jpg" />
<img src="img/beach2.jpg" />
<img src="img/beach3.jpg" />
<img src="img/beach4.jpg" />
<img src="img/beach5.jpg" />
</div>

<div id="bot">
<div id="previous"><a id="prev_control" href="#">Prev</a></div>
<div id="nav_wrapper">
<div id="nav_content"> 
  <ul id="nav">
      <li><a href="#"><img src="img/beach1.jpg" width="50" height="50" /></a></li>
      <li><a href="#"><img src="img/beach2.jpg" width="50" height="50" /></a></li>
      <li><a href="#"><img src="img/beach3.jpg" width="50" height="50" /></a></li>
      <li><a href="#"><img src="img/beach4.jpg" width="50" height="50" /></a></li>
      <li><a href="#"><img src="img/beach5.jpg" width="50" height="50" /></a></li>
  </ul>
</div>
</div>
<div id="next"><a id="next_control" href="#">Next</a></div>
</div>
</body>
</html>


循环试验
$（函数（）{
$（“#幻灯片放映”）。循环({
外汇：“拒绝”，
速度：“快”，
寻呼机：“#导航”，
pagerAnchorBuilder:函数（idx、幻灯片）{
//返回现有锚点的sel字符串
返回“#nav li:eq（+（idx）+”）a”；
}
});
});
$（文档）.ready（函数（）{
$（“#下一个_控件”）。单击（函数（）{
var c=$（'资产净值'）；
var pos=c.位置（）；
var w=c.宽度（）；
var状态=w+位置左侧；
var-dif=w-190；
var x=w+dif；
如果（状态>190）{
c、 停止（）。设置动画({
左：位置左-180
}, 500)
};
});
});
$（文档）.ready（函数（）{
$（“#上一个控件”）。单击（函数（）{
var c=$（'资产净值'）；
var pos=c.位置（）；
如果（位置左侧<0）{
c、 停止（）。设置动画({
左：位置左+180
}, 500)
};
});
});

    

  • 

  • 

  • 

  • 

  •
来自jQuery cycle插件网站：

使用寻呼机选项时，生成的导航元素只是锚。所以如果你 设置寻呼机选项，如下所示： 寻呼机：“#导航” 可以按如下方式设置锚定的样式：

#nav a { background-color: #fc0 }

#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px;  }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }
此外，活动幻灯片的导航元素被赋予了activeSlide类，因此可以对其进行唯一的样式设置

上面示例中的寻呼机的样式如下：

#nav a { background-color: #fc0 }

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