首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Jquery滑块按相反顺序排列

Jquery滑块按相反顺序排列
EN

Stack Overflow用户
提问于 2014-06-10 07:01:16
回答 2查看 552关注 0票数 0

这是jquery图像滑块的代码。

http://jsfiddle.net/6pLg5/

代码语言:javascript
代码运行次数:0
运行
复制
$(".Slider > div:gt(0)").hide();

function slideLoop() {
  $('.Slider > div:first')
  .next()
  .show()
  .end()
  .appendTo('.Slider');
}

slideLoop();

setInterval(slideLoop, 3000);

$('.right').click(
    slideLoop
)

我在做控制按钮。向右滑动是有效的。如何制作幻灯片左函数?

提前谢谢。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-06-10 08:01:10

试试这个..。

HTML代码

代码语言:javascript
代码运行次数:0
运行
复制
<div id="img-grp-wrap">
    <div class="img-wrap">
        <img src="http://www.pictures-of-cats.org/images/ragdoll-cat-small-pictures-of-cats.jpg" />
        <img src="http://0.tqn.com/d/paganwiccan/1/G/T/1/-/-/BlackCat.jpg" />
        <img src="http://2.bp.blogspot.com/-H_iTYn3QQOk/Tfp5aK2vi5I/AAAAAAAAABM/QM45bNOM4HY/s1600/cat-claw.jpg" />
        <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" />
    </div>    
    <img src="http://annhowardesign.com/images/arrowright.jpg" class="next" alt="Next"/> 
    <img src="http://annhowardesign.com/images/arrowleft.jpg" class="prev" alt="Previous"/>     
</div>

CSS..。

代码语言:javascript
代码运行次数:0
运行
复制
#img-grp-wrap {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 100px auto;
}

.img-wrap {
    position: relative;
    border: 1px solid #CCC;
    width: 180px;
    height: 180px;
}

.img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    -moz-box-shadow: 1px 1px 4px #CCC;
    padding: 10px;
}

.next, .prev {
    position: absolute;
    cursor: pointer;
    top: 70px;
}

.next {
    right: -40px;
}

.prev {
    left: -40px;
}

Jquery..。

代码语言:javascript
代码运行次数:0
运行
复制
$('.img-wrap img:gt(0)').hide();

$('.next').click(function() {
    $('.img-wrap img:first-child').fadeOut().next().fadeIn().end().appendTo('.img-wrap');
});

$('.prev').click(function() {
    $('.img-wrap img:first-child').fadeOut();
    $('.img-wrap img:last-child').prependTo('.img-wrap').fadeOut();
    $('.img-wrap img:first-child').fadeIn();
});

最后,工作的小提琴是..。http://jsfiddle.net/b4T7m/

如果你需要和setInterval..。http://jsfiddle.net/bh6aY/

享受你的编码…!

票数 0
EN

Stack Overflow用户

发布于 2014-06-10 07:04:40

试试这个功能。

代码语言:javascript
代码运行次数:0
运行
复制
function reverseLoop() {
  $('.Slider > div:last')
  .addClass('animation')
  .prev()
  .removeClass('animation')
  .show()
  .end()
  .appendTo('.Slider');
}

setInterval(reverseLoop, 8000);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24134781

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档