html布局

	
		
 
		
		
		
 
		
 
		
 
	
	
		
 

			
  
		
 
		
 	
		
 

		
   
    
     
      
      
OVERSEAS
 
      
展现独特的世界观
 
      探索 
      
      
       
      
     
    
    
     
      
      
OVERSEAS2
 
      
展现独特的世界观2
 
      探索2 
      
      
       
      
     
    
    
     
      
      
OVERSEAS3
 
      
展现独特的世界观3
 
      探索3 
      
      
       
      
     
    
  
		 
  
		
 
			

		
	

css样式-public.css banner.css index.css

/*public.css*/
* { 
	padding: 0;
	margin: 0;
	color: #333;		
	font-family:'Microsoft Yahei';
}
.container {
	position:relative;
	margin: 0 auto;
	width: 1117px;
}
@media screen and (max-width:1117px){
   .container {
		width:100%;
   }
}
header {
  padding:15px 0;
	text-align: center;
}
.navbar-top {
	background: #363636;
  text-align: center;
	font-size: 0;
}
.navbar-top > ul { 
	list-style: none;
	overflow: hidden;
  display: inline-block;
	/* 清除浮动 */

}
.navbar-top > ul > li { 
	float: left;
}

.navbar-top > ul > li > a {
	position: relative;
	display: block;
	margin: 0 36px;
	padding: 15px 12px;
	color: #fff;
	font-size: 16px;
	transition: all .35s;
	/* border-bottom: 2px #fff solid; */
	text-decoration: none;	
}

.navbar-top > ul > li > a::after{
	content:'';
	position: absolute;
	left:50%;
	bottom:0;
	width: 0;
	height: 2px;
	background-color: #fff;
	transition:width .35s;
	transform:translateX(-50%);
}
.navbar-top > ul > li > a:hover{
	color: #c5842d;
}
.navbar-top > ul > li > a:hover::after{
width: 75px;
}

@media screen and (max-width:992px){
   .container {
		width:750px;
   }
	.navbar-top > ul > li > a {
		margin:0 18px;
	}
}
/*@media screen and (max-width:1024px){
		width:1024px;
	body { 
	}
}*/


@media screen and (max-width:768px){
		/* 手机屏幕 */
	body { 				
		width:768px;

	}
}
/*public.css*/

/*banner.css*/
.banner {
	position: relative;
	width: 100%;
	overflow:hidden;
}
.banner > .banner-wrapper {
	position: relative;
	left: 0;
	overflow:hidden;
	/* transition:left .5s; */
}
.banner .banner-item {
	float: left;
}
.banner .pagination {
	position: absolute;
	/* left: 50%; */
	left: 0;
	right: 0;
	bottom: 40px;
	text-align: center;
/* 	transform:translateX(-50%);
	 */	
}
.banner .pagination > span{
	margin: 0 9px;
	width: 12px;
	height: 12px;
	background-color: #6c6c6c;
	border-radius:50%;
	cursor: pointer;
	display: inline-block;
}
.banner .pagination > span.active {
	background-color: #fff;
}

/*banner.css*/

/*index.css*/
.banner{
	background-color: #000;
}

.banner .container{
	height: 670px;
	overflow:hidden;

}

.banner .banner-left {
	position: absolute;
	left:75px;
	top:200px;
    padding-top: 25px;
    width: 332px;
	text-align: center;
	/* height: 300px; */
	background: url('../images/banner1-01_03.png') no-repeat left top,url('../images/banner1-01_03.png') no-repeat 0 170px;
}
.banner .banner-right {
	position: absolute;
	right:10px;
	top:115px;
}
.banner .banner-right::after{
	content: '';
	position: absolute;
	top:100%;
	width: 100%;
	height: 200px;
	background:url('../images/banner1-03.png');
}

.banner .banner-left > h1 {
	color: #fff;
	/*font-size: 70px;
	font-family: 'SimHei';
	font-weight: normal;*/
	font:normal normal 70px 'SimHei';
}
.banner .banner-left > h2 {
	margin-top: 10px;
	font-size: 26px;
	color: #fff;
	font-family: 'SimSun';
	/* font-style:italic; */
	font-weight:400;
	transform:skewX(-10deg);
}
.banner .banner-left > a {
	padding: 5px 20px;
	margin-top: 75px;
	color: #c5842d;
	font:normal normal 26px 'SimHei';
	border: 1px #c5842d solid;
	text-decoration: none;
	transition:all .35s;
	display: inline-block;
}
.banner .banner-left > a:hover {
	border-radius:5px;
	color:#e5a857;
	border-color:#e5a857;
}

.banner .pagination {
	position: absolute;
	/* left: 50%; */
	left: 0;
	right: 0;
	bottom: 40px;
	text-align: center;
/* 	transform:translateX(-50%);
	 */	
}
.banner .pagination > span{
	margin: 0 9px;
	width: 12px;
	height: 12px;
	background-color: #6c6c6c;
	border-radius:50%;
	cursor: pointer;
	display: inline-block;
}
.banner .pagination > span.active {
	background-color: #fff;
}
/*index.css*/

原生JS插件 carousel.js

function Carousel(container,options){
	this.initFlag = 1;

	this.count = 0;

	var ctrl = this,
		container = document.querySelector(container);
	this.options = options;
	this.wrapper = container.querySelector('.banner-wrapper');
	this.items = container.querySelectorAll('.banner-item');
	this.itemLen = this.items.length;
	this.pagination = container.querySelector('.pagination');
	this.timer = null;

	this.init(document);
}
Carousel.prototype.screenWidth = document.body.clientWidth;
Carousel.prototype.init = function(doc){
	
	if(this.initFlag){
		this.initFlag = null;
	}else {
		console.log('你在尝试初始化两次??');
		return;
	}
	var c = this;
	var screenWidth = this.screenWidth,
	    items = this.items,
		itemLen = items.length,
		wrapper = this.wrapper,
		pagination = this.pagination,
		timer = this.timer,
		options = this.options;
	wrapper.style.width = screenWidth * (itemLen+1) + 'px';
	wrapper.style.transition = 'left ' + options.speed + 'ms'; 
	for( var i=0; i
 
  this.itemLen - 1){
		c.wrapper.style.left = '-'+ c.count * c.screenWidth + 'px';
		for(var i =0; i