码迷,mamicode.com
首页 > 其他好文 > 详细

淘宝滑动轮播案例

时间:2019-12-08 01:33:59      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:clone   lte   one   margin   图片   wrap   划线   个数   插入   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝滑动轮播案例</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <style type="text/css">
        *{
            padding:0px;
            margin:0px;
            border:0px;
        }
        li{
            list-style-type:none;
        }
        /*给a标签去除下划线*/
        a{
            text-decoration:none;
        }
        #wrapper{
            margin:20px auto;
        }
        #show-area{
            width:590px;
            height:470px;
            position:relative;
            margin:0px auto;
            overflow:hidden;
        }
        /*注意:找bug找了很久,这里自动插入一张,父容器要加上他的宽度,否则怎么显示呢?小问题大解决*/
        #show-area ul{
            position:relative;
            width:5310px;
            height:470px;
            right:0;
        }
        #show-area ul li{
            float:left;
            width:590px;
        }
        /*指示器*/
        #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: 540px;
        }
        .onclick{
            background-color:#FFF !important;
        }
    </style>
 </head>
 
<body>
<div id="wrapper">
    <div id="show-area">
 
        <ul>
            <li><a href="#"><img src="1.jpg"></a></li>
            <li><a href="#"><img src="2.jpg"></a></li>
            <li><a href="#"><img src="3.jpg"></a></li>
          
 
        </ul>
 
        <div id="button-left" title="上一张"><</div>
        <div id="button-right" title="下一张">></div>
 
        <div id="indicator"></div><!--控制按钮,为了日后方便后台操作这里的控制按钮在js代码中控制添加-->
    </div>
</div>
<script>
    $(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");
            }
        }
 
    });
</script>
</body>
</html>

 


淘宝滑动轮播案例

标签:clone   lte   one   margin   图片   wrap   划线   个数   插入   

原文地址:https://www.cnblogs.com/yonfeng/p/12004123.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!