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

江山如画 • 2019年11月1日下午2:37 • 源码下载, 网页特效 • 阅读 10541

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