Javascript高级——8.JQuery轮播代码

最新推荐文章于 2022-08-24 12:28:45 发布

Superstatus

最新推荐文章于 2022-08-24 12:28:45 发布

阅读量259

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Superstatus/article/details/80593478

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

大概思路：

1. 先固定好需要轮播图片的排版，长宽和位置

利用position:realative和position:absloute实现图片横向排版，利用overflow:hidden,属性来隐藏掉其他图片

2. 然后设置并绑定左按钮/右按钮以及事件（通过动态设置left的值）

如果是一张一张进行切换就用控制他的left值来进行计算，当到最后一张让left值变为0，重新开始

淡入淡出轮播图就是控制他的图片层叠关系。

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>轮播图 demo</title>
    <style>
        img {
            width: 650px;
            height: 320px;
        }
    </style>
</head>

<body>
    <div id="myPicbox">
        <a href="#"><img src="img/1.jpg" alt=""></a>
        <a href="#"><img src="img/2.jpg" alt=""></a>
        <a href="#"><img src="img/3.jpg" alt=""></a>
        <a href="#"><img src="img/4.jpg" alt=""></a>
    </div>
    <script src="jquery.js"></script>
    <script src="main.js"></script>
    <script type="text/javascript">
        var myPicbox = new dPicbox("myPicbox");
        myPicbox.init(650, 320);
    </script>
</body>

</html>

JS:

function dPicbox(boxid) {
    this.boxEle = $("#" + boxid);
    this.innerEle;
    this.width;
    this.height;
    this.AllPicNum;
    this.leftArrow;
    this.rightArrow;
    this.nowPic = 1;
    this.Timer;

    this.init = function(width, height) {
        this.width = width;
        this.height = height;
        //overflow只是显示当前图片，隐藏其他图片
        //position:realative和position:absloute实现图片横向排版
        this.boxEle.css({ width: width + "px", height: height + "px", position: "relative", overflow: "hidden" });
        this.AllPicNum = this.boxEle.children().length; //这里获取a元素的长度

        //这里创建新的div:inner来包裹里面的a元素，为什么要包裹，因为下面要设置点击事件
        this.boxEle.wrapInner("<div id='inner'></div>");
        this.innerEle = $("#inner");
        this.innerEle.css({ width: "9999px", position: "absolute", left: "-" + width + "px", top: "0", height: height + "px" });

        //这里获取第一个元素和最后一个的元素  1234   ---》  41234
        var firstEle = this.innerEle.find("a").first().clone();
        var lastEle = this.innerEle.find("a").last().clone()
        this.innerEle.prepend(lastEle);
        this.innerEle.append(firstEle);

        //设置所有图片都是向左浮动
        this.innerEle.find("a").css({ float: "left" });

        //在inner里面 添加两个按钮：左按钮和右按钮
        this.boxEle.append("<div id='ctl'><span id='leftArrow'><</span><span id='rightArrow'>></span></div>");
        this.leftArrow = $("#leftArrow");
        this.rightArrow = $("#rightArrow");
        $("#ctl span").css({ width: "40px", height: "60px", background: "rgb(0,0,0)", position: "absolute", top: "50%", marginTop: "-30px", fontSize: "40px", color: "#ffffff", lineHeight: "60px", textAlign: "center", opacity: "0.4", cursor: "pointer" });
        this.leftArrow.css({ left: "5px" });
        this.rightArrow.css({ right: "5px" });

        //在这里添加左按钮绑定事件和右按钮绑定事件
        this.bind();
        this.autoPlay();
    };

    //左按钮绑定事件和右按钮绑定事件
    this.bind = function() {
        //鼠标移入时，左按钮透明度
        $("#ctl span").on("mouseenter", function() {
            $(this).css({ opacity: "0.8" });
        });
        //鼠标离开时，右按钮透明度
        $("#ctl span").on("mouseleave", function() {
            $(this).css({ opacity: "0.4" });
        });
        var that = this;
        //鼠标点击事件
        this.leftArrow.on("click", function() { that.prePic(); }); //向左移动，上一张图片
        this.rightArrow.on("click", function() { that.nextPic(); }); //向右移动，下一张图片	
        //鼠标移入时，暂停轮播
        this.boxEle.on("mouseenter", function() {
            clearInterval(that.Timer);
        });
        //鼠标离开时，自动轮播
        this.boxEle.on("mouseleave", function() {
            that.autoPlay();
        });
    };

    this.autoPlay = function() {
        that = this;
        this.Timer = setInterval(function() {
            that.nextPic();
        }, 500);
    };
    //下一张图片	
    this.nextPic = function() {
        //当前图片位置在最后一张的时候
        if (this.nowPic == this.AllPicNum) {
            //瞬间跳回到第一个位置的图片
            this.innerEle.css({ left: "0" });
            this.nowPic = 1;
        } else {
            this.nowPic++;
        }
        this.gotoPic();
    };
    //上一张图片	
    this.prePic = function() {
        //当前图片位置在第一张的时候
        if (this.nowPic == 1) {
            //瞬间跳回到最后一个位置的图片
            this.innerEle.css({ left: "-" + (this.AllPicNum + 1) * this.width + "px" });
            this.nowPic = this.AllPicNum;
        } else {
            this.nowPic--;
        }
        this.gotoPic();
    };
    this.gotoPic = function() {
        var nowLeft = "-" + (this.nowPic * this.width) + "px";
        this.innerEle.animate({ left: nowLeft });
    };

}