仿小红书图片-横条-文字联动点击轮播

"大三暑假找了个做APP的公司实习，当时说好有大牛带着做Android，工作内容却变成了前端，并且技术主管要求我尽可能用Vue.js来做网站。那时候我只会一点点HTML，CSS也只会一些很基础的内容，别说Vue了，JS我都不懂，并且整个公司的前端就只有我一个人，遇到不会的只能自己查资料，自己硬着头皮去做。这个点击轮播是在准备回学校上课的时候做公司产品官网用到的，当时是找老师请教的，风格仿小红书。"

1.HTML代码：

<div class="container">
    <!-- 图片 -->
	<div class="container_imgs">
		<div class="imgs">
			<img src="img/banner1.png" class="img" />
			<img src="img/banner2.png" class="img" />
			<img src="img/banner3.png" class="img" />
			<img src="img/banner4.png" class="img" />
		</div>
	</div>
	<!-- 横条+文字 -->
	<div class="container_lines">
		<!-- 横条 -->
		<div class="lines">
			<span class="line on"></span>
			<span class="line"></span>
			<span class="line"></span>
			<span class="line"></span>
		</div>
		<!-- 文字 -->
		<div class="texts">
			<div class="text act"><span class="num">01</span><h2>发现</h2>吃喝玩乐，啥都有。</div>
			<div class="text"><span class="num">02</span><h2>同城</h2>零工新时代，约你的专属服务。</div>
			<div class="text"><span class="num">03</span><h2>圩圈</h2>复古集市，新潮玩法。</div>
			<div class="text"><span class="num">04</span><h2>发布</h2>有想法，你就开个价呗。</div>
		</div>
	</div>
</div>

2.CSS代码：

*{
	padding: 0;
	margin: 0;
}
.container{
	width: 100%;
}
.container_imgs{
	width:100%;
	height:400px;
	background:#2a202c;
}
.imgs{
	position: relative;
	margin: 0 auto;
	width: 1000px;
}
.img{
	display: block;
	position: absolute;
	top: 50px;
	right: 0;
	opacity: 0;
}
img:first-child{
	opacity: 1;
}
.container_lines{
	position: relative;
	margin: 0 auto;
	width: 1200px;
	height: 420px;
}
.lines{
	position: absolute;
	top: 200px;
	left: -10px;
}
.line{
	display: inline-block;
	margin: 0 10px;
	width:38px;
	height:4px;
	text-align: center;
	background: #ff99b1;
	border-radius:2px;
	cursor:pointer;
}
.on{
	background: #f8426c;
}
.texts{
	display: flex;
	position: absolute;
	width: 100%;
	top: 350px;
	/* left: 100px; */
	color:#181219;
}
.act{
		color:#f8426c;
}
.act h2{
	font-size: 32px;
	animation: myani 0.5s ease 1 alternate 0s both;
}
.text{
	position: relative;
	padding-left: 30px;
	flex: 1;
	font-size: 16px;
}
.texts h2{
	font-size:20px;
	line-height: 40px;
}
.num{
	display: block;
	position: absolute;
	left: 0;
	font-size: 12px;
	font-weight: bold;
	line-height: 70px;
}
@keyframes myani{
	0%{
		font-size:20px;
	}
	100%{
		font-size:32px;
	}
}

3.jQ代码：

jq自行下载

//jQ函数
$(function(){
	//定义Int函数
	function Int(){
		//创建变量num，值为0
		var num=0;
		//创建变量aaa
		var aaa;
		//定义autoPlay函数
		function autoPlay(){
			//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
			aaa=setInterval(function(){
				//num自加
				num++;
				//如果num大于class名为imgs的属性长度，num为0
				if(num>=$(".img").length){
					num=0;
				}
				//num>0后改变num
				change(num);
			},3000);//三秒变一次
		}
		//执行autoPlay函数
		autoPlay();
		/* setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭 */
		//把clearInterval（aaa）方法存入bbb函数
		var bbb=function(){
			clearInterval(aaa)
		};
		//找到名为line的class属性，使用mouseover方法，调用bbb函数
		$(".line").mouseover(function(){
			bbb();
			//使用mouseout方法，调用autoPlay函数
		}).mouseout(function(){
			autoPlay();
			//使用click方法，改变num变量
		}).click(function(){
			num=$(this).index();
			change(num);
		});
		//找到名为text和part的class属性，使用mouseover方法，调用bbb函数
		$(".texts .text").mouseover(function(){
			bbb();
			//使用mouseout方法，调用autoPlay函数
		}).mouseout(function(){
			autoPlay();
			//使用click方法，改变num变量
		}).click(function(){
			num=$(this).index();
			change(num);
		});

	}

	Int();

	function change(num){
		$(".img").css({
			"-webkit-transition":"1000ms ease",
			"transition":"700ms ease",
			'opacity':0
		});

		$(".img").eq(num).css({
			"-webkit-transition":"1000ms ease",
			"transition":"700ms ease",
			'opacity':1
		});

		$(".line").removeClass("on").eq(num).css({
			"-webkit-transition":"1000ms ease",
			"transition":"700ms ease"
		}).addClass("on");

		$(".texts .text").removeClass("act").eq(num).css({
			"-webkit-transition":"all 700ms ease 0",
			"transition":"all 700ms ease 0"
		}).addClass("act");
	}
});

仿小红书图片-横条-文字联动点击轮播

猜你喜欢