9-18h5所学知识~轮播图

最新推荐文章于 2022-03-05 23:32:33 发布

小菜鸟码住

最新推荐文章于 2022-03-05 23:32:33 发布

阅读量135

点赞数

分类专栏： h5知识

本文链接：https://blog.csdn.net/hfyldx/article/details/100991289

版权

h5知识专栏收录该内容

19 篇文章 0 订阅

订阅专栏

轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 1200px;
				height: 397px;
				border: 3px solid red;
				margin: 100px auto;
				/*overflow: hidden;*/
				position: relative;
			
			}
			.box img{
				width: 1200px;
				height: 397px;
				display: none;
			}
			.navBar{
				width: 1002px;
				height: 73px;
				background:url(img/img/bg.png);
				position: absolute;
				bottom: 0;
				left: 99px;
			}
			.navBar span{
				display: none;
				user-select:none;/*阻止双击*/
				width: 30px;
				height: 73;
				background-color: red;
				float: left;
				line-height: 73px;
				font-size: 30px;
				text-align: center;
				color: #fff;
				cursor: pointer;
			}
			.navBar .next{
				float: right;
			}
			.nav{
				float: left;
				margin-left: 550px;
				margin-top: 23px;
				position: absolute;
			}
			.nav li{
				user-select:none;
				width: 30px;
				height: 30px;
				list-style: none;
				background: #fff;
				float: left;
				margin-right: 10px;
				line-height: 30px;
				border-radius: 50%;
				text-align: center;
			}
			/*.nav li:first-child{
				background: blue;
				color: #fff;
			}*/
			.nav .active{
				background: blue;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="box" id="box">
    		<div class="silde">
				<img style="display: block;" src="img/img/img0.gif" alt="">
	            <img src="img/img/img1.jpg" alt="">
	  		    <img src="img/img/img2.jpg" alt="">
	            <img src="img/img/img3.jpg" alt="">
	            <img src="img/img/img4.jpg" alt="">
	            <img src="img/img/img5.jpg" alt="">
	            <img src="img/img/img6.jpg" alt="">
	            <img src="img/img/img7.jpg" alt="">
	         </div>
            <div class="navBar">
            	<span class="prev"><</span>
    			<ul class="nav">
            		<li class="active">1</li>
            		<li>2</li>
            		<li>3</li>
            		<li>4</li>
            		<li>5</li>
            		<li>6</li>
            		<li>7</li>
            		<li>8</li>
        		</ul>
            	<span class="next">></span>
            </div>
		</div>
		<script>
			//1.获取相关元素
//			 var box =document.getElementById('box');
             var box = document.getElementsByClassName('box')[0];
			var imgs = box.children[0].children;
			var i=0;
//			var next = document.getElementById('next');
			var next = document.getElementsByClassName('next')[0];
			var prev = document.getElementsByClassName('prev')[0];
			var lis = document.getElementsByClassName('nav')[0].children;
//			console.log(next);
			//2.自动轮播
			function move(){
				imgs[i].style.display='none';
				lis[i].className='';
//				lis[i].style.background='#fff';
//				lis[i].style.color='#000';
				i++;
				i===8 && (i=0);
				imgs[i].style.display='block';
				lis[i].className='active';
//				lis[i].style.background='blue';
//				lis[i].style.color='#fff';
			}
		  var id = setInterval(move,1000);
		  //3.鼠标划入清定时器
			box.onmouseover=function(){
				clearInterval(id);
				prev.style.display = 'block';
				next.style.display = 'block';
			}
			//4.鼠标划出开定时器
			box.onmouseout = function(){
				id = setInterval(move,1000);
				prev.style.display = 'none';
				next.style.display = 'none';
			}
			//5.右箭头点击事件
			next.onclick=move;
			//6.左箭头事件
			prev.onclick = function(){
				imgs[i].style.display='none';
				lis[i].className= '';
				i--;
				i===-1 && (i=7);
				imgs[i].style.display='block';
				lis[i].className = 'active';
			}
			//7.给每个li绑定点击事件
				for(var j=0;j<lis.length;j++){
					lis[j].index = j;//保留li圆圈下标
//					lis[j].onselectstart = function(e){
//						e.preventDefault();
//					}//阻止双击
				
				lis[j].onclick = function(){
					imgs[i].style.display = 'none';
					lis[i].className='';
					i=this.index;
					imgs[this.index].style.display = 'block';
					this.className = 'active';
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 800px;
            height: 120px;
            border: 3px solid red;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        #slide{
            width: 2320px;
            position: absolute;
        }
        #slide img{
            width: 200px;
            float: left;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="slide">
            <img src="img/m1.png" alt="">
            <img src="img/m2.png" alt="">
            <img src="img/mi4.png" alt="">
            <img src="img/m3.png" alt="">
            <img src="img/mi4.png" alt="">
            <img src="img/m2.png" alt="">
            <img src="img/m2.png" alt="">
            <img src="img/mi4.png" alt="">
            <img src="img/m3.png" alt="">
            <img src="img/m1.png" alt="">
        </div>
    </div>
    <script>
        var slide = document.getElementById('slide');
        var box = document.getElementById('box');
        var i = 0;
        function move(){
            // if(i<=-1320){
            //     i=0;
            // }else{
            //     i--;
            // }
            i = i<=-1320?0:i-1;
            slide.style.left = i + 'px';
        }
        var id = setInterval(move,10);
        box.onmouseover = function(){
            clearInterval(id);
        }
        box.onmouseout = function(){
            id = setInterval(move,10);
        }
    </script>
</body>
</html>

在这里插入图片描述
CSS轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>column</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul,li,ol{
            list-style: none;
        }
        .box{
            width: 100%;
            height: 500px;
            overflow: hidden;
            position: relative;
        }
        .slide{
            width: 500%;
            height: 500px;
            position: absolute;
            animation: move 10s 2s infinite;
        }
        .slide li{
            float: left;
            width: 20%;
            height: 450px;
        }
        .slide li:nth-child(1){
            background: url(img/img/img/img5.jpg) no-repeat center;
        }
        .slide li:nth-child(2){
            background: url(img/img/img/img0.gif) no-repeat center;
        }
        .slide li:nth-child(3){
            background: url(img/img/img/img3.jpg) no-repeat center;
        }
        .slide li:nth-child(4){
            background: url(img/img/img/img4.jpg) no-repeat center;
        }
        .slide li:nth-child(5){
            background: url(img/img/img/img7.jpg) no-repeat center;
        }
        @keyframes move{
            0%{
                left: 0;
            }
            10%{
                left: -100%;
            }
            20%{
                left: -100%;
            }
            30%{
                left: -200%;
            }
            40%{
                left: -200%;
            }
            50%{
                left: -300%;
            }
            60%{
                left: -300%;
            }
            70%{
                left: -400%;
            }
            80%{
                left: -400%;
            }
           
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="slide">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

小菜鸟码住

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9-18h5所学知识~轮播图

轮播图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .box{ width: 1200px;...
复制链接

扫一扫

专栏目录