原生JS制作常见网页轮播图

目录

1.Html

2.Css 

3.Js

---

1.Html

 <!--轮播图-->
     <div class="slid" id="sd">
        <ul>
            <li><a href="#"><img src="images/banner1.png" alt=""></a></li>
            <li><a href="#"><img src="images/banner2.png" alt=""></a></li>
            <li><a href="#"><img src="images/banner1.png" alt=""></a></li>
        </ul>
        <p>
            <span class="cur"></span>
            <span></span>
            <span></span>
        </p>
    </div>

2.Css 

/*轮播图*/
*{
    padding: 0;
    margin: 0;
}
.slid{
    position: relative;
    width: 1920px;
    height: 600px;
    /* border: 2px solid red; */
}
.slid img{
    width: 1920px;
    height: 600px;
}
.slid li{
    position: absolute;
    list-style: none;
    display: none;
}
.slid p{
    position: absolute;
    left: 870px;
    bottom: 20px;
}
.slid p span{
    float: left;
    width: 10px;
    height: 10px;
    background: rgb(231, 231, 231);
    margin-left: 10px;
    border-radius: 50%;
    cursor: pointer;
}
.slid p .cur{
    background: #00a8a8;
    box-shadow: 0 0 5px 5px rgb(248, 248, 248);
}

3.Js

var sd = document.getElementById('sd');
var li = sd.getElementsByTagName('li');
var span = sd.getElementsByTagName('span');

//第一步，隐藏所有图片，显示第一张图片
li[0].style.display = 'block';
//第二步，设置定时器实现轮播

var i = 0;
//第三步,封装定时器
var t ='';
function autoPlay(){
    t = setInterval(function(){
        i++;
        if(i>=li.length){
            i=0;
        }
        for(var j=0;j<li.length;j++){
            li[j].style.display = 'none';
            span[j].className = '';
        }
        li[i].style.display = 'block';
        span[i].className = 'cur';
    },1500)
}
autoPlay();//封装定时器必须调用
//第四步 鼠标移动上去停止轮播，鼠标离开继续轮播
sd.onmouseover = function(){
    clearInterval(t);
}
sd.onmouseout = function(){
    autoPlay();
}
//第六步 鼠标移动到下标 图片切换
for(i=0;i<span.length;i++){
    var a = span[i];
    a.index = i;
    a.onmouseover = function(){
        i = this.index;
        for(var j = 0;j<li.length;j++){
            li[j].style.display = 'none';
            span[j].className = '';
        }
        span[i].className = 'cur';
        li[i].style.display = 'block'
    }
}

可以套用在任何页面中~~做不出来没道理的！