js实现索引图片切换效果

发布时间：2020-12-14 23:06:47 所属栏目：资源来源：网络整理

导读：本篇章节讲解js实现索引图片切换效果的代码。供大家参考研究。具体如下：运行效果截图如下：具体代码如下 html代码： div id="slideshowHolder" img src="img/1.jpg" / img src="img/2.jpg" / img src="img/3.jpg" / /div css代码： .ft-prev,.ft-

本篇章节讲解js实现索引图片切换效果的代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下

html代码：

<div id="slideshowHolder">
    <img src="img/1.jpg" />
    <img src="img/2.jpg" />
    <img src="img/3.jpg" />
    </div>

css代码：

.ft-prev,.ft-next {
      background-color: #000;
      padding: 0 10px;
      color:#fff;
    }

js代码：

$(document).ready(function () {
      $('#slideshowHolder').jqFancyTransitions({
        effect: '',// wave,zipper,curtain
        width: 500,// width of panel
        height: 700,// height of panel
        strips: 20,// number of strips
        delay: 5000,// delay between images in ms
        stripDelay: 50,// delay beetwen strips in ms
        titleOpacity: 0.7,// opacity of title
        titleSpeed: 1000,// speed of title appereance in ms
        position: 'alternate',// top,bottom,alternate,curtain
        direction: 'fountainAlternate',// left,right,random,fountain,fountainAlternate
        navigation: true,// prev and next navigation buttons
        links: true // show images as links
      });
    });

以上就是js实现索引图片切换效果的主要代码，希望对大家动手实现图片切换效果。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!