2017-6-4 用jQuery 做大图轮播

Posted 2020-09-21 Zoe

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2017-6-4 用jQuery 做大图轮播相关的知识，希望对你有一定的参考价值。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/jquery-1.7.1.min.js"></script>
    <title></title>
    <style type="text/css">
        #dt 
        {
            margin-top:50px;
            margin:0 auto;
            width:200px;
            height:200px;
            border:2px solid black;
            overflow:hidden;
        }
        #dt-items
         {
            position:relative;
            width:800px;
            height:200px;
          z-index:10;
        }
        .dt-item 
        {
            width:200px;
            height:200px;
            float:left;
        }
        .btn 
        {position:relative;
           top:-200px;
            width:50%;
            height:100%;
           
            float:left;
            z-index:11;
        }
        #btn-left
         {
           
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="dt">
    <div id="dt-items">
        <div class="dt-item" style="background-image:url(images/2.jpg)"></div>
        <div class="dt-item" style="background-image:url(images/3.jpg)"></div>
        <div class="dt-item" style="background-image:url(images/4.jpg)"></div>
        <div class="dt-item" style="background-image:url(images/5.jpg)"></div>
    </div>
        <div id="btn-left" class="btn"></div>
         <div id="btn-right" class="btn"></div>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">

    var imgindex = 0;
    var timer;

    $("#btn-left").click(function () {
        imgindex--;
        if (imgindex < 0) imgindex = $(".dt-item").length - 1;
        var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex);
        $("#dt-items").stop().animate({ left: imgleft }, 500);
    });

    $("#btn-right").click(function () {
        imgindex++;
        if (imgindex > $(".dt-item").length - 1) imgindex = 0;
        var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex);
        $("#dt-items").stop().animate({ left: imgleft }, 500);
    });

    timer = automove();
    
    function automove()
    {
       return window.setInterval(function () {

            imgindex++;
            if (imgindex > $(".dt-item").length - 1) imgindex = 0;
            var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex);
            $("#dt-items").stop().animate({ left: imgleft }, 500);

        }, 2000);
    }
    $("#dt").hover(function ()
    {
        window.clearInterval(timer);

    }, function ()
    {
        timer = automove();
    });
</script>

无限循环跑：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/jquery-1.7.1.min.js"></script>
    <title></title>
    <style type="text/css">
        #dt 
        {
            margin-top:50px;
            margin:0 auto;
            width:200px;
            height:200px;
            border:2px solid black;
            overflow:hidden;
        }
        #dt-items
         {
            position:relative;
            width:800px;
            height:200px;
          z-index:10;
        }
        .dt-item 
        {
            width:200px;
            height:200px;
            float:left;
        }
        .btn 
        {position:relative;
           top:-200px;
            width:50%;
            height:100%;
           
            float:left;
            z-index:11;
        }
        #btn-left
         {
           
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
   <div id="dt">
    <div id="dt-items">
        <div class="dt-item" style="background-image:url(images/2.jpg)"></div>
        <div class="dt-item" style="background-image:url(images/3.jpg)"></div>
        <div class="dt-item" style="background-image:url(images/4.jpg)"></div>
        <div class="dt-item" style="background-image:url(images/5.jpg)"></div>
         <div class="dt-item" style="background-image:url(images/2.jpg)"></div>
    </div>
        <div id="btn-left" class="btn"></div>
         <div id="btn-right" class="btn"></div>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">

    var imgindex = 0;
    var timer;

    $("#btn-left").click(function () {
        imgindex--;
        if (imgindex < 0) imgindex = $(".dt-item").length - 1;
        var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex);
        $("#dt-items").stop().animate({ left: imgleft }, 500);
    });
    $("#btn-right").click(function () {
        imgindex++;
        if (imgindex >= $(".dt-item").length) { imgindex = 0; }
        var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex);
        $("#dt-items").stop().animate({ left: imgleft }, 500, function () {
            if (imgindex >= ($(".dt-item").length - 1)) {
                $("#dt-items").css("left", "0px");
                imgindex = 0;
            }
        });
        
    });
    timer = automove();

    function automove() {
        return window.setInterval(function () {

            imgindex++;
            if (imgindex >= $(".dt-item").length) { imgindex = 0;}
            var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex);
            $("#dt-items").stop().animate({ left: imgleft }, 500, function () {
                if (imgindex >= ($(".dt-item").length - 1)) {
                    $("#dt-items").css("left", "0px");
                    imgindex = 0;
                }
            });
           

        }, 2000);
    }
    $("#dt").hover(function () {
        window.clearInterval(timer);

    }, function () {
        timer = automove();
    });
</script>

以上是关于2017-6-4 用jQuery 做大图轮播的主要内容，如果未能解决你的问题，请参考以下文章

swiper轮播，小轮播图，点击变大轮播图（小图变大图）