当前位置：网站首页>Shandong University project training (VIII) design rotation map entry page

Shandong University project training (VIII) design rotation map entry page

2022-06-29 18:33:00 【MeditationRain】

List of articles

This time I designed an entry page for our project , Is a full screen dynamic carousel , And there are two buttons in the middle of the page for entering the actual project page .

One 、Swiper Introduce ：

Swiper Is a free and lightweight mobile device touch slider js frame , Use hardware to accelerate the transition （ If the device supports ）. Mainly used for mobile websites 、 Move web apps,native apps and hybrid apps. Mainly for IOS And designed , meanwhile , stay Android、WP8 The system also has a good user experience ,Swiper from 3.0 No more full support at first PC End . therefore , If you need to be in PC More browsers are compatible on the Internet , You can choose Swiper2.x.

Two 、Swiper introduce

Swiper download ：
Import the used files into the project folder ：

Insert picture description here

Add plug-ins ：

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper-bundle.min.js"></script>
    ...
</body>
</html>

add to HTML Content ：

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!--  If you need a pager  -->
    <div class="swiper-pagination"></div>
    
    <!--  If you need a navigation button  -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!--  If you need a scroll bar  -->
    <div class="swiper-scrollbar"></div>
</div>
 Navigation and other components can be placed in Swiper Outside the container

3、 ... and 、Swiper Use

What I used in the project was a full screen carousel , There are dynamic indication points below , And it is played in a loop .
Insert picture description here

HTML file ：

    <div class="swiper mySwiper">
        <!-- Loading pictures -->
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="images/1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/3.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/4.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/5.jpg" alt=""></div>
      </div>
		<!-- Dynamic indication point -->
      <div class="swiper-pagination"></div>
        <!-- Page switch button -->
	  <div class="middle">
		  <a class="btn btn3" href="./check.html"> Check the air quality of city stations </a>
		  <a class="btn btn4"> Check the pollution level of the city </a>
	  </div>
    </div>

Pattern design ：

.swiper {
    
width: 100%;
height: 100%;
}

.swiper-slide {
    
text-align: center;
font-size: 18px;
background: #fff;

/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

.swiper-slide img {
    
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.middle {
    
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  z-index: 2;
	  transform: translate(-50%,-50%);
}
.btn{
    
	z-index: 2;
	display: inline-block;
	position: relative;
	color: white;
	font-size: 14px;
	font-family: "montserrat";
	text-decoration: none;
	margin: 30px 10px;
	background: rgba(0, 0, 0, 0.8);
	border: 2px solid #ff7675;
	padding: 14px 60px;
	text-transform: uppercase;
	overflow: hidden;
	transition: 1s all ease;
}
.btn::before{
    
	background: #ff7675;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
	transition: all 0.6s ease;
}

.btn3::before{
    
  width: 100%;
  height: 0%;
  transform: translate(-50%,-50%) rotate(45deg);
}
.btn3:hover::before{
    
  height: 480%;
}

.btn4::before{
    
  width: 100%;
  height: 0%;
  transform: translate(-50%,-50%) rotate(-45deg);
}
.btn4:hover::before{
    
  height: 450%;
}

js Code ：

      var swiper = new Swiper(".mySwiper", {
    
        pagination: {
    
          el: ".swiper-pagination",
        },
		loop: true,
		speed:2000,
		autoplay: {
    
			delay: 3000,
			disableOnInteraction: false,
			waitForTransition: false,
		},
	    effect : 'fade',
	    fadeEffect: {
    
		    crossFade: true,
	    }
      });