js图片轮播手动切换效果


Posted in Javascript onNovember 10, 2015

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

js图片轮播手动切换效果

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图片轮播手动切换效果代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片轮播手动切换效果</title>
<script type="text/javascript" src="js/ScrollPicLeft.js"></script>
<style>
html,body,ul,li{margin:0; padding:0;}
ul,li{ list-style:none;}
.dd_main{ width:520px;}
.zl_left { width:35px; float:left; text-align:left; padding-top:60px}
.zl_right { width:35px; float:right; text-align:right; padding-top:60px}
.zl_content { width:450px; height:153px; float:left; overflow:hidden;}
.zl_content ul li { width:130px; padding:0 10px; text-align:center; float:left;}
.welcome{ position:fixed; width:100%; text-align:center; bottom:30px;}
.welcome a{ color:#0350B8;}
</style>
</head>

<body>
<div class="dd_main"> 
 <div class="zl_left" id="Left_Photo"><a href="javascript:void(0)"><img src="images/zl_tb1.jpg" width="24" height="32" /></a></div>
 <div class="zl_content">
 <ul id="ISL_Photo">
 <li><img src="images/zl_tp.jpg" width="130" height="153" /></li>
 <li><img src="images/zl_tp.jpg" width="130" height="153" /></li>
 <li><img src="images/zl_tp.jpg" width="130" height="153" /></li>
 <li><img src="images/zl_tp.jpg" width="130" height="153" /></li>
 <li><img src="images/zl_tp.jpg" width="130" height="153" /></li>
 <li><img src="images/zl_tp.jpg" width="130" height="153" /></li>
 <li><img src="images/zl_tp.jpg" width="130" height="153" /></li>
 </ul>
 </div>
 <div class="zl_right" id="Right_Photo"><a href="javascript:void(0)"><img src="images/zl_tb2.jpg" width="24" height="32" /></a></div>
</div>
<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>
</body>
</html>

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

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
Express的路由详解
Dec 10 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
angular directive的简单使用总结
May 24 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 #Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 #Javascript
纯javascript响应式树形菜单效果
Nov 10 #Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 #Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 #Javascript
3种js实现string的substring方法
Nov 09 #Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 #Javascript
You might like
php实现mysql同步的实现方法
2009/10/21 PHP
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
Python数据类型详解(四)字典:dict
2016/05/12 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python聊天室程序(基础版)
2018/04/01 Python
浅析Python数据处理
2018/05/02 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Python装饰器结合递归原理解析
2020/07/02 Python
python中reload重载实例用法
2020/12/15 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
法学毕业生自荐信
2013/11/13 职场文书
财务总经理岗位职责
2014/02/16 职场文书
决心书标准格式
2014/03/11 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
股指期货心得体会
2014/09/13 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
加薪通知
2015/04/25 职场文书
签证工作证明模板
2015/06/15 职场文书
初中数学教学反思范文
2016/02/17 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android