怎么实现这种图片效果?

clipboard.png
点击左右按钮可以实现图片转换,而不是轮播图那种,这效果具体是怎么实现的?用到bootstrap吗

阅读 5.1k
11 个回答

效果没看出来啊。有网址吗?贴一下, 或者看一下楼上的吧。

还是轮播,只不过是去掉自动切换、加上键盘事件监听的轮播~
比如:http://www.swiper.com.cn/api/...
你试试按几下左右键,不就是这种效果么。

监听keydown事件,并查看其keycode.
左右箭头的keycode分别是:
左: 37
右: 39

参考地址

这其实算是一个手动轮播样式,和自动轮播的区别就是键盘和手动(click)触发而非setInterval或者setTimeout触发而已bootstrap估计是不行,你试着找找网上的demo吧,改一下就是了。

Swiper就可以吧

这个效果很简单的,你去swiper好好读读api,里面有解决方法的。

var now = 0; //图片当前的索引;就是当前播放的是第几张图片
var index = 0; //标记的索引
var len = img.length; //图片的长度
left.onclick = function(){

if(now==0){//如果当前是第一张,点击之后变成最后一张
    now = len;
}
now--;

}
right.onclick = function(){//如果当前是最后一张,点击之后就显示第一张

if(now == len-1){
    now=-1;
}
now++;
   

}

说到底还是轮播..只不过去掉自动切换改成点击切换啦~可以参考楼上其他答案~或者自己看一下swiper的api文档

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题