jquery 轮播图，左右切换

最新推荐文章于 2022-03-09 08:36:36 发布

原创最新推荐文章于 2022-03-09 08:36:36 发布 · 6.2k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一款基于jQuery的轮播插件实现方法，通过面向对象的方式组织代码，支持自定义配置项如是否显示导航按钮等。文章提供了完整的HTML、CSS及JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery插件
自己尝试以面向对象的方式写了一个,还有许多值得改进的地方.

使用

//默认显示nav
$(‘selector’).slide()

//不显示nav
$(‘selector’).slide({
nav:false
})

html dom结构

<div class="slide">
        <div class="slide-item">
            <div class="slide-anima">
                <a href="#"><img src="http://img.hb.aicdn.com/d07ec4a5be3679506c4c797950a8fc86721bf87d332e1-eABdhd" alt=""></a>
                <a href="#"><img src="http://img.hb.aicdn.com/53dffb9661e5fb1fd9dc5445882d5e1aac9a7d692e750-C5mby0_fw658" alt=""></a>
                <a href="#"><img src="http://img.hb.aicdn.com/3442d3846b20f2d936af2de8577f182cf298c6f660669-nOU1Nf_fw658" alt=""></a>
            </div>
        </div>
        <div class="slide-nav">
        </div>
    </div>

css代码

<style>

        .slide{
            margin: 0 auto;
            width: 400px;
            overflow: hidden;
            height:200px;
            position: relative;
            top: 0;
        }
        .slide-item{
            position: absolute;
            left: 0;
            top:0;
            right:0;
            bottom: 0;
        }
        .slide-anima{
            position: relative;
            height: 100%;
            width: 100%;
        }
        .slide-item a{
            width: 400px;
            height: 200px;
            overflow: hidden;
            position: absolute;
        }

        .slide-nav{
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            text-align: center;
        }
        .slide-nav span{
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            opacity: .7;
            margin: 0 3px;
            cursor: pointer;
        }
        .slide-nav span.active{
            background: #ff4e00;
            opacity: 1;
        }
    </style>

源码

(function($){
        //构造函数
        function Pa(selector,option) {
            var option=option || {};
            this.nav=(option.nav!=undefined) ? option.nav : true;              //默认nav为真
            console.log(this.nav)
            this.selector=selector;                   //选择器
            this.height=this.selector.height();       //高度
            this.width=this.selector.width();         //可见 宽度
            this.length=$('.slide-anima a',this.selector).length;   //元素的个数
            this.slidenav=$('.slide-nav',this.selector);            //nav
        }

        //排列轮播元素
        Pa.prototype.set=function(){
            var item=jQuery('.slide-item a',this.selector),
                w=this.width;
            item.each(function(e){
                $(this).css({
                    "position":"absolute",
                    "top":0,
                    "left":e*w
                })
            })
        }

        //设置轮播元素的索引
        Pa.prototype.setnav=function () {
            var item=jQuery('.slide-item a',this.selector);
            item.each(function (e) {
                $(this).attr('data-index',e)
            })
            if(this.nav){
                var nav=$('.slide-nav',this.selector);
                for(var i=0;i<this.length;i++){
                    nav.append($('<span />'));
                }
                this.upnav();
                this.selectnav();
            }
        }

        //设置active
        Pa.prototype.upnav=function () {
            var cur=$('.slide-anima a:first',this.selector).data('index');
            this.slidenav.find('span').eq(cur).addClass('active').siblings().removeClass('active')
        }

        //监听nav
        Pa.prototype.selectnav=function () {
            var self=this;
            self.slidenav.find('span').on('click',function () {
                var index=$(this).index(),
                    item=('.slide-anima',self.selector);

                item.find('a[data-index='+index+']').insertBefore(item.find('a:first'));
                self.set();     //重排a
                self.upnav();   //更新nav active
            })
        }

        //播放
        Pa.prototype.play=function () {
            var self=this,
                run,
                item=jQuery('.slide-item',self.selector),
                w=self.width;
            self.setnav();
            self.set();

            //定时器函数
            function runfun() {
                item.animate({
                    left:-w
                },600,function () {
                    item.find('a:first').insertAfter(item.find("a:last"))
                    item.css({
                        "left":0
                    })
                    if(self.nav){
                        self.set();     //重排a
                        self.upnav();   //更新nav active
                    }
                })
            }
            run=setInterval(runfun,4000);
            //监听鼠标滑上
            this.selector.hover(function () {
                clearInterval(run)
            },function () {
                run=setInterval(runfun,4000);
            })

        }

        function play(option) {
            var slider=new Pa($(this),option);
            slider.play()
        }

        $.fn.extend({
            slide:play
        })
    })(jQuery)

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fn</title>
    <style>

        .slide{
            margin: 0 auto;
            width: 400px;
            overflow: hidden;
            height:200px;
            position: relative;
            top: 0;
        }
        .slide-item{
            position: absolute;
            left: 0;
            top:0;
            right:0;
            bottom: 0;
        }
        .slide-anima{
            position: relative;
            height: 100%;
            width: 100%;
        }
        .slide-item a{
            width: 400px;
            height: 200px;
            overflow: hidden;
            position: absolute;
        }

        .slide-nav{
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            text-align: center;
        }
        .slide-nav span{
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            opacity: .7;
            margin: 0 3px;
            cursor: pointer;
        }
        .slide-nav span.active{
            background: #ff4e00;
            opacity: 1;
        }
    </style>
</head>
<body>


    <div class="slide">
        <div class="slide-item">
            <div class="slide-anima">
                <a href="#"><img src="http://img.hb.aicdn.com/d07ec4a5be3679506c4c797950a8fc86721bf87d332e1-eABdhd" alt=""></a>
                <a href="#"><img src="http://img.hb.aicdn.com/53dffb9661e5fb1fd9dc5445882d5e1aac9a7d692e750-C5mby0_fw658" alt=""></a>
                <a href="#"><img src="http://img.hb.aicdn.com/3442d3846b20f2d936af2de8577f182cf298c6f660669-nOU1Nf_fw658" alt=""></a>
            </div>
        </div>
        <div class="slide-nav">
        </div>
    </div>



<script src="../jquery.js"></script>
<script>

    (function($){
        //构造函数
        function Pa(selector,option) {
            var option=option || {};
            this.nav=(option.nav!=undefined) ? option.nav : true;              //默认nav为真
            console.log(this.nav)
            this.selector=selector;                   //选择器
            this.height=this.selector.height();       //高度
            this.width=this.selector.width();         //可见 宽度
            this.length=$('.slide-anima a',this.selector).length;   //元素的个数
            this.slidenav=$('.slide-nav',this.selector);            //nav
        }

        //排列轮播元素
        Pa.prototype.set=function(){
            var item=jQuery('.slide-item a',this.selector),
                w=this.width;
            item.each(function(e){
                $(this).css({
                    "position":"absolute",
                    "top":0,
                    "left":e*w
                })
            })
        }

        //设置轮播元素的索引
        Pa.prototype.setnav=function () {
            var item=jQuery('.slide-item a',this.selector);
            item.each(function (e) {
                $(this).attr('data-index',e)
            })
            if(this.nav){
                var nav=$('.slide-nav',this.selector);
                for(var i=0;i<this.length;i++){
                    nav.append($('<span />'));
                }
                this.upnav();
                this.selectnav();
            }
        }

        //设置active
        Pa.prototype.upnav=function () {
            var cur=$('.slide-anima a:first',this.selector).data('index');
            this.slidenav.find('span').eq(cur).addClass('active').siblings().removeClass('active')
        }

        //监听nav
        Pa.prototype.selectnav=function () {
            var self=this;
            self.slidenav.find('span').on('click',function () {
                var index=$(this).index(),
                    item=('.slide-anima',self.selector);

                item.find('a[data-index='+index+']').insertBefore(item.find('a:first'));
                self.set();     //重排a
                self.upnav();   //更新nav active
            })
        }

        //播放
        Pa.prototype.play=function () {
            var self=this,
                run,
                item=jQuery('.slide-item',self.selector),
                w=self.width;
            self.setnav();
            self.set();

            //定时器函数
            function runfun() {
                item.animate({
                    left:-w
                },600,function () {
                    item.find('a:first').insertAfter(item.find("a:last"))
                    item.css({
                        "left":0
                    })
                    if(self.nav){
                        self.set();     //重排a
                        self.upnav();   //更新nav active
                    }
                })
            }
            run=setInterval(runfun,4000);
            //监听鼠标滑上
            this.selector.hover(function () {
                clearInterval(run)
            },function () {
                run=setInterval(runfun,4000);
            })

        }

        function play(option) {
            var slider=new Pa($(this),option);
            slider.play()
        }

        $.fn.extend({
            slide:play
        })
    })(jQuery)

    jQuery(".slide").slide();

</script>
</body>
</html>