【jQuery笔记Part4】04-jQuery案例-轮播图

最新推荐文章于 2022-06-22 09:32:49 发布

萌宅鹿同学

最新推荐文章于 2022-06-22 09:32:49 发布

阅读量224

点赞数

分类专栏： # jQuery笔记文章标签： jQuery 轮播图 jQuery节点操作

本文链接：https://blog.csdn.net/weixin_43734095/article/details/100112462

版权

jQuery笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jQuery案例-大屏焦点图-节点操作

案例简介
静态页面
添加事件

jQuery笔记目录

案例简介

轮播图；
点击浏览器左侧，则，展示左边一个图片，
点击浏览器右侧，则，展示右边一个图片，
越界循环 1左->4，4右->1

静态页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大屏焦点图-节点操作</title>
    <style>
        * {padding: 0;margin: 0;list-style: none;}
        .box {
            width: 520px;height: 280px;margin: 100px auto;
            border: 1px solid #cccccc;overflow: hidden;
        }
        .box>ul {position: relative;}
        .box>ul>li {position: absolute;left: 0;top: 0;}
        .box>ul>li>img {width: 520px;height: 280px;}
    </style>
</head>
<body>


<div class="box">
    <ul>
        <li><img src="images/01.jpg"></li>
    </ul>
</div>
</body>
</html>

界面：
在这里插入图片描述

添加事件

$(function () {
    /*
      要求:
      点击浏览器左侧，则，展示左边一个图片
      点击浏览器右侧，则，展示右边一个图片
      越界循环  1左->4，4右->1
    */
    //1.准备数据源
    var imageNames = []
    for (var i = 1; i < 5; i++){
        imageNames.push('images/0' + i + '.jpg');
    }
    // console.log(imageNames);

    //2.设置当前的索引
    var currentShowImgIndex = 0;

    //3.监听点击
    $(document).click(function (event) {
        //3.1变量
        var middleX = $(window).width() * 0.5; // 当前屏幕的一半
        var isLeft = false; // 是否左边

        //3.2判断
        // console.log(event.pageX);
        if(event.pageX <= middleX){ // 左边
            currentShowImgIndex  = (currentShowImgIndex - 1 + imageNames.length) % imageNames.length;
            isLeft = true
        }else{  // 右边
            currentShowImgIndex = (currentShowImgIndex + 1) % imageNames.length;
            isLeft = false;
        }

        //3.3创建节点，放在 ul 的最前面
        var imageNmae = imageNames[currentShowImgIndex];
        var $newTag = $('.box>ul>li').clone();
        $newTag.children('img').attr('src',imageNmae);
        $('.box>ul').prepend($newTag);

        // 3.4动画展示和消除
        if(isLeft){ // 鼠标点击左边
            $('.box>ul>li:last').animate({ // 拿到最后一个 li 标签
                width:'-520px'
            },200,function () {
                $(this).remove()
            });
        }else { // 鼠标点击右边
            $('.box>ul>li:last').animate({
                width:'520px'
            },200,function () {
                $(this).remove()
            });
        }

    });