带内容提示幻灯轮播图

2020-06-28 网页编程网 网页编程网

}
.list{
	width:604px;
	height:44px;
}
.list span{
float: left;
width: 120.8px;
height: 44px;
line-height: 44px;
text-align: center;
font-size: 14px;
color: #ccc;
cursor: pointer;
}
.list span:hover{
	background:#4e4e53;
	color: #f3ca58; 
}
</style>
	</head>
	<body>
<div class="banner">
	<div class="img-wrap">
		<img src="2.jpg" />
		<img src="2.jpg" />
		<img src="2.jpg" />
		<img src="2.jpg" />
		<img src="2.jpg" />
	</div>
	<div class="list">
		<span>喜欢你</span>
		<span>喜欢小雨</span>
		<span>喜欢小林</span>
		<span>喜欢萌萌</span>
		<span>喜欢木子</span>

</div>
</div>
<p>内容间有多个空格，只会被识别一个，要转成块元素。
html元素分：行内元素、行内块、块元素。</p>
<p>行为元素如span，设置宽高无效。</p>
<p>float:left可省display:block</p>
<ul>
<li>动态效果</li>
<li>改变图片容器位置</li>
<li>0 -604px -1208px -1812px</li>
<li>0*604 1*604 2*604</li>
<li>- n*604 n从0开始不断自增</li>
</ul>
<script>
document.querySelectorAll('span').forEach(function(el,index) {
	el.onmouseenter=function(){
	document.querySelector('.img-wrap').style.transform="translateX(-"+604*index+"px)"
	}
});
</script>
</body>

阅读原文

阅读 3855

123 显示电脑版