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 相关文章推荐
Ext 今日学习总结
Sep 19 Javascript
js保存当前路径(cookies记录)
Dec 14 Javascript
vue增删改查的简单操作
Jul 15 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
js基础语法与maven项目配置教程案例
Jul 15 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
JS验证码实现代码
2017/09/14 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
关键字throw与throws的用法差异
2016/11/22 面试题
材料加工硕士生求职信
2013/10/10 职场文书
优质的学校老师推荐信
2013/10/28 职场文书
常务副总经理任命书
2014/06/05 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
环保建议书范文
2015/09/14 职场文书
Mybatis是这样防止sql注入的
2021/12/06 Java/Android