js的轮播

2018-02-07T16:09:19

这个轮播主要通过图片重叠进行显示与隐藏实现的

即display:none与display:block

虽然视觉效果不是特别的好 :evil:

说下思路:

1.首先将图片用绝对定位放到一个盒子中

2.完成图片的轮播切换和鼠标移动到轮播时的停止轮播

3.做圆点导航和上一张下一张的按钮

4.在按钮上绑定事件,以实现效果

接下来贴一下代码:

[dangerbox title="html部分"]

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<link rel="stylesheet" href="css/index.css">
<body>
    <div class="main" id="main">
        <!--图片轮播-->
        <div class="banner" id="banner">
            <a href="">
                <div class="banner-slide slide1 slide-active"></div>
            </a>
            <a href="">
                <div class="banner-slide slide2"></div>
            </a>
            <a href="">
                <div class="banner-slide slide3"></div>
            </a>
        </div>
        <!--上一张、下一张按钮-->
        <a href="javascript:void (0)" class="button prev" id="button-prev"></a>
        <a href="javascript:void (0)" class="button next" id="button-next"></a>
        <!--圆点导航-->
        <div class="dots" id="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>
<script src="js/index.js"></script>
</body>
</html>

[/dangerbox]

[dangerbox title="css样式部分"]


*{
    margin: 0 auto;
    padding:0 auto;
}
ul{
    list-style: none;
}
body{
    font-family: "微软雅黑";
    color: #14191e;
}
.main{
    width: 1200px;
    height: 460px;
    margin: 30px auto;
    overflow: hidden;
    position: relative;
}
.banner{
    width: 1200px;
    height: 460px;
    position: relative;
    overflow: hidden;
}
.banner-slide{
    width: 1200px;
    height: 460px;
    position: absolute;
    background-repeat: no-repeat;
    display: none;
}
.slide-active{
    display: block;
}
.slide1{
    background-image: url(../img/bg1.jpg);
}
.slide2{
    background-image: url(../img/bg2.jpg);
}
.slide3{
    background-image: url(../img/bg3.jpg);
}
.button{
    position: absolute;
    width: 40px;
    height: 80px;
    /*left: 244px;*/
    left: 0;
    top: 50%;
    margin-top: -40px;
    background: url(../img/arrow.png) no-repeat center;
}
.button:hover{
    background-color: #333;
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
.prev{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.next{
    left: auto;
    right: 0;
}
.dots{
    position: absolute;
    right: 20px;
    bottom: 24px;
    text-align: right;
}
.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 50%;
    background: rgba(7,17,27,0.4);
    cursor: pointer;
    margin-right: 8px;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
}
.dots span.active{
    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
    background-color: #ffffff;
}

[/dangerbox]

[dangerbox title="js部分"]


//封装一个代替getElementById的方法
function byId(id){
    return typeof id==="string"?document.getElementById(id):id;
}
//全局变量
var index = 0,
    timer = null,
    pics = byId("banner").getElementsByTagName("div"),
    dots = byId("dots").getElementsByTagName("span"),
    prev = byId("button-prev"),
    next = byId("button-next"),
    len = pics.length;
function slideImg(){
    var main = byId("main");
    //滑过清除定时器,离开继续
    main.onmouseover = function(){
        //清除定时器,先判断一下这个定时器是否在执行(为了代码规范)
        if(timer) clearInterval(timer);
    };
    main.onmouseout = function(){
        timer = setInterval(function(){
            index++;
            if(index >= len){
                index=0;
            }
            //切换图片
            changeImg();
        },3000)
    };
    //自动在main上触发鼠标离开的事件
    main.onmouseout();
    //遍历所有圆点,切绑定事件,点击圆点,切换图片
    for(var i = 0; i < len; i++){
        //给每个span添加个id属性,值为i,作为span的索引
        dots[i].id = i;
        dots[i].setAttribute("kk",i);
        dots[i].onclick = function(){
            //改变index为当前的索引
            index = Number(this.getAttribute("kk"));
            changeImg();
        }
    }
    //给上一张绑定事件
    prev.onclick = function () {
        index--;
        if(index===-1){
            index = 2;
        }
        changeImg();
    };
    //给下一张绑定事件
    next.onclick = function () {
        index++;
        if(index===3){
            index = 0;
        }
        changeImg();
    };
}
//切换图片
function changeImg(){
    //遍历banner下所有的div,将其隐藏
    for(var i = 0; i < len; i++){
        pics[i].style.display = "";
        dots[i].className = "";
    }
    //根据index索引,找到当前的div,将其显示
    pics[index].style.display = "block";
    dots[index].className="active";
}
slideImg();

[/dangerbox]

效果如下

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。