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

来源：互联网发布：2017年10月份宏观数据编辑：程序博客网时间：2024/06/12 04:15

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

下面为全部代码：

<!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();

0 0