java Web第一章学习内容（使用jquery制作轮播图）

最新推荐文章于 2024-07-28 02:31:14 发布

JayVergil

最新推荐文章于 2024-07-28 02:31:14 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/JayVergil/article/details/80682595

版权

学习内容：

一.使用jquery制作轮播图
1.定时函数 var timer = setInterval(run,5000);
2.淡入淡出效果 fadeIn(500)；fadeOut(500);
3.找到指定元素 eq(c)；
4.兄弟元素 siblings('li');
5.清理定时器 clearInterval(timer);
6.鼠标进入后执行方法 mouseenter

思路：
      1.布局好相应的信息后，首先要使用一个变量C来控制总次数，通过定时函数方法让变量C++，查找到相应图片位置通过.eq(c)判断是第几张图片，相应设置元素淡出淡入效果（ fadeIn(500)；fadeOut(500);）.
         2.使用鼠标移入图片停止计时，通过hover中使用清理定时器（ clearInterval(timer);）的方法来清楚函数，移出时继续执行
         3.使用鼠标移入圆点切换图片的制作，通过mouseenter方法里使用index()定位当前元素的位置，找到该位置后再通过相应位置给图片加入淡出淡入效果（ fadeIn(500)；fadeOut(500);）.

布局界面参考代码：

<head>
    <meta charset="UTF-8">
    <title>王者荣耀轮播图</title>
    <link rel="stylesheet" href="lunbotuys.css">
</head>
<body>

<div id="wk">
    <img src="images/0.jpg" style="display: block" alt="">
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
    <ul id="yuan">
        <li style="background-color: red"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="zj"><img src="images/zuojt.jpg" alt=""></div>
    <div id="yj"><img src="images/youjt.jpg" alt=""></div>
</div>

样式参考代码：

#wk{
    margin: auto;
    height: 100%;
    width: 1280px;
    /*border: solid 1px blue;*/
    position: relative;
}
#wk img{
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
#wk ul{
    position: absolute;
    top: 660px;
    left: 550px;
}
#yuan li{
    list-style: none;
    width: 24px;
    height: 24px;
    background: #DDDDDD;
    float: left;
    border-radius: 50%;
    margin-right: 8px;
}
#zj img{
    width: 500px;
    height: 450px;
    position: relative;
    top: 150px;
    left: -200px;
    display: none;
}
#yj img{
    width: 500px;
    height: 450px;
    position: relative;
    top: -300px;
    left: 1000px;
    display: none;
}

jquery参考代码：

<script src="../js/jquery-1.8.3.js"></script>
<script>
    /*用于记录次数*/
    var c =0;

    /*使用定时函数通过绑定方法每秒执行一次*/
    var timer = setInterval(run,5000);
        function run() {
        /*每秒C+1*/
        c++;
        if(c==4){
            c=0;
        }
        /*找到相应的图片并进行显示，兄弟隐藏*/
        $("#wk img").eq(c).fadeIn(500).siblings('img').fadeOut(500);

        /*找到相应的圆点并进行显示，兄弟隐藏*/
        $("#yuan li").eq(c).css({"background":"red"}).siblings('li').css({"background":"#ddd"});
    }

    /*鼠标移入停止，移出继续计时*/
    $("#wk").hover(function () {
        /*清理定时器*/
        $("#zj img").css({"display":"block"});
         $("#yj img").css({"display":"block"});
        clearInterval(timer);
    },function () {
        $("#zj img").css({"display":"none"});
         $("#yj img").css({"display":"none"});
        timer = setInterval(run,5000);
    })

    /*鼠标移入圆点效果*/
    $("#yuan li").mouseenter(function () {
        /*获得移入li的序号*/
        c =$(this).index();

        /*找到相应的图片并进行显示，兄弟隐藏*/
        $("#wk img").eq(c).fadeIn(500).siblings('img').fadeOut(500);

        /*找到相应的圆点并进行显示，兄弟隐藏*/
        $("#yuan li").eq(c).css({"background":"red"}).siblings('li').css({"background":"#ddd"});
    })

    /*设置箭头点击事件，点一下总数减1并赋值*/
    $("#zj").click(function () {
        c--;
        if (c<0){
            c=3;
        }
        $("#wk img").eq(c).fadeIn(500).siblings('img').fadeOut(500);
        $("#yuan li").eq(c).css({"background":"red"}).siblings('li').css({"background":"#ddd"});
    })
    $("#yj").click(function () {
        c++;
        if (c>3){
            c=0;
        }
        $("#wk img").eq(c).fadeIn(500).siblings('img').fadeOut(500);
        $("#yuan li").eq(c).css({"background":"red"}).siblings('li').css({"background":"#ddd"});
    })

</script>