jQuery学习实例：焦点图轮播特效

最新推荐文章于 2023-12-05 11:50:20 发布

隔壁小鲜肉

最新推荐文章于 2023-12-05 11:50:20 发布

阅读量506

点赞数

分类专栏：学习总结

学习总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客总结了jQuery实现焦点图轮播特效的学习过程，包括关键的样式布局代码和左右按钮点击及自动轮播的实现细节。

摘要由CSDN通过智能技术生成

焦点轮播图特效就是几张图片滚动播放，本次博客是对其学习的资料进行总结回顾。

下面为全部代码：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>焦点轮播图</title>
    <style type="text/css">
    .papertop-image {
        position: relative;
        width: 568px;
        height: 306px;       
        margin-left: 10px;
        border: 1px solid #e8e8e8;
        overflow: hidden;
    }
    
    .papertop-image .papertopList {
        width: 3976px;
        height: 306px;
        left: -568px;
        z-index: 1;
        position: absolute;
    }
    
    .papertop-image .papertopList a img {
        display: inline-block;
        float: left;
        width: 568px;
        height: 306px;
    }
    
    .papertop-image .papertopBtnleft {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 50%;
        margin-top: -25px;
        cursor: pointer;
        background: url(btnleft.png) -10px -5px no-repeat;
        width: 40px;
        height: 50px;
    }
    
    .papertop-image .papertopBtnleft:hover {
        background: url(btnleft.png) -10px -65px no-repeat;
    }
    
    .papertop-image .papertopBtnright:hover {
        background: url(btnright.png) -10px -65px no-repeat;
    }
    
    .papertop-image .papertopBtnright {
        position: absolute;
        z-index: 2;
        right: 0;
        top: 50%;
        margin-top: -25px;
        cursor: pointer;
        background: url(btnright.png) -10px -5px no-repeat;
        width: 40px;
        height: 50px;
    }
    
    .papertop-image .papertopBtns {
        position: absolute;
        text-align: center;
        bottom: 15px;
        width: 100%;
        z-index: 2;
    }
    
    .papertop-image .papertopBtns span {
        display: inline-block;
        cursor: pointer;
        width: 39px;
        height: 7px;
        margin: 0 6px;
        background: url(btnwhite.jpg) center center no-repeat;
    }
    
    .papertop-image .papertopBtns .greenbtn {
        background: url(btngreen.jpg) center center no-repeat;
    }
    </style>
</head>
<div class="page">
    <div class="papertop-image">
        <div class="papertopList">
            <a href=""><img src="images/jobpath.jpg" alt=""></a>
            <a href=""><img src="images/daili.jpg" alt=""></a>
            <a href=""><img src="images/anzhuo.jpg" alt=""></a>
            <a href=""><img src="images/qianduan.jpg" alt=""></a>
            <a href=""><img src="images/javadujia.jpg" alt=""></a>
            <a href=""><img src="images/jobpath.jpg" alt=""></a>
            <a href=""><img src="images/daili.jpg" alt=""></a>
        </div>
        <span class="papertopBtnleft"></span>
        <span class="papertopBtnright"></span>
        <div class="papertopBtns">
            <span index="1" class="greenbtn"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
    </div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).on("load", function() {
    var list = $(".papertopList");
    var left = $(".papertopBtnleft");
    var right = $(".papertopBtnright");
    var btns = $(".papertopBtns>span");
    var index = 1;
    var moved = false;
    var timer;

    function gbtn() {
        for (var i = 0; i < btns.length; i++) {
            if (btns[i].className == "greenbtn") {
                btns[i].className = "";
                break;
            }
        };
        btns[index - 1].className = "greenbtn";
    }

    function move(num) {
        moved = true;
        var newLeft = parseInt(list.css("left")) + num;
        var time = 600; //位移总时间
        var interval = 10; //位移间隔时间
        var speed = num / (time / interval); //每次位移量
        function go() {
            if ((speed < 0 && parseInt(list.css("left")) > newLeft) || (speed > 0 && parseInt(list.css("left")) < newLeft)) {
                list.css("left", parseInt(list.css("left")) + speed + 'px');
                setTimeout(go, interval);
            } else {
                moved = false;
                list.css("left", newLeft + 'px');
                if (newLeft > -568) {
                    list.css("left", -2840 + 'px');
                }
                if (newLeft < -2840) {
                    list.css("left", -568 + 'px');
                }
            }
        };
        go();
    }

    function play() {
        timer = setInterval(function() {
            right.click();
        }, 3000);
    }

    function stoproll() {
        clearInterval(timer);
    }

    left.click(function() {
        if (index == 1) {
            index = 5
        } else {
            index -= 1;
        }
        gbtn();
        if (!moved) {
            move(568);
        };
    })
    right.click(function() {
        if (index == 5) {
            index = 1;
        } else {
            index += 1;
        }
        gbtn();
        if (!moved) {
            move(-568);
        };
    })
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function() {
            console.log(myIndex)
            if (this.className == "greenbtn") {
                return;
            }
            var myIndex = parseInt(this.getAttribute('index'));
            var offset = -568 * (myIndex - index);
            if (!moved) {
                move(offset);
            }
            index = myIndex;
            gbtn()
        }
    }
    // 自动轮播
    $(".papertop-image").mouseover(function() {
        stoproll();
    });
    $(".papertop-image").mouseout(function() {
        play();
    });
    play()
})
</script>

<body>
</body>

</html>

下面经行代码逐段分析：

1.样式布局关键代码：

.papertop-image { position:relative; overflow:hidden; }

.papertop-list { position:absolute; z-index:1; left:-568px;}

.btns+.btnleft+.btnright { z-index:2; }

2.左右按钮点击滚动：

function move(num) {
    moved = true;
    var newLeft = parseInt(list.css("left")) + num; /*常用变量做存储使用*/
    var time = 600; /*位移总时间*/
    var interval = 10; /*位移间隔时间*/
    var speed = num / (time / interval); /*每次位移量*/
    //绑定点击事件
    function go() {
        //递归实现动画功能
        if ((speed < 0 && parseInt(list.css("left")) > newLeft) || (speed > 0 && parseInt(list.css("left")) < newLeft)) {
            list.css("left", parseInt(list.css("left")) + speed + 'px');
            setTimeout(go, interval);
        } else {
            moved = false;
            list.css("left", newLeft + 'px');
            //判断是否滚动到附属图上
            if (newLeft > -568) {
                list.css("left", -2840 + 'px');
            }
            if (newLeft < -2840) {
                list.css("left", -568 + 'px');
            }
        }
    };
    go();
}
//点击时向左移动568像素
left.click(function() {
        if (index == 1) {
            index = 5
        } else {
            index -= 1;
        }
        gbtn();
        if (!moved) {
            move(568);
        };
    })
    //点击时向右移动568像素
right.click(function() {
    if (index == 5) {
        index = 1;
    } else {
        index += 1;
    }
    gbtn();
    if (!moved) {
        move(-568);
    };
})

3.底部按钮点击切换图片：

function gbtn() {
    for (var i = 0; i < btns.length; i++) {
        if (btns[i].className == "greenbtn") {
            btns[i].className = "";
            break;
        }
    };
    btns[index - 1].className = "greenbtn";
}
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        console.log(myIndex)
        if (this.className == "greenbtn") {
            return;
        }
        var myIndex = parseInt(this.getAttribute('index'));
        var offset = -568 * (myIndex - index);
        if (!moved) {
            move(offset);
        }
        index = myIndex;
        gbtn()
    }
}

4.自动轮播效果：

function play() {
    timer = setInterval(function() {
        right.click();
    }, 3000);
}


function stoproll() {
    timer = clearInterval(timer);
}
$(".papertop-image")[0].onmouseover = stoproll;
$(".papertop-image")[0].onmouseout = play;
play();