图片放大显示带倒影和滚动条的js图片轮播效果

        图片放大显示带倒影和滚动条的js图片轮播效果，支持鼠标拖动和鼠标滚轮事件，点击图片或者滚动滚轮或者拉动滚动条，对应图片居中显示，并且放大，点击放大后的图片还可以放的更大。兼容IE8+、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等浏览器。
        友情提醒：插件在预览的时候，图片不清晰，是因为经过了有损压缩处理，与插件本身无关。您下载下来后，可以换上清晰的图片。
1、在head区域引入相关css文件：

<link href="css/style.css" rel="stylesheet" type="text/css" />

2、在body区域引入下面的代码：

<div id="imageFlow">
    <div class="bank">
        <a rel="images/L_Website_list1.jpg" title="S standard web services">Welcome to customize!</a>
        <a rel="images/L_Website_list2.jpg" title="S canary site service">Welcome to customize!</a>
        <a rel="images/L_Website_list3.jpg" title="S blue diamond site service">Welcome to customize!</a>
        <a rel="images/L_Website_list4.jpg" title="S red website building services">Welcome to customize!</a>
    </div>
    <div class="text">
        <div class="title">Loading</div>
        <div class="legend">Please wait...</div>
    </div>
    <div class="scrollbar">
        <img class="track" src="images/sb.gif" alt="">
        <img class="arrow-left" src="images/sl.gif" alt="">
        <img class="arrow-right" src="images/sr.gif" alt="">
        <img class="bar" src="images/sc.gif" alt="">
    </div>
</div>
<script type="text/javascript" src="js/imageFlow.js"></script>

3、参数设置：
在imageFlow.js文件找到下面的代码：

imf.create("imageFlow", 0.3, 1.18, 10);

后面的三个参数依次是：图片显示区域的大小,图片放大的比例,图片间距。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！