javascript - 怎么实现这种图片效果?
PHP中文网
PHP中文网 2017-04-11 11:24:19
[JavaScript讨论组]


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

PHP中文网
PHP中文网

认证0级讲师

全部回复(8)
天蓬老师

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

PHP中文网

请贴网址

怪我咯

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

参考地址

怪我咯

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

高洛峰

Swiper就可以吧

大家讲道理

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

PHP中文网

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文档

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号