首页 > web前端 > js教程 > 正文

js图片轮播手动切换效果_javascript技巧

php中文网
发布: 2016-05-16 15:32:55
原创
1852人浏览过

利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示、推荐商品之类的栏目。它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果。
不需要调用jquery,初始化简单,使用非常的简单,便利。
实例效果:

js代码:

<script type="text/javascript">
 var scrollPhoto = new ScrollPicleft();
 scrollPhoto.scrollContId = "ISL_Photo"; // 内容容器ID""
 scrollPhoto.arrLeftId = "Left_Photo";//左箭头ID
 scrollPhoto.arrRightId = "Right_Photo"; //右箭头ID
 scrollPhoto.frameWidth = 450;//显示框宽度
 scrollPhoto.pageWidth = 150; //翻页宽度
 scrollPhoto.speed = 10; //移动速度(单位毫秒,越小越快)
 scrollPhoto.space = 10; //每次移动像素(单位px,越大越快)
 scrollPhoto.autoPlay = false; //自动播放
 scrollPhoto.autoPlayTime = 3; //自动播放间隔时间(秒)
 scrollPhoto.initialize(); //初始化 
</script>
登录后复制

本文实例讲述了js图片轮播手动切换效果。分享给大家供大家参考。具体如下:
这是一款基于js图片轮播手动切换效果代码,实现过程很简单。
为大家分享的js图片轮播手动切换效果代码如下



js图片轮播手动切换效果





js图片轮播手动切换效果_javascript技巧
  • js图片轮播手动切换效果_javascript技巧
  • js图片轮播手动切换效果_javascript技巧
  • js图片轮播手动切换效果_javascript技巧
  • js图片轮播手动切换效果_javascript技巧
  • js图片轮播手动切换效果_javascript技巧
  • js图片轮播手动切换效果_javascript技巧
  • js图片轮播手动切换效果_javascript技巧
js图片轮播手动切换效果_javascript技巧
<script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhoto.scrollContId = "ISL_Photo"; // 内容容器ID"" scrollPhoto.arrLeftId = "Left_Photo";//左箭头ID scrollPhoto.arrRightId = "Right_Photo"; //右箭头ID scrollPhoto.frameWidth = 450;//显示框宽度 scrollPhoto.pageWidth = 150; //翻页宽度 scrollPhoto.speed = 10; //移动速度(单位毫秒,越小越快) scrollPhoto.space = 10; //每次移动像素(单位px,越大越快) scrollPhoto.autoPlay = false; //自动播放 scrollPhoto.autoPlayTime = 3; //自动播放间隔时间(秒) scrollPhoto.initialize(); //初始化 </script>
登录后复制

源码下载:js图片轮播手动切换效果

以上就是为大家分享的js图片轮播手动切换效果代码,希望大家可以喜欢,并应用到实践中。

鼠标经过文字标题百叶窗动画特效风格切换图片轮播js效果
鼠标经过文字标题百叶窗动画特效风格切换图片轮播js效果

鼠标经过文字标题百叶窗动画特效风格切换图片轮播js效果代码下载。

鼠标经过文字标题百叶窗动画特效风格切换图片轮播js效果 299
查看详情 鼠标经过文字标题百叶窗动画特效风格切换图片轮播js效果
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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