jqury轮播图

最新推荐文章于 2025-05-15 09:21:09 发布

转载最新推荐文章于 2025-05-15 09:21:09 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/iriliguo/p/6370215.html

本文介绍了一个使用HTML、CSS和jQuery实现的图片轮播动画效果。该动画实现了图片从左向右依次显示，轮播完毕后从右返回至上一张图片的位置，形成连续循环播放的效果。


实现效果：图片往左依次出现，轮播完后图片往右依次退到上一张，如此循环往复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.1.1.min.js"></script>
    <style>
.one {
    width: 5000px;
    font-size: 0;
    /*font-size: 0;清除图片间的空隙*/
    position: relative;
}
        .two{
            width: 570px;
            height:273px;
            overflow: hidden;
        }

    </style>
</head>
<body>
<div class="two">
<div class="one">
    <img src="../img/1.jpg">
    <img src="../img/2.jpg">
    <img src="../img/3.jpg">
    <img src="../img/4.jpg">
</div>
<script>
    var timer;//计时器
    var i=0;//图片索引
    var width=570;
    is =false;
    $(function () {
         show();
    })
    function show() {
        timer = setInterval(function () {
            showTime();
            if(!is){
                i++;
            }else {
                i--;
            }
        },2000)
    }//计时器函数
    function  showTime() {
        $(".one").animate({left:-i*width+"px"},700,function () {
            if(i==3){
                is=true;
            }//i=3时，is=true执行i--
            if(i==0){
                is=false;
            }//i=0时，is=false执行i++
        });
    }//移动函数
</script>
</body>
</html>