JQuery大图轮播

Posted 2020-09-21 朱利军

tags:

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

第一步新建一个js文件夹将现有的jquery-1.7.1.min.js放到该文件夹下引如到head部分

第二步封装一个jS脚本方法引入到页面的HEAD部分，代码如下：

 1 function myalert(t, c, tc) {
 2 
 3     var tcstr = "<div id=\"tc\" style=\"position: fixed; width: 400px; left: 50%; margin-left: -200px; top: -500px; border: 1px solid red; box-shadow: 0 0 10px pink; z-index: 1001; background-color: white;\">";
 4     tcstr += "<div id=\"tc-top\" style=\"width: 100%; height: 30px; background-color: red; color: white; font-size: 18px; font-weight: bold; text-align: center; line-height: 30px;\">";
 5     tcstr += t;//这里是标题
 6     tcstr += "</div><div id=\"tc-main\" style=\"padding: 20px; text-align: center;\">";
 7     tcstr += c;
 8     tcstr += "</div><div id=\"tc-bottom\" style=\"position: relative; width: 100%; height: 40px;\">";
 9     tcstr += "<div onclick=\"tcbtn1();\" id=\"tc-btn1\" style=\"position: absolute; top: 5px; left: 50%; margin-left: -50px; width: 100px; height: 30px; background-color: pink; color: white; text-align: center; line-height: 30px; cursor: pointer;\">确定</div></div></div>";
10     tcstr += "<div id=\"tc-zz\" style=\"position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: black; opacity: 0.3; display: none; z-index: 1000;\"></div>";
11 
12     $(document.body).append(tcstr);
13 
14     $("#tc-top").text(t);
15     $("#tc-main").html(c);
16     $("#tc").animate({ top: "100" }, 500).animate({ top: "90" }, 100).animate({ top: "100" }, 200);
17     $("#tc-zz").css("display", "block");
18     if (tc != null) $("#tc-top").css("background-color", tc);
19 }
20 
21 function tcbtn1() {
22     $("#tc").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () {
23         $("#tc-zz").css("display", "none");
24         $("#tc").remove();
25         $("#tc-zz").remove();
26     });
27 }

js脚本方法

第二步新建一个web窗体；该窗体的HTML代码和JQuery代码如下如下：

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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: 800px;
            height: 400px;
            border: 2px solid black;
            overflow: hidden;
        }

        #dt-items {
            position: relative;
            width: 8000px;
            height: 400px;
            z-index: 10;
        }

        .dt-item {
            width: 800px;
            height: 400px;
            float: left;
            background-size: 100%;
        }

        .btn {
            position: relative;
            top: -400px;
            width: 50%;
            height: 100%;
            float: left;
            z-index: 11;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="dt">
            <div id="dt-items">
                <div class="dt-item" style="background-image: url(images/1.jpg);"></div>
                <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/6.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>

View Code

以上是关于JQuery大图轮播的主要内容，如果未能解决你的问题，请参考以下文章

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