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%的人还看了以下文章

  • 立体动画按钮、切换开关

    实例名称:立体动画按钮、切换开关在线预览:https://codepen.io/chrisgannon/pen/ZaPmKp HTML代码: <div id=”app”></div> CSS代码: body { background-color:#FFFCF9; overflow: hidden; text-align:center;…

    2019年10月17日
    4.6K0
  • 精美的滑出式水平导航特效

    一个精美的滑出式水平导航特效,打开页面只能看到文本链接,用户将鼠标悬停于标签上时,该导航菜单项目会滑出。 预览     下载源码 1、HTML结构 导航实现仅用一个简单的无序列表 <ul id=”navigation”> <li class=”home”><a href=””><span>Home</sp…

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

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

    2021年1月25日 源码下载
    3.2K0
  • 两个非常简单的JS图片无缝滚动代码

    简单的marquee标签可以实现文字或图片滚动,但是会有空白,不连续。本文分享两个非常简单,使用JS实现的图片无缝滚动代码。

    2018年2月9日
    4.6K0
  • 导航特效:jquery实现当前(活动)菜单样式变化

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

    2018年2月8日
    3.0K0
  • 纯CSS制作三级导航菜单

    本文分享如何使用纯CSS制作三级导航菜单,优点:代码简洁,速度快。 HTML代码: <!–代码部分begin www.125jz.com–> <div class=”menu”> <ul class=”nav1″> <li class=”li1″><a href=”http://www.125jz.c…

    2018年8月2日
    2.8K0

发表回复

登录后才能评论