轮播图 | 易学教程


<!DOCTYPE html>
<html>
<head>
    <title>
        
    </title>
    <link rel="stylesheet" type="text/css" href="lesson7.css">
</head>
<body>

    <div id="haha" class="wrapper">
        <ul class="pic">
            <li class="p activePic" style="background-color: CornflowerBlue " > </li>
            <li class="p" style="background-color: LemonChiffon"> </li>
            <li class="p" style="background-color: pink"> </li>
            <li class="p" style="background-color: LightGreen"> </li>
            <li class="p" style="background-color: plum"> </li>
        </ul>
        <ul class="point clearfix">
            <li class="pp activePoint"></li>
            <li class="pp"></li>
            <li class="pp"></li>
            <li class="pp"></li>
            <li class="pp"></li>
        </ul>
        <button class="left"><</button>
        <button class="right">></button>
    </div>


    <script type="text/javascript">
        var num = 0;
        var pic = document.getElementsByClassName('p');
        var leftButton = document.getElementsByClassName('left')[0];
        var rightButton = document.getElementsByClassName('right')[0];
        var point = document.getElementsByClassName('pp');
        var wrapper = document.getElementsByClassName('wrapper')[0];
    // 跳转到num图
        function go(){
            if(num<0) num =4;
            if(num==5) num =0;
            for(var i =0;i<pic.length;i++){
                pic[i].className = 'p';
                point[i].className = 'pp';
            }
            pic[num].className +=' activePic';
            point[num].className +=' activePoint'
        }
        rightButton.addEventListener('click',function(){
            num++;
            go();
        },false)
        leftButton.addEventListener('click',function(){
            num--;
            go();
        },false)
    // 点和图联系上
        for(var i=0;i<point.length;i++){
            (function(i){
                point[i].addEventListener('click',function(){
                    for(var j=0;j<point.length;j++){
                        point[j].className ='pp';
                    }
                    point[i].className +=' activePoint';
                    num =i;
                    go();
                },false)
            }(i))
        }
    // 定时器
        var timer;
        wrapper.onmouseout = function(){
            timer = setInterval(function(){
                num++;go();
            },1000)
        }
        wrapper.onmouseover = function(){
            clearInterval(timer);
        }
        
    </script>
</body>
</html>

css

.clearfix:after{
	content: '';
	display: block;
	clear: both;
}
.wrapper{
	width: 300px;
	height: 300px;
	position: relative;
}
ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.pic li{
	position: absolute;
	width: 300px;
	height: 300px;
}

.point{
	z-index: 1;
	position: absolute;
	right: 10px;
	bottom: 10px;
}
.pp{
	float: left;
	width: 8px;
	height: 8px;
	border: 2px solid red;
	border-radius: 100%;
	margin: 0 3px;
	
}
button{
	outline: none;
	position: absolute;
	width: 30px;
	height: 35px;
	top: 50%;
	margin-top: -17.5px;
	z-index: 2;
}
button.left{
	left: 0;
}
button.right{
	right: 0;
}
.activePic{
	z-index: 1;
}
.activePoint{
	border-color: rgba(225,225,225,0.2);
	border-color: black;
}

来源：CSDN

作者：weixin_44040169

链接：https://blog.csdn.net/weixin_44040169/article/details/104636932

标签

num

轮播

var