轮播图

这周的我首次用JQ做了个轮播图，给大家展示一下过！

可以优化的地方还望大家多多指导！

首先要做的就是HTML页面了，做两个按钮和下面的随之改变的数字图形。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="jquery-3.3.1.min.js"></script>
    <script src="lunBoTu.js"></script>
    <link href="lunBoTu.css" rel="stylesheet" />
</head>
<body>
    <div id="tu">
        <div id="igs" class="igs">
            <div class="ig"><img src="img/1.jpg" /></div>
            <div class="ig"><img src="img/2.jpg" /></div>
            <div class="ig"><img src="img/3.jpg" /></div>
            <div class="ig"><img src="img/4.jpg" /></div>
            <div class="ig"><img src="img/5.jpg" /></div>
            <div class="ig"><img src="img/6.png" /></div>
            <div class="ig"><img src="img/7.jpg" /></div>
            <div class="ig"><img src="img/8.jpg" /></div>
        </div>
        <div id="btn">
            <div class="btn btn1"> < </div>
            <div class="btn btn2"> > </div>
        </div>
        <div id="tabs">
            <div class="tab bg">1</div>
            <div class="tab">2</div>
            <div class="tab">3</div>
            <div class="tab">4</div>
            <div class="tab">5</div>
            <div class="tab">6</div>
            <div class="tab">7</div>
            <div class="tab">8</div>
        </div>
    </div>
</body>
</html>

接下来我们就可以为HTML页面设置样式了！这里使用的是css外联样式！

body {
    width :100%;
    height:100%;
    padding:0px;
    margin:0px;
}
#to{
    900px;
    height:500px;
}
#igs{
    position:relative;
    left:50%;
    clear:both;
}
.ig{
    position:absolute;
}
img{
    900px;
    height:500px;
    position:relative;
    left:-450px;
}
#btn{
    position:relative;
    left:50%;
    clear:both;
}
.btn{
    60px;
    height:90px;
    color:#000000;
    font-size:40px;
    text-align:center;
    line-height:90px;
    background-color:#808080;
    position:relative;
    top :215px;
    opacity:0.5;
    clear:both;
 }
.btn1{  
    position:relative;
    right :450px; 
    clear:both;
    cursor:pointer;
}
.btn2{ 
     position:absolute;
     left:390px;
     cursor:pointer;
}
ul{
    list-style-type:none;
}
#tabs{
    position:relative;
    left:50%;
    clear:both;
}
.tab{
    font-size:20px;
    text-align:center;
    line-height:30px;
    color:#000000;
    background-color:#0094ff;
    30px;
    height:30px;
    float:left;
    margin-right:10px;
    position:relative;
    top:380px;
    right:150px;
    border-radius:100%;
    cursor:pointer;
    /*鼠标悬停是变小手*/
}
.bg{
    background-color:#ff0000;
}

最后就是JS事件了

var i = 0;
var timer;
$(function () {
    $(".ig").eq(0).show().siblings().hide();
    Showtime();

    //鼠标经过tab事件
    $(".tab").hover(function () {
        i = $(this).index();
        Show();
        clearTimeout(timer);
    }, function () {
        Showtime();
    });

    //点击左边事件
    $(".btn1").click(function () {
        clearInterval(timer);
        if (i == 0) {
            i = 8;
        }
        i--;
        Show();
        Showtime();
    });

    //点击右边事件
    $(".btn2").click(function () {
        clearInterval(timer);//清除轮播；
        if (i == 8) {
            i = 0;
        }
        i++;
        Show();
        Showtime();
    });
});

//显示图片
function Show(){
    $(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);
    $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
}

//轮播图定时器
function Showtime() {
    timer = setInterval(function () {
        i++;
        if (i == 8) {
            i = 0;
        }
        Show();
    }, 4000);
}

JQ代码在网站上有很多的，大家可以找一下。

希望可以对大家有些些帮助！