无缝轮播的代码与基本原理

最新推荐文章于 2023-12-26 20:44:38 发布

chenzui1998

最新推荐文章于 2023-12-26 20:44:38 发布

阅读量94

点赞数

原文链接：https://my.oschina.net/u/3520616/blog/914216

版权

*{
    padding: 0;
    margin: 0;
}
.display_area{
    /*border: 1px solid red;*/
    width: 1000px;
    height: 562px;
    overflow: hidden;
    margin: auto;
    position: relative;
}
.display_area ol{
    width:100px;
    position: absolute;
    top:500px;
    left:400px;
}
.display_area ol li{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    float: left;
    margin: 3px;
    list-style: none;
    background-color: rgba(0,0,0,0.3);
}
.display_area .on{
    background-color:white ;
}
.img_area{
    position: absolute;


}
.img_area img{
    float: left;
    margin: 0;
}
.arrow{
    cursor: pointer;
    width: 33px;
    height: 57px;
    position: absolute;
    top: 250px;
    display: none;
}
.prev{
    background-image: url(prev.png);
    left: 5px;
}
.next{
    background-image: url(next.png);
    right: 5px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="no space carousel.css">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="no space carousel.js"></script>
</head>
<body>
<div class="display_area">
    <div class="img_area">
        <img src="IU1.jpg" >
        <img src="IU2.jpg" >
        <img src="IU3.jpg" >
        <img src="IU4.jpg" >
    </div>
    <ol>
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="arrow prev"></div>
    <div class="arrow next"></div>
</div>
</body>
</html>

$(function () {
   var  $display=$(".display_area");
   var  $pic=$(".img_area");
   var  $prev=$('.prev');
   var  $next=$('.next');
   var  $arrow=$('.arrow');
   var  count=0;
   var timer;

    var firstImg=$pic.find("img").first().clone();
    $pic.append(firstImg).width($pic.find("img").length*$display.width());
    // $pic.append(firstImg);/*这样写会出现空白*/
    // alert($pic.find("img").length*$display.width());

    function play() {
        /*最后一张图片*/
        if(count==$pic.find("img").length){
            count=1;/*是为了下面的animate做铺垫*/
            $pic.css({'left':0});/*这里改变了图片区域的初始位置，经过下面的animate执行位移后才会到需要的下一张位置，因此在第一章到最后一张切换时不会突兀*/
        }
        /*第一张图片*/
        if(count==-1){
            count=$pic.find("img").length-2;
            $pic.css({'left':-1000*(count+1)});/*这里加上1后点击向左跳第一张到最后一张的变化不会那么突兀。*/
        }
        /*关于图片移动动画*/
        $pic.stop().animate({"left":count*-1000},600);/*count是会逐增或逐减的，因此自循环或点击前后按钮left是不会跳跃的，但是点击点切换就会跳跃*/
        /*关于点的自动切换*/
        if(count==$pic.find("img").length-1){
            $(".display_area li").eq(0).addClass("on").siblings().removeClass("on");
        }else {
            $(".display_area li").eq(count).addClass("on").siblings().removeClass("on");
        }
        // document.title=count;
    }

    function auto() {
        timer=setInterval(function () {
            count++;
            play();
        },1200);
    }

    auto();/*调用函数进行自循环*/

    /*点击上一张*/
    $prev.click(function () {
        count--;
        play();
    });

    /*点击下一张*/
    $next.click(function () {
        count++;
        play();
    });

    /*悬浮在上面清除定时器，显示左右箭头,移走恢复*/
    $display.mouseover(function () {
        $prev.show();
        $next.show();
        clearInterval(timer);
    }).mouseout(function () {
        $prev.hide();
        $next.hide();
        auto()
    });

    /*圆点的点击切换*/
    $display.find("li").click(function () {
        count=$(this).index();
        $(this).addClass("on").siblings().removeClass("on");
        /*关于图片移动动画*/
        $pic.stop().animate({"left":count*-1000},0);/*count是会逐增或逐减的，因此left是不会跳跃的*/
        /*关于点的自动切换*/

    })
});

转载于:https://my.oschina.net/u/3520616/blog/914216

chenzui1998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无缝轮播的代码与基本原理

*{ padding: 0; margin: 0;}.display_area{ /*border: 1px solid red;*/ width: 1000px; height: 562px; overflow: hidd...
复制链接

扫一扫