ScrollPicLeft.js实现的图片前后切换效果-源码下载

ScrollPicLeft.js实现的图片前后切换效果-源码下载

ScrollPicLeft.js实现的图片的前后切换效果,适用于网页中的证书展示、推荐商品之类的栏目。

功能:可以手动点击前后切换箭头按钮,进行图片的翻页,浏览上一张,下一张的效果。

特点:代码精简,不需要使用JQuery,功能强大,使用非常的简单,便利。!

在网页引入ScrollPicLeft.js

<script type="text/javascript" src="js/ScrollPicLeft.js"></script>

HTML:

<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/certificate.jpg" width="130" height="153" /></li>
      <li><img src="images/certificate.jpg" width="130" height="153" /></li>
      <li><img src="images/certificate.jpg" width="130" height="153" /></li>
      <li><img src="images/certificate.jpg" width="130" height="153" /></li>
      <li><img src="images/certificate.jpg" width="130" height="153" /></li>
      <li><img src="images/certificate.jpg" width="130" height="153" /></li>
      <li><img src="images/certificate.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>

CSS:

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;}

JS:

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(); //初始化

插件源码下载:图片前后切换.zip

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4122.html

(1)
上一篇 2019年11月1日 下午2:12
下一篇 2019年11月5日 下午7:52

99%的人还看了以下文章

  • 网页中制作精美饼状图源码

    本文使用HTML5 Canvas和jQuery轻松制作精美的动态饼状图,当鼠标点击某个区域时,会动态分享,并高亮显示。饼状图根据表格中指定数据生成,修改使用都非常方便,值得收藏。

    2022年7月14日
    1470
  • 简单纯js实现的网页tab选项卡切换效果

    今天给大家分享一款非常简单实用的JS网页tab选项卡切换效果,当鼠标放到不同的标签项上或单击该栏目标签会显示不同的内容。

    2018年2月12日
    1.4K0
  • 4个最常用的css3动画库-300多款不同类型的CSS3动画源码

    一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现。 查看演示: https://daneden.github.io/animate….

    2021年1月25日 源码下载
    1.3K0
  • 导航特效:jquery实现当前(活动)菜单样式变化

    用户点击导航或菜单上不同的栏目,被选中的导航栏目会变换样式,出现图片或背景颜色的变化,用于标识是否是当前栏目或活动选项。 本教程使用jquery实现导航菜单当前(活动)菜单样式变化,导航菜单模式用的是背景颜色,你可以换成背景图片以符合建站需要。 当前(活动)菜单样式变化实现原理 在html代码中给首页(默认选中)加上class名cur <a href=…

    2018年2月8日
    1.4K0
  • 网页右侧可隐藏的浮动QQ在线客服源码下载

    在线客服是企业网站必不可少的在线交流渠道,本站分享的在网页右侧可隐藏的浮动QQ在线客服使用jquery编写,固定在网站右侧不随滚动条滚动,点击展开,再次点击收缩,蓝色风格,调用方便。 网页右侧可隐藏的浮动QQ在线客服效果 HTML代码: <div id=floatTools class=jz125> <div class=floatL&gt…

    2018年8月2日
    1.3K0
  • 免费蹭网!破解WiFi密码的Python程序源码分享

    文章主要介绍了如何利用Python探测附近WIFI基于python脚本实现wifi密码的暴力破解从而实现免费蹭网,不建议大家做任何破坏性的操作和任何不当的行为!

    2023年1月29日
    7580

发表回复

登录后才能评论