Android防重复点击 哨兵模式 oracle mongoose scripting vue开发教程 vue循环数组 h5表格模板 git视频教程 jquery循环遍历 matlab停止运行命令 反函数的二阶导数 重置hosts mysql教程 python解析json数据 python安装教程 python写文件 java编译 java编译环境 java重载和重写的区别 java线程中断 linux系统命令大全 千千静听绿色版 销售单软件 图解设计模式 小程序源码下载 msdev 在线手册 subscribe 蓝牙测试软件 iar下载 cmd命令数字雨 小米游戏鼠标 编程之家 deallocate firefox绿色版 cad文件 贪吃蛇c语言代码 手机刷机助手 ajax获取数据
当前位置: 首页 > 学习教程  > 编程语言

javascript实现轮播图插件

2020/12/28 18:49:44 文章标签:

javascript实现轮播图插件 (function($) {function Slider(opt) {var opts opt || {};this.wrap opts.father;this.img opts.image;this.itemWidth this.wrap.width(); this.imgNum this.img.length;this.interval opts.interval;this.len this.img.length;this…

javascript实现轮播图插件

(function($) {
    function Slider(opt) {
        var opts = opt || {};
        this.wrap = opts.father;
        this.img = opts.image;
        this.itemWidth = this.wrap.width();        
        this.imgNum = this.img.length;
        this.interval = opts.interval;
        this.len = this.img.length;
        this.init();
    }
    Slider.prototype.init = function(){ 
        this.nowIndex = 0;
        this.flag = true;
        this.timer = undefined;
        this.createDom();        
        this.bindEvent();
        this.sliderAuto();
    }
    Slider.prototype.createDom = function() {
        var len = this.len;
        var str = " ";
        var pointStr = " ";
        var slider = $("<ul class='slider'><ul>");
        var span = $("<span class='leftArr'>&lt;</span><span class='rightArr'>&gt;</span>");
        var point = $("<ol class='point'><ol>");
        for(var i = 0 ; i < len ; i++) {
            str += "<li><img src=" + this.img[i] + "></li>";
            pointStr += "<li></li>";
        }
        str += "<li><img src=" + this.img[0] + "></li>";
        console.log(str);
        point.html(pointStr);
        this.wrap.append(slider.html(str));
        this.wrap.append(point);
        this.wrap.append(span);
        $(".slider").css({
            width: this.itemWidth * (this.len + 1) + "px"
        })
        $(".point li").eq(0).addClass("active");
    }
    Slider.prototype.bindEvent = function() {
        var that = this;
        $(".point li").add(".leftArr").add(".rightArr").on("click",function() {
            if($(this).attr("class") == "leftArr") {
                that.move("leftArr");
            }else if($(this).attr("class") == "rightArr") {
                that.move("rightArr");
            }else {
                var index = $(this).index();
                that.move(index);
            }
        })
        this.wrap.hover(function() {
            $(".leftArr").show();
            $(".rightArr").show();
            clearInterval(that.timer);
        },function() {
            $(".leftArr").hide();
            $(".rightArr").hide();
            that.sliderAuto();
        })
    }
    Slider.prototype.sliderAuto = function() {
        var that = this;
        clearInterval(that.timer);
        that.timer = setInterval(function(){
            that.move("rightArr");
        },that.interval)
    }
    Slider.prototype.move = function(dir) {
        var that = this;
        var imgNum = that.imgNum;
        var itemWidth = that.itemWidth;
        if(that.flag){
            that.flag = false;
            if(dir == "leftArr" || dir == "rightArr") {
                if(dir == "leftArr") {
                    if(that.nowIndex == 0) {
                        $(".slider").css({
                            left: -(imgNum * itemWidth) + "px"
                        })  
                        that.nowIndex = imgNum - 1;
                    }else {
                        console.log(that.nowIndex);
                        that.nowIndex--;
                    }
                }else {
                    if(that.nowIndex == imgNum - 1) {   
                        $(".slider").animate({
                            left: -(imgNum * itemWidth) + "px"
                        },500,function() {
                            $(".slider").css({
                                left: "0px"
                            })
                            that.flag = true;
                        })
                        that.nowIndex = 0;              
                    }else {                   
                        that.nowIndex++;
                    }
                }
            }else {
                that.nowIndex = dir;
            }
            that.slider();
        }
            
    }

    Slider.prototype.slider = function () {
        var that = this;
        $(".slider").animate({
            left: that.nowIndex * (-that.itemWidth)
        },500,function() {
            that.flag = true;
        })
        that.changePoint();
    }
    Slider.prototype.changePoint = function() {
        $(".wrapper .point li").eq(this.nowIndex).addClass("active").siblings().removeClass("active");  
    }


    $.fn.extend({
        SliderImg : function(options) {
            options.father = this || $("body");
            new Slider(options);
        }
    })
})(jQuery)

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    //引入css样式
    <link rel="stylesheet" href="css/lunbotu.css">
</head>
<body>
    <div class="wrapper">
    </div>
    //引入自己代码中的jquery
    <script src="../js/jquery.js"></script>
    //引入插件js
    <script src="js/轮播图插件.js"></script>
    <script>
        $(".wrapper").SliderImg({
            image : ["img/1.png","img/2.png","img/3.png","img/4.png","img/5.png"],
            interval : 2000,
        });
    </script>
</body>
</html>

css部分

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 0px;
}
.wrapper {
    position: relative;
    width: 480px;
    height: 302px;
    margin: 0 auto;
    overflow: hidden;
    border: 3px solid #000;
}
.wrapper .slider {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
.wrapper .slider li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    float: left;
}
.wrapper .slider li img {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    font-size: 0px;
}
.wrapper span {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-family: "SongTi";
    background-color: rgba(0,0,0,0.5);
    color: white;
    font-size: 40px;
    cursor: pointer;
    display: none;
}
.wrapper .leftArr {
    left: 0;
}
.wrapper .rightArr {
    right: 0;
}
.wrapper .point {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255,255,255,0.5);
    border-radius: 10px;
}
.wrapper .point li {
    width: 15px;
    height: 15px;
    background-color: #fff;
    float: left;
    margin: 2px 10px;
    border-radius: 50%;
    cursor: pointer;
}
.wrapper .point .active {
    background-color: #f40;
}

本文链接: http://www.dtmao.cc/news_show_550124.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?