问一下老师

图片轮播或者在原点和上下一张的按钮的时候，怎么实现那种图片滑动的效果？

跟个猪一样 2019-12-12

收起

2回答

好帮手慕小尤 2019-12-12 14:18:58

同学你好，是老师理解错误，图片滑动的效果，同学可参考以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滑动轮播案例</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./index.css">
 </head>
<body>
<div id="wrapper">
    <div id="show-area">
        <ul>
            <li><a href="#"><img src="../img/bg1.jpg"></a></li>
            <li><a href="#"><img src="../img/bg2.jpg"></a></li>
            <li><a href="#"><img src="../img/bg3.jpg"></a></li>
        </ul>
        <div id="button-left" title="上一张"><</div>
        <div id="button-right" title="下一张">></div>
  
        <div id="indicator"></div><!--控制按钮,为了日后方便后台操作这里的控制按钮在js代码中控制添加-->
    </div>
</div>
</body>
</html>

*{
            padding:0px;
            margin:0px;
            border:0px;
        }
        li{
            list-style-type:none;
        }
        /*给a标签去除下划线*/
        a{
            text-decoration:none;
        }
        #wrapper{
            margin:20px auto;
        }
        #show-area{
            width:1000px;
            height:470px;
            position:relative;
            margin:0px auto;
            overflow:hidden;
        }
        #show-area ul{
            position:relative;
            width:5310px;
            height:470px;
            right:0;
        }
        #show-area ul li{
            float:left;
            width:1000px;
        }
        /*指示器*/
        #indicator{
            width:140px;
            text-align:center;
            position:absolute;
            top:450px;
            left:0;
            right: 0;
            margin: auto;
            z-index:1;
            /*ackground-color: #00ccff;*/
        }
        #indicator div{
            height:12px;
            width:12px;
            border-radius:100%;
            background-color:#ccc;
            float:left;
            margin-left:5px;
            opacity:0.9;
            filter:Alpha(opacity=90);/*为了适应旧的浏览器*/
        }
        #button-left,#button-right{
            /*display:none;*/
            position: absolute;
            width: 50px;
            height: 110px;
            z-index: 2;
            background-color: #cccccc;
            font-size: 40px;
            color: #FFFFFF;
            text-align: center;
            line-height: 110px;
            opacity:0;
            filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
            cursor: default;
        }
        #button-left{
            top: 180px;
            left: 0px;
        }
        #button-right{
            top: 180px;
            left: 950px;
        }
        .onclick{
            background-color:#FFF !important;
        }

100

101

102

103

104

 $(function () {
        /*设置鼠标移动到整个show区域则左右按钮显示出来，否则不显示*/
        $("#show-area").mouseenter(function () {
            $("#button-right,#button-left").css({opacity:0.5});
        });
        $("#show-area").mouseleave(function () {
            $("#button-right,#button-left").css({opacity:0});
        });
  
        var i=0;
        /*假装自己很智能，自动获取一下，在后面left值移动时就可以用它了*/
        var imgWidth = $("#show-area ul li").width();
        var clone = $("#show-area ul li").first().clone(true);
        /*copy 第一张的照片并且添加到最后已达到无缝对接的效果*/
        $("#show-area ul").append(clone);
  
  
        /*get 所有li的个数,只有length才是属性*/
        var size = $("#show-area ul li").length;
  
  
        /*step 1:  */
        //一开始循环添加按钮
        //为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片
        //所以添加按钮的时候我们也应该添加4个按钮
        for(var j=0;j<size -1 ;j++){
            $("#indicator").append("<div></div>");
        }
  
        $("#indicator div").eq(i).addClass("onclick");
  
  
        /*step 2:  */
        //左按钮
        $("#button-left").click(function () {
            toLeft();
        });
        //右按钮
        $("#button-right").click(function () {
            toRight();
        });
  
        /*step 3：*/
        //按钮指示器鼠标移出移入事件
        $("#indicator div").hover(function () {
            i = $(this).index();
            clearInterval(timer);
            $("#show-area ul").stop().animate({left:-i * imgWidth});
            $(this).addClass("onclick").siblings().removeClass("onclick");
  
        },function () {
            timer = setInterval(function () {
                toRight();
            },2000)
        });
        //两个方向按钮鼠标移出移入事件
        $("#button-left,#button-right").mouseenter(function () {
            clearInterval(timer);
        }).mouseleave(function () {
            timer = setInterval(function () {
                toRight();
            },2000);
        });
        //定时器,注意，这里是最开始启动的，所以呢，这里不设值，会导致页面开始刷新出现错误。
         var timer = setInterval(function () {
            toRight();
        },2000);
  
        /*step 2-2*/
        //左按钮实现的函数
        function toLeft(){
  
            //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来
            i--;
            if(i==-1){
                $("#show-area ul").css({left:-(size - 1)*imgWidth});
                i=size-2;
            }
            $("#show-area ul").animate({left:-i*imgWidth},1000);
            $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
        }
        /*step2-2:*/
        //右按钮的实现函数
        function toRight() {
            i++;
            /*当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片）
            并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置
            并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）*/
            if(i==size){
                console.log("qq");
                $("#show-area ul").css({left:0});
                i=1;
            }
            $("#show-area ul").stop().animate({left: -i * imgWidth}, 1000);
  
            //设置下面指示器的颜色索引
            if(i == size-1){
                $("#indicator div").eq(0).addClass("onclick").siblings().removeClass("onclick");
  
            }else{
                $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
            }
        }
    });