jQuery实现友好的轮播图片特效

2020-05-23 06:20:07易采站长站整理

                <li><a href=”#”><img src=”img/n2.jpg” alt=””></a></li>
                <li><a href=”#”><img src=”img/n3.jpg” alt=””></a></li>
                <li><a href=”#”><img src=”img/n4.jpg” alt=””></a></li>
                <li><a href=”#”><img src=”img/n5.jpg” alt=””></a></li>
            </ul>
        </div>
        <div class=”gy-slide-btn”>
            <i class=”gy-slide-home”>首页</i>
            <i class=”gy-slide-prev gy-slide-no”>上一页</i>
            <span class=”gy-slide-cur”>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <i class=”gy-slide-next”>下一页</i>
            <i class=”gy-slide-end”>尾页</i>
        </div>
    </div>

————-JS————–


/*—-使用说明
结构必需一致;多次调用时,最外层赋予不同的id或类名即可
*/
/*—-参数
@ wrap [String] 外层元素的类名或id
@ auto [Boolean] 不设置默认是不自动播放;设置为true,自动播放
@ speed [Number] 每隔几秒图片切换,默认是4秒
*/
function Gy_slider(opt){
    this.wrap = $(opt.wrap);
    this.scroll = this.wrap.find(‘.gy-slide-scroll ul’);
    this.li = this.scroll.find(‘li’);
    this.btn_num = this.wrap.find(‘.gy-slide-btn span’);
    this.btn_home = this.wrap.find(‘.gy-slide-home’);