原生js实现图片轮播效果

作者: 佐為你快回來 | 来源:发表于2019-10-09 17:24 被阅读0次

功能：
实现图片每隔1秒切换一次；
当鼠标停留在整个页面上，图片不进行轮播；
鼠标移动到切换页选项上，出现该选项对应的图片，并且切换页选项的背景颜色发生相应的变化；
当图片发生轮播切换时，再不滑入选项卡的前提下，相应的选项卡背景颜色也自动发生变化；
点击上一张按钮，出现上一张图片，点击下一张按钮，出现下一张图片，同时选项卡的背景颜色也发生变化。

以下为实现代码：
首先为html代码，创建一个大盒子将选项卡部分和图片部分包裹起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div class="main" id="main">
        <!-- 选项卡 -->
        <div class="nav" id="nav">
            <div class="nav-item nav-active">
                <a href="javascript:void(0)">首页</a>
            </div>
            <div class="nav-item">
                <a href="javascript:void(0)">点击看看</a>
            </div>
            <div class="nav-item">
                <a href="javascript:void(0)">会自动的</a>
            </div>
            <div class="nav-item">
                <a href="javascript:void(0)">我的网站</a>
            </div>
        </div>
        <!-- 轮播 -->
        <div class="banner" id="banner">
            <a href="">
                <div class="banner-slider slider1 slider-active"></div>
            </a>
            <a href="">
                <div class="banner-slider slider2"></div>
            </a>
            <a href="">
                <div class="banner-slider slider3"></div>
            </a>
            <a href="">
                <div class="banner-slider slider4"></div>
            </a>
        </div>
        <!-- 按钮 -->
        <a href="javascript:void(0)" class="button prev" id="prev"></a>
        <a href="javascript:void(0)" class="button next" id="next"></a>
    </div>
</body>
<script src="../js/script.js"></script>
</html>

其次是css代码

*{
    padding: 0;
    margin: 0;
}
body{
    font-family: 'Microsoft YaHei';
}
a{
    text-decoration: none;
}
.main{
    height: 540px;
    width: 1200px;
    position: relative;
    margin: 30px auto;
    overflow: hidden;
    border: 1px dotted rgb(167, 166, 166);
}
/* 焦点图 */
.banner{
    position: absolute;
    top: 80px;
    left: 0;
    width: 1200px;
    height: 460px;
    overflow: hidden;
}
.banner-slider{
    width: 1200px;
    height: 460px;
    float: left;
    display: none;
    background-repeat: no-repeat
}
.slider-active{
    display: block;
}
.slider1{
    background-image: url(../img/1.jpg);
}
.slider2{
    background-image: url(../img/3.jpg); 
}
.slider3{
    background-image: url(../img/4.jpg);
}
.slider4{
    background-image: url(../img/5.jpg); 
}
/* 选项卡 */
.nav{
    height: 80px;
    width: 1200px;
    background-color:#fff;
    position: absolute;
    top: 0;
    left: 0;
}
.nav-item{
    float: left;
    width: 300px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    cursor: pointer;
}
.nav .nav-active{
    background-color: #ffcc00;
    border-radius: 8px;
}
.nav-item>a{
    color: #666;
    font-size: 22px;
}
/* 箭头按钮 */
.button{
    position: absolute;
    height: 80px;
    width: 40px;
    top: 50%;
    margin-top: -40px;
    left: 0;
    background: url(../img/arrow.png) center center no-repeat;
    transform: rotate(180deg);
}
.button:hover{
    background-color: #000;
    opacity: .8;
    border-radius: 50%;
    height: 40px;
    margin-top: -20px;
}
.next{
    left: auto;
    right: 0;
    transform: rotate(0deg);
}

js部分

可能会存在浏览器不兼容问题
使用ie8及其以下 attachEvent
其他浏览器（不完整） addEventListener
此时需要封装一下浏览器兼容问题，由于没有用到解除绑定，这里并没有写，只写入了添加绑定。

function addHandler(element,type,handler){
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }else if(element.attachEvent){
        element.attachEvent('on'+type,handler);
    }else{
        element['on'+type] = handler;
    }
}

由于需要调用很多次document.getElementById(),先封装一个byId函数

function byId(id) {
    return typeof(id)==="string"?document.getElementById(id):id;
}

获取图片

var index = 0,
    timer = null,
    nav = byId('main'),
    pics = byId('banner').getElementsByTagName('div'),
    navItem = byId('nav').getElementsByTagName('div'),
    prev = byId('prev'),
    next = byId('next'),
    size = pics.length;

点击下一张图片，index索引+1，当索引大于图片张数时，索引变成0回到第一张图片。
点击上一张图片时，index索引-1，当索引小于0时，索引为图片张数-1。
当我们切换图片的时候，需要遍历所有图片，将图片隐藏，并且取消选项卡背景。然后显示当时index的图片和当前index选项卡的背景颜色。由于上一张和下一张的代码重复，将他们封装成一个changeImg函数。

//切换图片
function changeImg(){
    //遍历所有图片，将图片隐藏，取消选项卡背景
    for(var i=0;i<size;i++){
        pics[i].style.display="none";
        navItem[i].className="nav-item";
    }
    //显示当前图片
    pics[index].style.display="block";
    //当前选项卡高亮
    navItem[index].className="nav-item nav-active";
}

//下一张
addHandler(next,"click",function(){
    index++;//点击下一张图片，索引+1
    //当索引大于张数，索引回0变成第一张
    if(index>=size) index=0;
    changeImg();
})

//上一张
addHandler(prev,"click",function(){
    index--;//点击上一张图片，索引-1
     //当索引小于0时，索引为张数-1
    if(index<0) index =size-1;
    changeImg();
})

点击选项卡索引切换图片，给选项卡添加属性，这里由于还没有学到作用域的问题，用了这个方法，实际上id不建议用数字来显示。index等于当前的id属性，由于用到的是data-id有个-,故不能使用this.data-id,可以使用this.["data-id"]或者是this.getAttribute("data-id")

//点击选项卡索引切换图片
for(var d =0;d<size;d++){
    navItem[d].setAttribute("data-id",d);//添加data-id属性
    addHandler(navItem[d],"mouseover",function(){
        index=this.getAttribute("data-id");//index等于当前的id属性
        changeImg();
    })
}

开启自动轮播

function startAutoPlay(){
    timer = setInterval(function(){
        index++;
        if(index>=size) index=0;
        changeImg();
    },1000);
}
//自动开启轮播
startAutoPlay();

清除定时器，停止自动轮播，如果定时器还没有开启，就不需要停止，需要做一个判断。

function stopAutoPlay(){
    if(timer){//如果定时器开启了，则清除
        clearInterval(timer);
    }
}

鼠标滑入main,停止轮播；鼠标离开main，继续轮播

addHandler(main,"mouseover",stopAutoPlay);
addHandler(main,"mouseout",startAutoPlay);

全部js代码：

var index = 0,
    timer = null,
    nav = byId('main'),
    pics = byId('banner').getElementsByTagName('div'),
    navItem = byId('nav').getElementsByTagName('div'),
    prev = byId('prev'),
    next = byId('next'),
    size = pics.length;

//封装byId函数
function byId(id) {
    return typeof(id)==="string"?document.getElementById(id):id;
}

//封装浏览器兼容
function addHandler(element,type,handler){
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }else if(element.attachEvent){
        element.attachEvent('on'+type,handler);
    }else{
        element['on'+type] = handler;
    }
}

//清除定时器，停止自动轮播
function stopAutoPlay(){
    if(timer){//如果定时器开启了，则清除
        clearInterval(timer);
    }
}

//开启自动轮播
function startAutoPlay(){
    timer = setInterval(function(){
        index++;
        if(index>=size) index=0;
        changeImg();
    },1000);
}
//切换图片
function changeImg(){
    //遍历所有图片，将图片隐藏，取消选项卡背景
    for(var i=0;i<size;i++){
        pics[i].style.display="none";
        navItem[i].className="nav-item";
    }
    //显示当前图片
    pics[index].style.display="block";
    //当前选项卡高亮
    navItem[index].className="nav-item nav-active";
}

//点击选项卡索引切换图片
for(var d =0;d<size;d++){
    navItem[d].setAttribute("data-id",d);//添加data-id属性
    addHandler(navItem[d],"mouseover",function(){
        index=this.getAttribute("data-id");//index等于当前的id属性
        changeImg();
    })
}

//下一张
addHandler(next,"click",function(){
    index++;//点击下一张图片，索引+1
    //当索引大于张数，索引回0变成第一张
    if(index>=size) index=0;
    changeImg();
})

//上一张
addHandler(prev,"click",function(){
    index--;//点击上一张图片，索引-1
     //当索引小于0时，索引为张数-1
    if(index<0) index =size-1;
    changeImg();
})
//鼠标滑入main,停止轮播
addHandler(main,"mouseover",stopAutoPlay);

//鼠标离开main，继续轮播
addHandler(main,"mouseout",startAutoPlay);


//自动开启轮播
startAutoPlay();

原生js实现图片轮播效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读