实战练习----jQuery 实现图片轮播

最新推荐文章于 2021-07-24 23:28:29 发布

wyh-000000

最新推荐文章于 2021-07-24 23:28:29 发布

阅读量188

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41082623/article/details/88093148

本文介绍了一个使用jQuery实现的图片轮播插件，包括自动轮播、鼠标悬停暂停、左右翻页及底部导航等功能。通过CSS和jQuery，该插件能够创建一个交互式的图片展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 实现图片轮播效果：

这是css代码部分：

*{
    margin:0;
    padding:0;
}
.container{
    width:790px;
    height:340px;
    margin:200px auto;
    position:relative;
    overflow:hidden;
    /*border:3px solid hotpink;*/
}
.inner{
    width:7777px;
    height:340px;
    position:relative;
    overflow: hidden;
}
.innerwraper{
    float:left;
}
.arrow{
    display:none;
}
.container:hover .arrow{
    display:block;
}
.left-arrow,.right-arrow{
    position:absolute;
    top:45%;
    font-weight: 400;
    font-size:25px;
    color: hotpink;
    height:60px;
    line-height: 60px;
    width:30px;
    background-color: rgba(192, 192, 192, 0.1);
    cursor: pointer;

}
.left-arrow{
    left:0;
}
.right-arrow{
    right:0;
}
.right-arrow:hover,.left-arrow:hover{
    background-color: rgba(192, 192, 192, 0.55);
}
.pagination{
    position:absolute;
    bottom: 5px;
    width:200px;
    height:20px;
    /*background-color: silver;*/
    color:white;
    left:330px;
}
.pagination>span{
    display:inline-block;
    text-align: center;
    background-color: #2e7fff;
    width:20px;
    height:20px;
    margin:0 0.3px;
    /*border:1px solid red;*/
    -webkit-border-radius: 50%;
    cursor: pointer;
}
.current{
    background-color: #ff538d!important;
}

这是html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="inner">
        <div class="innerwraper"><img src="images/1.jpg" alt=""/></div>
        <div class="innerwraper"><img src="images/2.jpg" alt=""/></div>
        <div class="innerwraper"><img src="images/3.jpg" alt=""/></div>
        <div class="innerwraper"><img src="images/4.jpg" alt=""/></div>
        <div class="innerwraper"><img src="images/5.jpg" alt=""/></div>
        <div class="innerwraper"><img src="images/6.jpg" alt=""/></div>
        <div class="innerwraper"><img src="images/7.jpg" alt=""/></div>
        <div class="innerwraper"><img src="images/8.jpg" alt=""/></div>
        <div class="innerwraper"><img src="images/1.jpg" alt=""/></div>
    </div>
    <div class="arrow">
        <span class="left-arrow"><</span>
        <span class="right-arrow">></span>
    </div>
    <div class="pagination">
        <span class="current">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
    </div>
</div>


<script src="jQuery/jquery-1.12.4.js"></script>
<script src="jQuery/jq.js"></script>

</body>
</html>

这是jquery代码：

分别实现自动轮播、鼠标移入移出效果、底部导航以及左右翻页：

/**
 * Created by DELL on 2019/3/3.
 */
$(function () {
    var count = 0;
    var timer = null;
    var leftArrow = $(".left-arrow");
    var rightArrow = $(".right-arrow");
    var innerWraper = $(".innerwraper");
    var imageWidth=$(".innerwraper img:first-child").eq(0).width();
    var span = $(".pagination>span");

    //自动轮播
    autoGo();
    function autoGo() {
        timer=setInterval(selectPic, 1300);
    }
    function selectPic() {
        count++;
        go();
    }
    function go(){
        span.eq(count).addClass("current").siblings().removeClass("current");
        $(".inner").animate({left:-count*imageWidth},1000,function() {
            if (count == span.length) {
                count = 0;
                $(".inner").css("left", 0);
                span.eq(count).addClass("current").siblings().removeClass("current");
            }
        })
    }
    //鼠标移入/出
    $(".container").hover(function(){
        clearInterval(timer);
    },function(){
        autoGo();
    });

    //左右键
    leftArrow.on("click",function(){
        clearInterval(timer);
        if (count == 0) {
            count = span.length;
            $(".inner").css("left", -(span.length ) * imgWidth);
        }
        count--;
        go();
    });
    rightArrow.on("click", function () {
        clearInterval(timer);
        count++;
        go();
    });
    //底部导航：
    span.on("click",function(){
        count=span.index($(this));
        go();
    })

});

。