jquery编写的轮播图

最新推荐文章于 2023-05-23 10:54:11 发布

换挡的小钢炮

最新推荐文章于 2023-05-23 10:54:11 发布

阅读量320

点赞数

分类专栏：转载收集

转载收集专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery轮播图-jq22.com</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<script>
//这里是自定义方法，用于随机生成颜色和随机数
// 常用工具
// 产生随机数函数
function randomNumber(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}
// 随机颜色函数
function randomColor() {
    var red = randomNumber(0, 255);
    var green = randomNumber(0, 255);
    var blue = randomNumber(0, 255);
    var rColor = "rgb(" + red + "," + green + "," + blue + ")";
    return rColor;
}
//以下是核心代码
// 如果要循环的话必须要有三页以上
// 显示页数
var $pageCount = 5;
// 显示框
var $swiper = $("<div id='swiper'></div>");
$swiper.css({
    width: "300px",
    height: "300px",
    border: "5px solid black",
    margin: "auto",
    position: "relative",
    overflow: "hidden"
});
$("body").append($swiper);
// 添加总页码和当前页码属性
$swiper.attr("pageCount", $pageCount).attr("currentPage", 0);
// var hrefs = ["#", "#", "#", "#", "#"];
// $swiper.click(function () {
//     var currentHref = parseInt($swiper.attr("currentPage"));
//     location.href = hrefs[currentHref];
// });

var hrefs = ["#", "#", "#", "#", "#"];//连接地址
//创建页面
for (var i = 0; i < $swiper.attr("pageCount"); i++) {
    var $page = $("<div class='page'></div>");
    // 页面页码
    $page.attr("pageNo", i);

    $swiper.append($page);
    $page.css({
        width: "100%",
        height: "100%",
        position: "absolute",
        top: "0px",
        //    left: i * $page.width(),
        background: randomColor(),
        fontSize: "80px",
        textAlign: "center",
        lineHeight: "300px",
        transition: "all 1s"
    });
    $page.text(i);
    $page.click(function() {
        var currentHref = parseInt($(this).attr("pageNo"));
        // location.href = hrefs[currentHref];
        window.open(hrefs[currentHref], "_blank", "width=300,height=300,top=100,left=100");
    });
}

// 添加点击按钮(下一页)
var $nextBtn = $("<div id='nextBtn'></div>");
$nextBtn.css({
    width: "20px",
    height: "100px",
    border: "1px solid blue",
    position: "absolute",
    top: "100px",
    right: "0px",
    zIndex: "200"
});
// 给函数名加（）表示调用此函数，并且将函数的返回值作为参数传递给click
// 而此时是将nextpage这个函数的引用传递给click，因此不用加（）（典型的回调函数）
$nextBtn.click(function() {
    stop();
    nextPage();
    nextDot();
    run();
});
$swiper.append($nextBtn);
// (上一页)
var $previousBtn = $("<div id='previousBtn'></div>");
$previousBtn.css({
    width: "20px",
    height: "100px",
    border: "1px solid blue",
    position: "absolute",
    top: "100px",
    left: "0px",
    zIndex: "200"
});
$previousBtn.click(function() {
    stop();
    previousPage();
    previousDot();
    run();
});
$swiper.append($previousBtn);

setCurrentPage(0);
// 下一页的函数
function nextPage() {
    var current = parseInt($swiper.attr("currentPage")) + 1;
    // current %= 5;
    setCurrentPage(current);
}
// 下一页的函数
function previousPage() {
    var current = parseInt($swiper.attr("currentPage")) - 1;
    // if (current < 0) {
    //     current += 5;
    // }
    setCurrentPage(current);
}

var changePageFlag = false;
// 根据页面得知当前位置
function setCurrentPage(pageNo) {
    // 设置换页标志，当动画播放完成时为false，可以进行换页
    // if (changePageFlag) {
    //     return;
    // }
    // // 换完一次之后设置为true，不能换页
    // changePageFlag = true;
    // // 当1秒之后动画播放结束之后可以换页(延时器)
    // setTimeout(function () {
    //     changePageFlag = false;
    // }, 1000);
    if (pageNo >= $swiper.attr("pageCount")) {
        pageNo = 0;
    } else if (pageNo < 0) {
        pageNo = $swiper.attr("pageCount") - 1;
    }
    $(".page").each(function(n, obj) {
        // $($(".page")[pageNo]).css("zIndex", "100");
        if (pageNo == n) {
            //将当前页的层级调到最高（当前页就是现在为n的页数时，就表示当前页即为现在取到的obj）
            $(obj).css("zIndex", "100");
        } else {
            $(obj).css("zIndex", "0");
        }
        // $(obj).attr("pageNo")页面页码   pageNo当前显示页码
        // 计算页面偏移
        var $offsetPage = $(obj).attr("pageNo") - pageNo;
        if ($offsetPage > Math.floor($swiper.attr("pageCount") / 2)) {
            $offsetPage -= $pageCount;
        } else if ($offsetPage < -Math.floor($swiper.attr("pageCount") / 2)) {
            $offsetPage += parseInt($swiper.attr("pageCount"));
        }
        $(obj).css("left", $offsetPage * $page.width());

        // 更新容器的当前页码
        $swiper.attr("currentPage", pageNo);
    });
    console.log($swiper.attr("currentPage"));
}

// 页显示器
var $pageCount = 5;
var $pagination = $("<div id='pagination'></div>");
$pagination.attr("pageCount", $pageCount).attr("currentPage", 0);
$pagination.css({
    margin: "auto",
    marginTop: "200px",
    width: "300px",
    height: "80px",
    border: "1px solid black",
    textAlign: "center",
    lineHeight: "80px",
    position: "absolute",
    bottom: "0px",
    zIndex: "101"
});
$swiper.append($pagination);
// 页显示器的点
for (var i = 0; i < parseInt($pagination.attr("pageCount")); i++) {
    var $dot = $("<span class='dot'></dot>");
    $dot.attr("pageNo", i);
    $pagination.append($dot);
    $dot.css({
        width: "10px",
        height: "10px",
        border: "1px solid gray",
        borderRadius: "10px",
        display: "inline-block",
        cursor: "pointer",
        background: "white",
        margin: "0px 20px"
    });
    // 设置点击函数
    $dot.click(function() {
        console.log(this);
        stop();
        setCurrentDot($(this).attr("pageNo"));
        setCurrentPage($(this).attr("pageNo"));
        run();
    });
}
// 换点函数
function nextDot() {
    var current = parseInt($pagination.attr("currentPage")) + 1;
    // current %= 5;
    setCurrentDot(current);
}

function previousDot() {
    var current = parseInt($pagination.attr("currentPage")) - 1;
    // current %= 5;
    setCurrentDot(current);
}
// 当前点的函数，改变当前点的颜色

function setCurrentDot(pageNo) {
    if (pageNo >= $pagination.attr("pageCount")) {
        pageNo = 0;
    } else if (pageNo < 0) {
        pageNo = $pagination.attr("pageCount") - 1;
    }

    $(".dot").css("background", "white");
    // dot是dom的节点对象
    // var dot = $("dot")[pageNo];
    // 要使用jQuery中的函数必须用$()括起来，改为jQuery对象
    // $(dot).css("background", "white");
    $($(".dot")[pageNo]).css("background", "red");
    $pagination.attr("currentPage", pageNo);
}
setCurrentDot(0);
var timer = null;

function run() {
    timer = setInterval(function() {
        nextPage();
        nextDot();
    }, 2000);
}

function stop() {
    clearInterval(timer);
    timer = null;
}
run();</script>
</body>
</html>

换挡的小钢炮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery编写的轮播图

jquery轮播图-jq22.com//这里是自定义方法，用于随机生成颜色和随机数// 常用工具// 产生随机数函数function randomNumber(min, max) { return Math.round(Math.random() * (max - min) + min);}// 随机颜色函数function rando
复制链接

扫一扫