h5学习笔记之图片轮播

需求：

1. 五张尺寸为700*400的图片 实现自动轮播 时间三秒
2. 显示轮播指示索引 点击索引显示对应图片
3. 增加左右切换按钮 点击手动轮播图片
4. 鼠标放上去显示箭头 离开隐藏
5. 鼠标移至图片 停止轮播

首先引入：jquery-1.10.2.min.js 放在js文件夹下

下载链接：https://pan.baidu.com/s/1jIFUVem

.html

导入相关文件

    <link rel="stylesheet" type="text/css" href="css/demo1.css"/>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/demo1.js" type="text/javascript" charset="utf-8"></script>

图片div

    <div id="imglist">
        <div class = "img-item">
            < img src="img/1.png"/>
        </div>
        <div class = "img-item">
            < img src="img/2.png"/>
        </div>
        <div class="img-item">
            < img src="img/3.png"/>
        </div>
        <div class="img-item">
            < img src="img/4.png"/>
        </div>
        <div class="img-item">
            < img src="img/5.png"/>
        </div>
    </div>

左右按钮div

    <div class="btn leftBtn">
        < img src="img/leftBtn.png"/>
    </div>
    <div class="btn rightBtn">
        < img src="img/rightBtn.png"/>
    </div>

指示器div

    <div id="pages">
        <div class="page-item bg">
            1
        </div>
        <div class="page-item ">
            2
        </div>
        <div class="page-item">
            3
        </div>
        <div class="page-item">
            4
        </div>
        <div class="page-item">
            5
        </div>
    </div>

.css

去除默认标签内外间距

* {
    padding: 0px;
    margin: 0px;
}

图片

#imglist .img-item {
    float: left;
    position: absolute;
}

左右两侧按钮

.btn {
    position: absolute;
    top: 175px;
    display: none;
}

.leftBtn {
    left: 20px;
}

.rightBtn {
    left: 630px;
}

指示器

#pages {
    position: absolute;
    left: 265px;
    top: 350px;
}

.page-item {
    width: 30px;
    height: 30px;
    background-color: #F1F1F1;
    line-height: 30px;
    text-align: center;
    float: left;
    margin-right: 10px;
    border-radius: 100%; /*剪切圆角*/
    cursor: pointer; /*鼠标放上去显示手型*/
}

.bg {
    background-color: #FF0000;
}

.js

//下标
var i = 0;
//定时器
var time;
//启动执行
$(function() {

//1.默认显示第一张图片
//$(".img-item")  获取class = img-item 对象
//$(".img-item").eq(0)  获取class = img-item 的第一个对象
//$(".img-item").eq(0).show() 获取class = img-item 的第一个对象 并显示
//$(".img-item").eq(0).show().siblings() 获取class = img-item 的第一个对象 并显示 其余的兄弟元素
//$(".img-item").eq(0).show().siblings().hide() 获取class = img-item 的第一个对象 并显示 其余的兄弟元素隐藏
$(".img-item").eq(0).show().siblings().hide();

//2.开启定时器 
showTime();

//3.给page-item增加鼠标移上去和离开事件
$(".page-item").hover(function() { //鼠标移上去事件

    //3.0停止计时器
    clearInterval(time);

    //3.1拿到下标索引 
    i = $(this).index();
    //3.2图片滚动到索引位置
    PageScroll();

}, function() { //鼠标离开事件

    //3.3开启计时器
    showTime();

});

//4.给左边按钮增加点击事件
$(".leftBtn").click(function() {

    //4.0停止计时器
    clearInterval(time);

    //4.1 下标减1 下标为0时 下标归4️⃣
    if(i > 0) {
        i--;
    } else {
        i = 4
    }

    //4.2 滚动
    PageScroll();

    //4.3开启计时器
    showTime();
})

//5.给右边按钮增加点击事件
$(".rightBtn").click(function() {
    //5.0停止计时器
    clearInterval(time);
    //5.1下标+1超过4重置0
    if(i >= 4) {
        i = 0
    } else {
        i++;
    }
    //5.2滚动
    PageScroll();
    //5.3开启计时器
    showTime();
})

//6.0鼠标移动至 图片
$(".img-item").hover(function(){//鼠标放上图片
    
    //6.1停止计时器
    clearInterval(time);
    //6.2显示左右箭头
    $(".btn").show();
    
},function(){//鼠标离开图片
    
    //6.3开启计时器
    showTime();
    //6.4隐藏左右箭头 
     $(".btn").hide()
    
})

})

计时器事件

function showTime() {
    // 计时器 三秒执行 一次轮播
    time = setInterval(function() {

        //1.控制轮播下标 最大4（图片的数量-1）
        if(i >= 4) {
            i = 0
        } else {
            i++;
        }
        console.log(i);
        //2.图片滚动
        PageScroll();

    }, 3000);
}

图片滚动事件

function PageScroll() {

    //1.图片滚动切换
    //fadeIn(300)  三秒显示
    //fadeOut(300) 三秒隐藏
    $(".img-item").eq(i).fadeIn(300).siblings().fadeOut(300);
    //2.page滚动切换
    //2.1直接增加css
    //  $(".page-item").eq(i).css("background-color", "#FF0000").siblings().css("background-color", "#F1F1F1");
    //2.2增加class
    $(".page-item").eq(i).addClass("bg").siblings().removeClass("bg");

}