轮播图样式代码

简单通过HTML,css样式和js实现轮播图的效果

效果图

轮播图样式代码_第1张图片

整体思路分析

1.首先整体是一个大的< div >标签,存放整个布局 ;
2.其次在里面设置两个小的< div >标签,分别用来存放图片和标签;
3.最后通过css样式和js来实现具体的效果

在html的body中添加一个div作为显示框,然后在这个div内部添加两个子div作为图片盒标签的显示。代码如下:
<body>
		<div class="banner">
			<div class="img-wrap">
			<img src="img/1.jpg"/>
				<img src="img/2.jpg"/>
				<img src="img/3.jpg"/>
				<img src="img/4.jpg"/>
				<img src="img/5.jpg"/>
			div>
			<div class="title-bth">
				<span id="">01span>
				<span id="">02span>
				<span id="">03span>
				<span id="">04span>
				<span id="">05span>
			div>
		div>
	body>
头部添加css样式,代码如下:

这里还需要引入一个jquery,然后就是通过js实现轮播效果,代码如下:
<script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
			$("span").mouseenter(function(){
				var index=$(this).index();  //获取下标
				$(".img-wrap").css({
					transform: 'translateX(-'+index*604+'px)'
				});
			})
			</script>

到这里,一个简单的轮播图也就实现了。

你可能感兴趣的:(html,css,js)