JavaScript - 自动轮换选项卡

最新推荐文章于 2023-01-18 22:11:31 发布

全球变冷v

最新推荐文章于 2023-01-18 22:11:31 发布

阅读量321

点赞数

分类专栏： JavaScript 文章标签： css html javascript js实例 web

本文链接：https://blog.csdn.net/wsydxiangwang/article/details/78967473

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
#content{
    width:550px;
    height:300px;
    border:1px solid #000;
    margin:20px auto;
    position:relative;
    border-radius:8px;
}
#content a{
    display:inline-block;
    text-decoration:none;
    text-align:center;
    width:120px;
    height:40px;
    line-height:40px;
    background:pink;
    margin-left:2px;
    margin-top:4px;
    margin-bottom:4px;
    border-radius:8px;
    font-size:20px;
    color:#fff;
    /*overflow:hidden;*/
}
#content img{
    float:left;
    margin-left:2px;
    border-radius:8px;
    width:398px;
    height:250px;
}
#content ul{
    float:right;
    width:150px;
    height:250px;
    position:absolute;
    top:48px;
    right:0;
}
#content ul li{
    background:pink;
    height:80px;
    width:140px;
    line-height:80px;
    text-align:center;
    font-size:20px;
    color:#fff;
    border-radius:8px;
    margin-left:4px;
    margin-top:3px;
    cursor:pointer;
}
#content a.active{
    background-color:red;
}
#content ul li.list{
    background:red;
}
</style>
</head>
<body>
<div id="content">
    <a href="#">梦想</a>
    <a href="#">追求</a>
    <img src="image/0.jpg"/>
    <ul>
        <li>小米</li>
        <li>百度</li>
        <li>腾讯</li>
    </ul>
    <ul>
        <li>阿里巴巴</li>
        <li>京东</li>
        <li>网易</li>
    </ul>
</div>
<script>
window.onload = function(){
    var oDiv = document.getElementById('content');
    var oA = oDiv.getElementsByTagName('a');
    var oUl = oDiv.getElementsByTagName('ul');
    var aLi = oDiv.getElementsByTagName('li');
    var oImg = oDiv.getElementsByTagName('img')[0];
    var arrUrl = ['image/0.jpg','image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg','image/5.jpg','image/6.jpg',]
    var num = 0;
    var timer = null;

//把需要重复使用的代码进行封装，对所有if判断转为三元操作符

    //初始化
    function origin(num1,num2){
        oUl[num1].style.display = 'none';
        oA[num1].className = '';
        oUl[num2].style.display = 'block';
        oA[num2].className = 'active';
        aLi[0].className = 'list';
    }
    origin(1,0);

// title
    for(var i = 0; i < oA.length; i++){
        oA[i].index = i;
        oA[i].onclick = function(){
            for(var i = 0; i < oA.length; i++){
                oA[i].className = i != this.index ? '' : 'active';
                oUl[i].style.display = i != this.index ? 'none' : 'block';
            }
        //封装显示 li img
            function tab(num3){
                aLi[num3].className = 'list';
                oImg.src = arrUrl[num3];
                num = num3;
            }
            //点击title 跟随的li第一个添加class 其他消失
            for(var j = 0; j < aLi.length; j++){
                aLi[j].className = '';
                this.index == 0 ? tab(0) : tab(3);
            }
        }
    }
//滑动到li
    for(var i = 0; i < aLi.length; i++){
        aLi[i].index = i;
        aLi[i].onmouseover = function(){
            num = this.index;
            oImg.src = arrUrl[this.index];
            for(var i = 0; i < aLi.length; i++){
                aLi[i].className = i != this.index ? '' : 'list';
            }
        }
    }
//自动轮播
    function play(){
        timer = setInterval(function(){
            num++;
            oImg.src = arrUrl[num];
            num < aLi.length / 2 ? origin(1,0) : origin(0,1);
            
            for(var i = 0; i < aLi.length; i++){
                aLi[i].className = i != num ? '' : 'list';
            }
            if(num == aLi.length - 1){
                num = -1;
            }
             console.log(num);
        },1500)

    }
    play();

    //关闭 开启定时器
    oDiv.onmouseover = function(){
        clearInterval(timer);
    }
    oDiv.onmouseout = play;
}
</script>
</body>
</html>