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 相关文章推荐
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
JavaScript变量声明详解
Nov 27 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
JavaScript基础之this详解
Jun 04 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 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
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
python读写ini配置文件方法实例分析
2015/06/30 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python网站验证码识别
2016/01/25 Python
Django日志模块logging的配置详解
2017/02/14 Python
Python中super函数的用法
2017/11/17 Python
django_orm查询性能优化方法
2018/08/20 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Python类的动态绑定实现原理
2020/03/21 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
财经学院自荐信范文
2014/02/02 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
安阳殷墟导游词
2015/02/10 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
社区低保工作总结2015
2015/07/23 职场文书
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技