"大三暑假找了個做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");
	}
});