span在某条件下不能够被点击

  1. 现在写了一段html代码，想要div在最开始的位置，span不能够被点击。同理div在末端的位置不能被点击。
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	/*隐藏水平滚动条*/
	.element::-webkit-scrollbar { width: 0 !important }
	.element { -ms-overflow-style: none; }
	.element { overflow: -moz-scrollbars-none; }
	
	/*chisiamo_style*/
	.chisiamo_son{float: left; width:320px; height: auto; margin:0 25px 0 0; overflow:hidden; display: inline-block; vertical-align:top; position: relative;white-space:nowrap;text-align: center}
	.chisiamo_father{height: auto;width: auto;padding: 0 calc(20% - 200px);display: inline-flex; white-space:nowrap; overflow:visible;position: relative}
	.chisiamo_img{width:100%; display:block;height: auto}
	.outer-container{}
	.chisiamo_father::-webkit-scrollbar {width:0; height:0;display: none;}
	.chisiamo_son p{white-space:normal;font-size: 14px}
	.chisiamo_son h1{margin-top: -10px;font-size: 22px}
	
	p{text-align: center};

/*手机端缩小div尺寸*/
	@media only screen and (min-width: 320px) and (max-width: 767px){
		.chisiamo_son{width: 180px;margin-right: 10px;}
		.chisiamo_son h1{font-size: 20px;white-space: normal}
	} 
	
	@media (max-width: 1170px){
		.chisiamo_father{padding: 0 80px} 
		.listcarousel__nav{margin:35px 80px}
		.listcarousel__nav__next:before, .listcarousel__nav__prev:before
			{content: "";display: block;width: 12px;height: 12px;
			border-style: solid;border-color:#000;
			position: absolute;left: 50%;top: 50%;
			transform: rotate(-45deg)}
		.listcarousel__nav__next:before{border-width: 0 1px 1px 0;margin: -6px 0 0 -10px}
		.listcarousel__nav__prev:before{border-width: 1px 0 0 1px;margin: -6px 0 0 -4px}
		.listcarousel__nav__next, .listcarousel__nav__prev
			{position: relative;display: block;width: 44px;height: 44px;border: 1px solid #bfbfbf;
			float: left;opacity: 1!important}
		.listcarousel__nav{position: relative;max-width: 1010px;}
		.listcarousel__nav__next{margin-left: -1px}
	}
	@media (max-width: 1023px){.chisiamo_father{padding: 0 40px} .listcarousel__nav{margin:25px 40px}}
	@media (max-width: 767px){
		.chisiamo_father{padding: 0 40px} 
		.listcarousel__nav{margin:15px 40px}
		}
	
/* basic fadein */
@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    40% {opacity: 0;}/*过渡状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
    0% {opacity: 0;}  
    40% {opacity: 0;}  
    100% {opacity: 1;}  
}  
#inner-container {    
    animation: fade-in;/*动画名称*/  
    animation-duration: 1s;/*动画持续时间*/  
    -webkit-animation:fade-in 1s;/*针对webkit内核*/  
}  
	
	
	
	</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#nav_prev").click(function(){
    $("#inner-container").animate({
      left:'+=345px',
    });
  });
});
$(document).ready(function(){
  $("#nav_next").click(function(){
    $("#inner-container").animate({
      left:'-=345px',
    });
  });
});
</script> 

</head>

<body>
<div><p>RISTORANTE SUSHI A Manerbio</p></div>

<div class="outer-container">
<div class="chisiamo_father" id="inner-container">
	<div id="chisiamo_1" class="chisiamo_son">
	<img src="image/text_0005_图层 1.jpg" alt="" class="chisiamo_img">
	<h1>Chi Siamo</h1>
	<p>Yami Restaurant propone i piatti più saporiti di sushi cucinati con raffinatezza ed estro creativo. Lo chef parte dalla tradizione per modellare con tocco personale le preparazioni, creando così sapori nuovi.</p></div>
	
	<div id="chisiamo_2" class="chisiamo_son">
	<img src="image/text_0004_图层 2.jpg" alt="" class="chisiamo_img">
	<h1>Il Nostro Menù</h1>
	<p>Sul menu non manca nessuno dei tipi di sushi tradizionali come uramaki, gunkan, così come i rinomati carpacci crudi, riso con anguilla e i succulenti piatti Teppanyiaki.</p></div>
	
	<div id="chisiamo_3" class="chisiamo_son">
	<img src="image/text_0003_图层 3.jpg" alt="" class="chisiamo_img">
	<h1>Ottimo servizi</h1>
	<p>Ci distinguiamo per freschezza e qualità delle materie prime utilizzate, per il servizio meticoloso e veloce, per la cura del cliente e la soddisfazione di ogni sua necessità, per l'accoglienza e il ristorante con un design moderno, curato nei minimi dettagli.</p></div>
	
	<div id="chisiamo_4" class="chisiamo_son">
	<img src="image/text_0002_图层 4.jpg" alt="" class="chisiamo_img">
	<h1>Ampia lista di vini</h1>
	<p>Abbiamo selezionato una lista di vini di assoluta qualità, che vi consentirà di abbinare ogni piatto al vino più adatto per sapore e gradazione. </p></div>
	
</div>
</div>

<div class="listcarousel__nav">
	<span class="listcarousel__nav__prev" id="nav_prev"></span>
	<span class="listcarousel__nav__next" id="nav_next"></span>
</div>

</body>
</html>

     

类似这样

css 不能被选中    user-select:none;

时机合适的时候，添加这个css就行了

我后面还有别的内容呀，如果关掉了，用户想返回来看前面的内容就看不了

 

 

兄弟，我不会jq，这种操作dom的方式我一共学了不到3节课。

我直接学的vue。轮播图可以直接用组件解决的。https://www.swiper.com.cn/

设置一个count = 0计数left加345的次数，判断count第0次和最后一次,document.getElementById("nav-prev").setAttribute("disabled", true);