pic_tab.js - 一款支持图片左右滚动,点击缩略图放大功能的jQuery效果的插件

文章内容

pic_tab.js是一款可以支持图片左右滚动,并且可以点击缩略图实现放大功能的插件,下面直接上代码：

引入必要文件

<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> 
<script src="js/pic_tab.js" type="text/javascript"></script>

html代码

<div class="product">
    <div class="container">
        <div class="product_xx" id="demo1">
            <div class="ban2" id="ban_pic1">
                <ul>
                    <li><a href="#">
                        <div class="pro_pic">
                            <img src="images/1.jpg" alt="" />
                        </div>
                        <div class="pro_hover">
                            <h3>
                                产品1
                            </h3>
                            <div class="pro_info">
                                <p>
                                    总体介绍：产品1
                                </p>
                            </div>
                            <span>more</span>
                        </div>
                    </a></li>
                    <li><a href="#">
                        <div class="pro_pic">
                            <img src="images/1.jpg" alt="" />
                        </div>
                        <div class="pro_hover">
                            <h3>
                                产品2
                            </h3>
                            <div class="pro_info">
                                <p>
                                    总体介绍：产品2
                                </p>
                            </div>
                            <span>more</span>
                        </div>
                    </a></li>
                    <li><a href="#">
                        <div class="pro_pic">
                            <img src="images/1.jpg" alt="" />
                        </div>
                        <div class="pro_hover">
                            <h3>
                                产品3
                            </h3>
                            <div class="pro_info">
                                <p>
                                    总体介绍：产品3
                                </p>
                            </div>
                            <span>more</span>
                        </div>
                    </a></li>
                    <li><a href="#">
                        <div class="pro_pic">
                            <img src="images/1.jpg" alt="" />
                        </div>
                        <div class="pro_hover">
                            <h3>
                                产品4
                            </h3>
                            <div class="pro_info">
                                <p>
                                    总体介绍：产品4
                                </p>
                            </div>
                            <span>more</span>
                        </div>
                    </a></li>
                    <li><a href="#">
                        <div class="pro_pic">
                            <img src="images/1.jpg" alt="" />
                        </div>
                        <div class="pro_hover">
                            <h3>
                                产品5
                            </h3>
                            <div class="pro_info">
                                <p>
                                    总体介绍：产品5
                                </p>
                            </div>
                            <span>more</span>
                        </div>
                    </a></li>
                </ul>
            </div>
            <div class="min_pic">
                <div class="prev_btn1" id="prev_btn1">
                </div>
                <div class="num " id="ban_num1">
                    <ul>
                        <li>
                            <img src="images/1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="images/1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="images/1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="images/1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="images/1.jpg" alt="" />
                        </li>
                    </ul>
                </div>
                <div class="next_btn1" id="next_btn1">
                </div>
            </div>
        </div>
    </div>
</div>

调用pic_tab.js

<script>

     $('#demo1').banqh({
         box: "#demo1",
         pic: "#ban_pic1",
         pnum: "#ban_num1",
         prev_btn: "#prev_btn1",
         next_btn: "#next_btn1",
         pop_div: "#demo2",
         autoplay: true,
         interTime: 5000,
         delayTime: 400,
         order: 0,
         picdire: true,
         mindire: true,
         min_picnum: 5,
         pop_up: false
     });
         
 </script>

参数说明

<script type="text/javascript">
    $('#demo1').banqh({
        box: "#demo1", //总框架
        pic: "#ban_pic1", //大图框架
        pnum: "#ban_num1", //小图框架
        prev_btn: "#prev_btn1", //小图左箭头
        next_btn: "#next_btn1", //小图右箭头
        pop_prev: "#prev2", //弹出框左箭头
        pop_next: "#next2", //弹出框右箭头
        prev: "#prev1", //大图左箭头
        next: "#next1", //大图右箭头
        pop_div: "#demo2", //弹出框框架
        pop_pic: "#ban_pic2", //弹出框图片框架
        pop_xx: ".pop_up_xx", //关闭弹出框按钮
        mhc: ".mhc", //朦灰层
        autoplay: true, //是否自动播放
        interTime: 5000, //图片自动切换间隔
        delayTime: 400, //切换一张图片时间
        pop_delayTime: 400, //弹出框切换一张图片时间
        order: 0, //当前显示的图片（从0开始）
        picdire: true, //大图滚动方向（true为水平方向滚动）
        mindire: true, //小图滚动方向（true为水平方向滚动）
        min_picnum: 5, //小图显示数量
        pop_up: true//大图是否有弹出框
    });
</script>