制做JD的手动和自动轮播图片板块

时间 2019-11-11

标签制做手动动轮图片板块栏目 Java 繁體版

原文原文链接

HTML部分css

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实现东京的轮播图</title>
    <link rel="stylesheet" href="jd_css.css"/>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="jd_js.js"></script>
</head>
<body>
<div class="contents">
    <!-- 设置6张图片重叠在一块儿-->
 <ul class="img">
            <li ><a href="#"><img src="images/1.jpg" alt="#"/></a></li>
            <li><a href="#"><img src="images/2.jpg" alt="#"/></a></li>
            <li><a href="#"><img src="images/3.jpg" alt="#"/></a></li>
            <li><a href="#"><img src="images/4.jpg" alt="#"/></a></li>
            <li><a href="#"><img src="images/5.jpg" alt="#"/></a></li>
            <li><a href="#"><img src="images/6.jpg" alt="#"/></a></li>
        </ul>
    <!--设置六个按钮分别在底下-->
 <ul class="num">
            <!--<li>1</li>-->
            <!--<li>2</li>-->
            <!--<li>3</li>-->
            <!--<li>4</li>-->
            <!--<li>5</li>-->
            <!--<li>6</li>-->
 </ul>

    <div class="left btn"><</div>
    <div class="right btn">></div>
</div>

</body>
</html>

<!--两个BUG：1。下面的按钮手动切换和自动切换不一样步。解决方法：使i和index相匹配。
             2。由于渐入渐出的效果问题，能够发现屡次手动选择后，图片切换会有问题。解决方法：在渐入fadeIn和渐出fadeOut方法前面加入stop方法-->
<!--优化：由于网站在使用这个轮播效果的时候常常会改变图片的内容甚至图片的数量，若是改变了图片的数量的时候，就要改变HTML中NUM的源码，
        这样的操做很是的繁杂。解决方法：把HTML中的NUM的LI子元素删除，利用JQ判断图片的数量，而后再用APPEND方法把相应的数量添加到NUM中。
        另外，在删除图片后，下方自动轮播的i也要注意修改。-->

/*页面初始化*/
*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}

/*设置最外围的盒子*/
.contents{
    width: 730px;
    height: 454px;
    margin: 40px auto;
    border: 5px solid black;
    position:relative;
}

/*设置几张图片*/
.img li{
    position:absolute;/*设置绝对定位，使图片脱离文档流，使六张图片重叠在一块儿*/
    top:0;
    right:0;
    display: none;
}

/*设置下面六个按钮*/
.num {
    position: absolute;/*设置按钮上级UL的定位为绝对定位，使它优先级高于图片，并显示在图片的上方*/
    bottom: 10px;
    left: 0;
    font-size: 0;/*在上一级设置字体大小，使每个块之间的间距消除，但要在下一级设置回字体的大小*/
    width:100%;/*设置宽度，才可使用文字居中方法*/
    text-align:center;
    cursor:pointer;
}
.num li{
    display:inline-block;
    width: 20px;
    height: 20px;
    background-color: #666666;
    color: #fff;
    text-align: center;
    line-height: 20px;
    border-radius:50% ;
    font-size: 14px;
    margin: 0 2px;
}
.num li.active{
    background-color: #a00;
}
/*设置左右两个按钮*/
.btn{
    position: absolute;
    top:50%;
    width:30px;
    height: 60px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    text-align: center;
    line-height: 60px;
    margin-top: -30px;/*使图片居中后向上*/
    cursor:pointer;
    display: none;/*是左右两个按钮在鼠标移过去的时候才会出现，先隐藏*/
}
.contents:hover .btn{
    display: block;/*鼠标移入内容区域，左右两个按钮出现*/
}
.left{
    left: 0;
}
.right{
    right:0;
}

 /**
 * Created by Administrator on 2016/1/25.
 */
$(document).ready(function(){
    //得到图片的数量
    var size=$(".img li").size();
    //使用for循环，添加li元素到num中
    for(var x=1;x<=size;x++){
        $(".num").append("<li>"+x+"</li>");//中间加入x变量的方法
    }
    //设置手动轮播图
    $(".img li").eq(0).show();
    $(".num li").eq(0).addClass("active");
    $(".num li").mouseover(function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");//使全部其余全部的兄弟元素移除类
        var index=$(this).index();//添加索引值
        i=index;//使手动轮播和自动轮播相匹配。
        $(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);//加入stop方法使第二个解决第二个BUG
    });
 //不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout
//只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave

    //设置自动向右轮播图
    var i = 0;
    var t =setInterval(zidong,1000);
    function zidong(){
        i++;
        if(i==size){i=0}
        $(".num li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).fadeIn(500).siblings().fadeOut(500);
    }

    //若是鼠标滑动到框中，自动轮播应该中止，若是鼠标移除框外，自动轮播继续
    $(".contents").hover(function(){
        clearInterval(t);
    },function(){
        t=setInterval(zidong,1500);
    });

    //设置自动向左轮播图
    function zidongl(){
        i--;
        if(i==-1){i=size-1}
        $(".num li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).fadeIn(500).siblings().fadeOut(500);
    }

    //设置左右两个按钮的功能
    $(".left").click(function(){
        zidongl();//另外设置一个自动向左轮播图的功能
    });
    $(".right").click(function(){
        zidong();//右边按钮的功能与上面设置的zidong功能同样
    })
});

完成后有几个疑问：1，屡次使用相同的JQ选择器后，WebStorm会有黄色的warning提示，是否应该用更好的方法。html

二、完成这个渐入渐出鲜果以后，想知道相似豆瓣电影模块的左右滑动是如何完成的。jquery

最后：记录在此次学习中学习到的不熟悉的jQuery的方法：app

1.append(content) 向每一个匹配的元素内部追加内容。学习

2.size() jQuery 对象中元素的个数。返回值:Number字体

3.addClass(class) 为每一个匹配的元素添加指定的类名。优化

4.index([subject]) 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。返回值:Number网站

5.eq(index) 获取第N个元素this

6.siblings([expr]) 取得一个包含匹配的元素集合中每个元素的全部惟一同辈元素的元素集合。能够用可选的表达式进行筛选。指针