swiper2兼容ie幻灯片插件

发布时间：2018-02-28, 17:48:52 分类：HTML | 编辑 off 网址 | 辅助

正文 2593字数 1,277,499阅读

<link rel="stylesheet" href="/ie/idangerous.swiper.css">
<script src="/ie/jquery-1.10.1.min.js"></script>
<script src="/ie/idangerous.swiper.min.js"></script>

Run code

Cut to clipboard

 <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
     

     
   		<foreach name="blist" item="r" key="k" >
			 
            	 <div class="swiper-slide" ><img src="{$r.img_path}" style="width: 100%; "></div>
				
				</foreach>
    </div>
    
    <div class="pagination"></div>
    
    <!-- 左右箭头 -->
    <!--
    <div  style="    
    width: 1200px;
    height: 60px;
   position: absolute;
    top:79%;
    left: 50%;
    margin-left: -600px;
    overflow: hidden;
   
    z-index: 9;">
     
     <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    </div>-->
  </div>

Run code

Cut to clipboard

<script>
 
$(document).ready(function(){
	
var mySwiper = new Swiper('.swiper-container',{
autoplay : 5000,//可选选项，自动滑动
loop : true,//可选选项，开启循环
calculateHeight : true,
pagination : '.pagination',
paginationClickable :true,roundLengths : true,slidesPerView : 1,autoResize : false,
})
$('#sdafasdfdsimgmmm').hide();
  $(".swiper-slide img").each(function(){
    $(this).show();
  });
});
	
	
  </script>

 <style type="text/css">
.pagination {
  position: absolute;
  z-index: 20;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #555;
  margin: 0 5px;
  opacity: 0.8;
  border: 1px solid #fff;
  cursor: pointer;width: 42px;
    height: 5px;
    display: block;
    background-color: #323232;
    margin-left: 18px;
    display: inline-block;border-radius: 0px;
}
.swiper-active-switch {
  background: #fff;opacity: 1;
    background: #3FDEC7;
    width: 42px;
    height: 5px;
    display: block;
    display: inline-block;border-radius: 0px;
}.bj>.in_news>.neih>.xinw>a>.meige>.ner>p{height:38px;}
/*利用:after伪元素*/  
.clearUl:after {  
content:"";
display: block;  
clear: both;  
}
</style>

Run code

Cut to clipboard

css js 附件下载

swiper2文档
superslide2

（支付宝）给作者钱财以资鼓励（微信）→

标签: ie7 兼容6 swiper1

有过 3 条评论 »

广西河池市宜州市 2018-02-28, 17:53:01


<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">


<title>首页-广西南宁共振创意中心</title>
<meta name="keywords" content="首页-广西南宁共振创意中心,南宁网站建设,南宁网页制作,南宁网站开发,南宁网络公司,南宁网站公司,南宁做网站,南宁共振创意中心,共振创意">
<meta name="description" content="首页-广西南宁共振创意中心">
<link type="text/css" rel="stylesheet" href="/css/public.css?6" charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="/css/style.css?13"  charset="utf-8"/>


<script>var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
var isAndroid = ua.indexOf('android') != -1;
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if (isWeixin || isAndroid || isIos) {
var ssss='';
var sssurl='http://m.resonance.com.cn/';
if(ssss) sssurl=ssss;
location.href = sssurl;
}</script>



<script src="/ie/jquery-1.10.1.min.js"></script>
<!--<script src="/js/jquery-1.4.4.min.js"></script>
<link rel="stylesheet" href="/css/swiper.min.css">-->
<link rel="stylesheet" href="/ie/idangerous.swiper.css">
 <style>
 *{font-family: "微软雅黑";}
 .nav li{float:left}

	
	.newmainsoutnew{
	display:none;
	
	
	top: 48px;
    color: #fff;
    position: absolute;
   left: -12px;
    width: 90px;
    padding: 20px;
     background:url(/images/navbggg.png);
    white-space: nowrap;
	 top: 135px;
	 z-index: 999;
	
	
	
   
   
}
.navli:hover .newmainsoutnew{
	display:block;
	
}


	
	.newmainsoutnew li{
	    cursor: pointer;
    list-style: none;
    line-height: 39px;
    border-bottom: 1px dashed;
    font-size: 14px;
	white-space:nowrap; 
	    width: 100%;
	
	}
	
	.newmainsoutnew li a{
	    text-align: center;
	   color: #fff;
    text-shadow: none;
	font-family:'微软雅黑';
	    width: auto;
	
	}
	
	.newmainsoutnew li:hover a{
	text-align:center;
	   color: #24D3B6;
    text-shadow: none;
	font-family:'微软雅黑';
	
	}
	.top{    position: relative;
    z-index: 999;}.newmainsoutnew{top:130px;}
	</style>

</head>

<body>
<!-----------------------头部 开始---------------------->
<div class="top">
	<div class="jz">
		<div class="logo"><a href="/"><img src="/upload/201801/1515643230.png"/></a></div>
		<div class="nav">
			<ul>
				<li class="dd"><a href="/" class="tub dandu">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</a></li>
				<li style="position: relative;" class="navli " ><a href="index.php/Home/Service/index/cid/445.html" class="tub ">服务范围</a>
	  
	  
	  
	  <ul class="newmainsoutnew" style="position:absolute;"><li><a href="index.php/Home/Newsshow/index/pagesss/1/cid/446/big/445.html">网站建设</a></li><li><a href="index.php/Home/Newsshow/index/pagesss/1/cid/447/big/445.html">网站托管</a></li><li><a href="index.php/Home/Newsshow/index/pagesss/1/cid/448/big/445.html">网络营销</a></li><li><a href="index.php/Home/Newsshow/index/pagesss/1/cid/449/big/445.html">软件系统开发</a></li><li><a href="http://www.resonance.net.cn/" target="_blank">广告设计</a></li><li><a href="index.php/Home/Newsshow/index/pagesss/1/cid/450/big/445.html">UI界面设计</a></li></ul>								
	  
	  
	  
	  
	  
	  </li><li style="position: relative;" class="navli " ><a href="index.php/Home/Product/index/cid/136.html" class="tub ">案例中心</a>
	  
	  
	  
	  <ul class="newmainsoutnew" style="position:absolute;"><li><a href="index.php/Home/product/index/cid/421.html">企业/集团网站</a></li><li><a href="index.php/Home/product/index/cid/183.html">品牌网站</a></li><li><a href="index.php/Home/product/index/cid/423.html">微站/手机站</a></li><li><a href="index.php/Home/product/index/cid/462.html">商城门户</a></li><li><a href="index.php/Home/product/index/cid/461.html">UI界面设计</a></li></ul>								
	  
	  
	  
	  
	  
	  </li><li style="position: relative;" class="navli " ><a href="index.php/Home/Trends/index/cid/140.html" class="tub ">新闻资讯</a>
	  
	  
	  
	  <ul class="newmainsoutnew" style="position:absolute;"><li><a href="index.php/Home/trends/index/cid/460.html">行业资讯</a></li><li><a href="index.php/Home/trends/index/cid/459.html">公告&动态</a></li><li><a href="index.php/Home/trends/index/cid/192.html">热点新闻</a></li></ul>								
	  
	  
	  
	  
	  
	  </li><li style="position: relative;" class="navli " ><a href="index.php/Home/About/index/cid/314.html" class="tub ">关于我们</a>
	  
	  
	  
	  <ul class="newmainsoutnew" style="position:absolute;"><li><a href="index.php/Home/about/index/cid/318.html">公司简介</a></li><li><a href="index.php/Home/about/index/cid/317.html">文化理念</a></li><li><a href="index.php/Home/about/index/cid/315.html">大事记</a></li><li><a href="index.php/Home/about/index/cid/409.html">使命&目标</a></li></ul>								
	  
	  
	  
	  
	  
	  </li><li style="position: relative;" class="navli " ><a href="index.php/Home/Contact/index/cid/401.html" class="tub ">联系我们</a>
	  
	  
	  
	  								
	  
	  
	  
	  
	  
	  </li>			</ul>
		</div>
	</div>
</div>

<!-----------------------头部 结束---------------------->


<!-- 轮播 styles -->
  <style>
    html, body {
      position: relative;
    }
    body {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      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-pagination-bullet-active {
    opacity: 1;
    background: #3FDEC7;
}*/.swiper-pagination-bullet,.swiper-pagination-switch  {
    width: 42px;
    height: 5px;
    display: block;
    background-color: #323232;
    margin-left: 18px;
    display: inline-block;border-radius: 0px;
}.swiper-pagination-bullet-active,.swiper-visible-switch swiper-active-switch {
    opacity: 1;
    background: #3FDEC7;
    width: 42px;
    height: 5px;
    display: block;
    display: inline-block;border-radius: 0px;
}
.swiper-slide img{display:none;}

  </style>


<!-----banner 开始------>

<script src="/ie/idangerous.swiper.min.js"></script>

<img id="sdafasdfdsimgmmm" src="/upload/201801/1517284988.jpg" style="width: 100%; ">
 <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
     
	 
		<div class="swiper-slide" ><img src="/upload/201801/1517284988.jpg" style="width: 100%; "></div><div class="swiper-slide" ><img src="/upload/201801/1517285581.jpg" style="width: 100%; "></div><div class="swiper-slide" ><img src="/upload/201802/1519783174.jpg" style="width: 100%; "></div>	 
	 
     
    
    
     
   
    </div>
	<div class="pagination"></div>
    <!-- Add Arrows -->
    <div  style="    width: 1200px;
    height: 60px;
   
    position: absolute;
    top:79%;
    left: 50%;
    margin-left: -600px;
    overflow: hidden;
   
    z-index: 9;">
   <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    </div>
  </div>



<!-- Swiper JS
  <script src="/js/swiper.min.js"></script> -->
  

  <!-- Initialize Swiper -->
 
  <script>
 
$(document).ready(function(){
	
var mySwiper = new Swiper('.swiper-container',{
autoplay : 5000,//可选选项，自动滑动
loop : true,//可选选项，开启循环
calculateHeight : true,
pagination : '.pagination',
paginationClickable :true,roundLengths : true,slidesPerView : 1,autoResize : false,
})
$('#sdafasdfdsimgmmm').hide();
  $(".swiper-slide img").each(function(){
    $(this).show();
  });
});
	
	
  </script>

 <style type="text/css">
.pagination {
  position: absolute;
  z-index: 20;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #555;
  margin: 0 5px;
  opacity: 0.8;
  border: 1px solid #fff;
  cursor: pointer;width: 42px;
    height: 5px;
    display: block;
    background-color: #323232;
    margin-left: 18px;
    display: inline-block;border-radius: 0px;
}
.swiper-active-switch {
  background: #fff;opacity: 1;
    background: #3FDEC7;
    width: 42px;
    height: 5px;
    display: block;
    display: inline-block;border-radius: 0px;
}.bj>.in_news>.neih>.xinw>a>.meige>.ner>p{height:38px;}
/*利用:after伪元素*/  
.clearUl:after {  
content:"";
display: block;  
clear: both;  
}  





</style>
      <!--[if IE 9]>
        <style>.bj>.in_case>.jz>.tittle>.zuobian>.anniu>.shang,.bj>.in_case>.jz>.tittle>.zuobian>.anniu>.xia{display: table-cell;vertical-align: middle;text-align:center;}
		.bj > .in_service > .jz > .meig > ul{margin-left:65px;}
		.bj>.in_service>.jz>.meig>.you{float:left;margin-left:-30px;}
		</style>
      <![endif]-->

<!-----banner 结束------>
<!--------------------------------轮播下面的线 开始--------------------------------->
<div class="banner_xian"></div>
<!--------------------------------轮播下面的线 开始--------------------------------->



<div class="bj">
<!-----------------------服务范围 开始------------------------->




<div class="in_service">
	<div class="jz">
		<div class="tittle">
			<img src="/images/index_r17_c12.png"/>
			<div class="xian"></div>
		</div>
		<div class="meig clearUl">
			<div class="zuo" style="z-index: 9999;position: relative;cursor: pointer;"></div>
				<ul style="/*margin-left: -61px;*/overflow:hidden;">
				

				
				<div class="swiper-container2">
				
				
				  <div class="swiper-wrapper">
				  
				  
				<div class="swiper-slide" style="background: none;">
						<li style="
    background: #fff;text-align: left;
">
							<a href="index.php/Home/Newsshow/index/pagesss/1/cid/446/big/445.html">
								<div class="tp" style="background: url(/upload/201801/1517218887.jpg) no-repeat center;"></div>
								<div class="wz">
									<h4>网站建设</h4>
									<h5>Website construction</h5>
									<div class="xian"></div>
									<p>网站建设包括网站策划、网页设计、网站功能、网站优化技术、网站内容整理、网站推广、网站评估、网站运营、网站整体优化、网站改版等。网站建设的前期准备包括了前期网站定位、内容差异化、页面沟通等战略性
调研，这些确立后，再去注册域名、租用空间、网站风格设计、网站代码制作五个部分，这个过程需要网站策划人员、美术设计人员、WEB程序员共同完成。网站是企业展示自身形象、发布产品信息、联系网上客户的新平台、新天地，进而可以通过电子商务开拓新的市场，以极少的投入获得极大的收益和利润。</p>
								</div>
							</a>
						</li>
					</div><div class="swiper-slide" style="background: none;">
						<li style="
    background: #fff;text-align: left;
">
							<a href="index.php/Home/Newsshow/index/pagesss/1/cid/447/big/445.html">
								<div class="tp" style="background: url(/upload/201801/1517051116.jpg) no-repeat center;"></div>
								<div class="wz">
									<h4>网站托管</h4>
									<h5>BRAND DESIGN</h5>
									<div class="xian"></div>
									<p>网站托管，就是将企业网站技术操作部分全部委托给我们来完成。其中包括域名的注册、空间的租用、服务器系统的管理、信息的上传、主页的创意、网页的制作更新、Email系统的管理等。而网站的所有权和管理权归企业所有，企业只需要把自己的设想和要发布的信息及要达到的目的提供给网站托管的技术人员。剩下的一切工作则由他们来完成。</p>
								</div>
							</a>
						</li>
					</div><div class="swiper-slide" style="background: none;">
						<li style="
    background: #fff;text-align: left;
">
							<a href="index.php/Home/Newsshow/index/pagesss/1/cid/448/big/445.html">
								<div class="tp" style="background: url(/upload/201801/1517050951.jpg) no-repeat center;"></div>
								<div class="wz">
									<h4>网络营销</h4>
									<h5>INTEGRATION & PROMOTION</h5>
									<div class="xian"></div>
									<p>网络营销是企业整体营销战略的一个组成部分，是为实现企业总体经营目标所进行的，以互联网为基本手段营造网上经营环境的各种活动。笼统地说，网络营销就是以互联网为主要手段开展的营销活动。</p>
								</div>
							</a>
						</li>
					</div><div class="swiper-slide" style="background: none;">
						<li style="
    background: #fff;text-align: left;
">
							<a href="index.php/Home/Newsshow/index/pagesss/1/cid/449/big/445.html">
								<div class="tp" style="background: url(/upload/201801/1517218615.jpg) no-repeat center;"></div>
								<div class="wz">
									<h4>软件系统开发</h4>
									<h5>Software system development</h5>
									<div class="xian"></div>
									<p>软件定制开发就是根据企业的具体情况，具体要求，设计软件系统，提供相应的服务。我们提供各种行业软件的定制开发与实施，可满足各类客户在企业信息化管理中的实际需求。
</p>
								</div>
							</a>
						</li>
					</div><div class="swiper-slide" style="background: none;">
						<li style="
    background: #fff;text-align: left;
">
							<a href="http://www.resonance.net.cn/" target="_blank">
								<div class="tp" style="background: url(/upload/201801/1517051167.jpg) no-repeat center;"></div>
								<div class="wz">
									<h4>广告设计</h4>
									<h5>Advertising design</h5>
									<div class="xian"></div>
									<p>品牌策划<br />
品牌设计<br />
品牌推广<br />
... ...</p>
								</div>
							</a>
						</li>
					</div><div class="swiper-slide" style="background: none;">
						<li style="
    background: #fff;text-align: left;
">
							<a href="index.php/Home/Newsshow/index/pagesss/1/cid/450/big/445.html">
								<div class="tp" style="background: url(/upload/201801/1517051232.jpg) no-repeat center;"></div>
								<div class="wz">
									<h4>UI界面设计</h4>
									<h5>UI interface design</h5>
									<div class="xian"></div>
									<p>UI即User Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。</p>
								</div>
							</a>
						</li>
					</div>					
					
					
					
					
					
				  </div>
				  
				  
				  
				  
				</div>

				
				
				

					
					
					
					
				</ul>
			<div class="you" style="z-index: 9999;position: relative;cursor: pointer;"></div>
		</div>
	</div>
</div>
				
				
				
				
  <script>
  var mySwiper = new Swiper('.swiper-container2',{slidesPerView : 3,roundLengths : true,slidesPerViewFit : false,})
  $('.zuo').on('click', function(e){
    e.preventDefault()
    mySwiper.swipePrev()
  })
  $('.you').on('click', function(e){
    e.preventDefault()
    mySwiper.swipeNext()
  })
  </script>
				
				
				
<!-----------------------服务范围 结束------------------------->

<!-----------------------案例展示 开始------------------------->





<div class="in_case">

	<div class="jz">
		<div class="tittle">
			<div class="zuobian">
				<div class="anniu">
					<div class="shang" onclick="geannll('s',this);" style="
    position: absolute;
    left: 0px;
    top: -70px;
    z-index: 999;
    background: #fff;cursor: pointer;
"><img src="/images/index_r9_c5.png"/></div>
					<div class="xia" onclick="geannll('x',this);" style="
    position: absolute;
    left: 0px;
    top: 6px;cursor: pointer;
"><img src="/images/index_r13_c3.png"/></div>
				</div>
			</div>
			<div class="wz">
				<div class="tp"><img src="/images/index_r6_c14.png"/></div>
				<div class="xian"></div>
				<div class="biaoyu">
					<h4>为客户打造所在行业顶级品牌</h4>
					<p>For customers to cteate the dustry`s top brands</p>
				</div>
			</div>
		</div>
	<style>
		.bj>.in_case>.jz>.fenl>.first_column>.anli:hover{
			transform: scale(1.2, 1.2);
	
	transition-duration:0.7s;
		position:relative;
		z-index:999;
		}
		
		
		
		.bj>.in_case>.jz>.fenl>.first_column>.anli>a>.xiaog:hover{
		
	transform: scale(1, 1);
	
	
	transition-duration:0.7s;
		position:relative;
		z-index:999;}
		
		
		
		.bj>.in_case>.jz>.fenl>.first_two>.anli:hover{
			transform: scale(1.2, 1.2);
	transition-duration:0.7s;
		position:relative;
		z-index:999;
		}
		
		
		

		
		.bj>.in_case>.jz>.fenl>.first_two>.anli>a>.xiaog:hover{
		
		transform: scale(1, 1);
	
	
	transition-duration:0.7s;
		position:relative;
		z-index:999;}
		
		
				
		.bj>.in_case>.jz>.fenl>.first_two>.anli_z:hover{
		transform: scale(1.2, 1.2);
	
	transition-duration:0.7s;
		position:relative;
		z-index:999;
		}
		
		
		.bj>.in_case>.jz>.fenl>.first_two>.anli_z>a>.xiaog:hover{
		
		transform: scale(1, 1);
	
	
	transition-duration:0.7s;
		position:relative;
		z-index:999;}
		
		
		
		</style>
		<div class="fenl" id="aaalllajsjjs">
		
		
	
		
		
				<div class="first_column">			
				<div class="anli" style="background: url(/upload/201801/1517362139.jpg) no-repeat center;background-size: cover;">
					<a href="index.php/Home/Newsshow/index/cid/136/id/367/big/136.html">
						<div class="xiaog">
							<h3>新影响华文文化</h3>
							<p>- MORE -</p>
						</div>
					</a>
				</div>
				
				
				
								
				<div class="anli" style="background: url(/upload/201801/1517230762.jpg) no-repeat center;background-size: cover;">
					<a href="index.php/Home/Newsshow/index/cid/136/id/366/big/136.html">
						<div class="xiaog">
							<h3>火速贸易</h3>
							<p>- MORE -</p>
						</div>
					</a>
				</div>
				
				
				
								
				<div class="anli" style="background: url(/upload/201801/1517236380.jpg) no-repeat center;background-size: cover;">
					<a href="index.php/Home/Newsshow/index/cid/136/id/350/big/136.html">
						<div class="xiaog">
							<h3>保利原乡</h3>
							<p>- MORE -</p>
						</div>
					</a>
				</div>
				
				
				
					</div><div class="first_two">			
			
				<div class="anli" style="background: url(/upload/201801/1517232815.jpg) no-repeat center;background-size: cover;">
					<a href="index.php/Home/Newsshow/index/cid/136/id/348/big/136.html">
						<div class="xiaog">
							<h3>华鸿水务集团</h3>
							<p>- MORE -</p>
						</div>
					</a>
				</div>
			
		
					
			
				<div class="anli_z" style="background: url(/upload/201801/1517209219.png) no-repeat center;background-size: cover;">
					<a href="index.php/Home/Newsshow/index/cid/136/id/338/big/136.html">
						<div class="xiaog">
							<h3>佳年农业</h3>
							<p>- MORE -</p>
						</div>
					</a>
				</div>
			
		
					
			
				<div class="anli" style="background: url(/upload/201801/1517328439.jpg) no-repeat center;background-size: cover;">
					<a href="index.php/Home/Newsshow/index/cid/136/id/335/big/136.html">
						<div class="xiaog">
							<h3>明山泉</h3>
							<p>- MORE -</p>
						</div>
					</a>
				</div>
			
		
		</div>		
		

		
		
		
		
		
		</div>
		
	</div>
	
</div>
<!-----------------------案例展示 结束------------------------->
<img src="/images/5-121204193934.gif" style="display:none;" />
<script>
var nnnpppp=2;
function geannll(m,that){
	if(nnnpppp<1){
		nnnpppp=1;
		if(m=='x') nnnpppp=2;
	}
	var osrc=$(that).children().attr('src');
	$.ajax( {
		url: '/index.php/Home/Trendsajax/index/p/'+nnnpppp+'.html', //这里是静态页的地址
		type: "GET", //静态页用get方法，否则服务器会抛出405错误
		//dataType: "json",
		//cache: false,
		//async: false,
		beforeSend: function(){
		 // Handle the beforeSend event
		 $(that).children().attr('src','/images/5-121204193934.gif');
		},
		success: function(data){
			//alert(data.length);
			$(that).children().attr('src',osrc);
			if(!data){
				nnnpppp=1;
				geannll();
				//nnnpppp=1;
				return false;
			}
			if(m=='x') nnnpppp=nnnpppp+1;
			else nnnpppp=nnnpppp-1;
			$('#aaalllajsjjs').html(data);
			//var result = $(data).find("另一个html页面的指定的一部分").html();
		}
	});
}
</script>
<!-----------------------新闻资讯 开始------------------------->

<div class="in_news">
	<div class="neih">
	
		<div class="in_nav">
			<div class="tittle">
				<div class="tp"><img src="/images/index_r22_c14.png"/></div>
				<div class="xian"></div>
			</div>
			<div class="notice ju">
				<a href="javascript:;" onclick="gghhh('gggggggssss',this);" style="width: 222px;
    height: 109px;
    float: left;">
					<p>行业资讯</p>
					<span>Announcement & dynamic</span>
				</a>
			</div>
			<div class="notice">
				<a href="javascript:;" onclick="gghhh('gggggggsssszx',this);" style="width: 222px;
    height: 109px;
    float: left;">
					<p>公告&动态</p>
					<span>Industry information</span>
				</a>
			</div>
			<div class="biaoyu">
				<p>共振邀您，共振未来！</p>
				<span>Resonance invites you, resonance of the future</span>
			</div>
		</div>
		
		
		<div class="xinw" id="gghhhhxxoo">
		<a href="index.php/Home/Newsshow/index/cid/140/id/333/big/140.html">
				<div class="meige">
					<div class="rq">
						<h2>31</h2>
						<p>2018-01</p>
					</div>
					<div class="ner">
						<h3>素材网站一箩筐？其实有它就够了！</h3>
						<p>之前，设计神器小分队也给大家推荐过素材网站，比如：在线编辑功能的全面高颜值矢量素材库—— Vecteezy界面简单简洁的免费版权的图片资源网站—— Streetwill还有免费可商用图库—— Pixabay以及首页一片漆黑的EveryPixel（可商用、免费下载）但今天，木木给大家安利一个海纳百川的素材网站，它的可商用免费素材包括高清图片、矢量素材、字体、icon、视</p>
					</div>
					<div class="more"><img src="/images/index_r10_c13.jpg"/></div>
				</div>
			</a><a href="index.php/Home/Newsshow/index/cid/140/id/328/big/140.html">
				<div class="meige">
					<div class="rq">
						<h2>31</h2>
						<p>2018-01</p>
					</div>
					<div class="ner">
						<h3>网易高级设计师：如何通过刻意练习提升自己？</h3>
						<p>设计趋势这种东西，往根上说是潮流，是因缘际会之下成为一个时间段内的流行风潮，大多独特，但是它并不一定符合你的喜好。在过去的一个月当中，所流行起来的三个设计趋势，相互关联，且都涉及到文本和标题在页面设计中的运用。到底哪个更符合你的口味，而哪些又能够更常久地流行？这恐怕就需要你自己来判断了。1、带有下划线的文本和元素很意外地发现大家最近争先恐后地使用下划线这种元素。当然，能够在各式各样设计元素中灵活运</p>
					</div>
					<div class="more"><img src="/images/index_r10_c13.jpg"/></div>
				</div>
			</a><a href="index.php/Home/Newsshow/index/cid/140/id/310/big/140.html">
				<div class="meige">
					<div class="rq">
						<h2>31</h2>
						<p>2018-01</p>
					</div>
					<div class="ner">
						<h3>网易设计师：推荐大家学习的通感设计方法</h3>
						<p>网易UEDC – 悠悠 : 如何建立用户行为模型，通过数据验证设计效果？如何深度参与产品服务全流程？或许你可以尝试用一下「通感设计语言」。通感设计方法试图将产品质量与用户感知低损耗转移，增强体验的紧密的关联性与一致性。为数字产品创造有效设计语言的全新实用指南。本文章不是共享工具的介绍，也不是普通意义的通感设计手法，比如：Siri用波浪条纹设计让用户感受到声音。文中的通感设计是指：通过对用户服务场景</p>
					</div>
					<div class="more"><img src="/images/index_r10_c13.jpg"/></div>
				</div>
			</a>			
			
			
		</div>
		
		<div id="gggggggssss" style="display:none;"><a href="index.php/Home/Newsshow/index/cid/140/id/333/big/140.html">
				<div class="meige">
					<div class="rq">
						<h2>31</h2>
						<p>2018-01</p>
					</div>
					<div class="ner">
						<h3>素材网站一箩筐？其实有它就够了！</h3>
						<p>之前，设计神器小分队也给大家推荐过素材网站，比如：在线编辑功能的全面高颜值矢量素材库—— Vecteezy界面简单简洁的免费版权的图片资源网站—— Streetwill还有免费可商用图库—— Pixabay以及首页一片漆黑的EveryPixel（可商用、免费下载）但今天，木木给大家安利一个海纳百川的素材网站，它的可商用免费素材包括高清图片、矢量素材、字体、icon、视</p>
					</div>
					<div class="more"><img src="/images/index_r10_c13.jpg"/></div>
				</div>
			</a><a href="index.php/Home/Newsshow/index/cid/140/id/328/big/140.html">
				<div class="meige">
					<div class="rq">
						<h2>31</h2>
						<p>2018-01</p>
					</div>
					<div class="ner">
						<h3>网易高级设计师：如何通过刻意练习提升自己？</h3>
						<p>设计趋势这种东西，往根上说是潮流，是因缘际会之下成为一个时间段内的流行风潮，大多独特，但是它并不一定符合你的喜好。在过去的一个月当中，所流行起来的三个设计趋势，相互关联，且都涉及到文本和标题在页面设计中的运用。到底哪个更符合你的口味，而哪些又能够更常久地流行？这恐怕就需要你自己来判断了。1、带有下划线的文本和元素很意外地发现大家最近争先恐后地使用下划线这种元素。当然，能够在各式各样设计元素中灵活运</p>
					</div>
					<div class="more"><img src="/images/index_r10_c13.jpg"/></div>
				</div>
			</a><a href="index.php/Home/Newsshow/index/cid/140/id/310/big/140.html">
				<div class="meige">
					<div class="rq">
						<h2>31</h2>
						<p>2018-01</p>
					</div>
					<div class="ner">
						<h3>网易设计师：推荐大家学习的通感设计方法</h3>
						<p>网易UEDC – 悠悠 : 如何建立用户行为模型，通过数据验证设计效果？如何深度参与产品服务全流程？或许你可以尝试用一下「通感设计语言」。通感设计方法试图将产品质量与用户感知低损耗转移，增强体验的紧密的关联性与一致性。为数字产品创造有效设计语言的全新实用指南。本文章不是共享工具的介绍，也不是普通意义的通感设计手法，比如：Siri用波浪条纹设计让用户感受到声音。文中的通感设计是指：通过对用户服务场景</p>
					</div>
					<div class="more"><img src="/images/index_r10_c13.jpg"/></div>
				</div>
			</a></div>
		<div id="gggggggsssszx" style="display:none;"><a href="index.php/Home/Newsshow/index/cid/140/id/421/big/140.html">
				<div class="meige">
					<div class="rq">
						<h2>09</h2>
						<p>2018-02</p>
					</div>
					<div class="ner">
						<h3>2018年春节放假通知</h3>
						<p>2018年春节放假通知

     2018年春节将至，为使公司和员工共同度过一个欢乐、祥和、平安的新春佳节，切实做好假期期间的安全工作，现将有关事宜通知如下：</p>
					</div>
					<div class="more"><img src="/images/index_r10_c13.jpg"/></div>
				</div>
			</a><a href="index.php/Home/Newsshow/index/cid/140/id/432/big/140.html">
				<div class="meige">
					<div class="rq">
						<h2>09</h2>
						<p>2018-02</p>
					</div>
					<div class="ner">
						<h3>共振之桃花源记</h3>
						<p>九月，踏着初秋的凉爽，共振创意开始了一段欢声笑语的旅程，我们便怀揣着躁动的心，远离钢筋水泥的城市，来到世俗喧嚣的美丽南方。</p>
					</div>
					<div class="more"><img src="/images/index_r10_c13.jpg"/></div>
				</div>
			</a></div>
		
		
		
		
	</div>
</div>

<!-----------------------新闻资讯 结束------------------------->
<script>
function gghhh(d,that){
	  $(".in_news .notice").each(function(){
		$(this).removeClass('ju');
	  });
	  $(that).parent('.notice').addClass('ju');
	$('#gghhhhxxoo').html($('#'+d).html());
}
</script>
<!-------------------关于我们 开始------------------------>

<div class="in_about">
	<a href="index.php/Home/About/index/cid/314.html">
	<div class="tp" style="background: url(/upload/file/1515731676.jpg) no-repeat right;">
	</div>
	<div class="you">
		<div class="jies">
			<div class="biaot"><img src="/images/index_r4_c2.png"/></div>
			<div class="xian"></div>
			<p>一家以“品牌咨询+品牌设计+品牌策划+品牌落地”于一体的品牌服务平台，通过360°全景式纵深品牌打造，从品牌标识设计、VI设计、空间设计、包装、海报等多维度构建完善的品牌价值链，致力于以实战服务中国企业，以品牌推动中国成长。</p>
		</div>
	</div>
	</a>
</div>


<!-------------------关于我们 结束------------------------>







<style>
						.ullllls  li a{font-family: "微软雅黑";
    color: #A3A3A3;
    font-size: 14px;
    padding-top: 15px;
    padding-left: 28px;}.ullllls li{float: left;
    width: 120px;}
				</style>
<!----------------------------------底部 开始-------------------------------->
	<div class="bottom">
		<div class="jz">
			<div class="bo_about">
				<h4><a href="index.php/Home/About/index/cid/314.html">关于我们</a></h4>
				<p><a href="index.php/Home/About/index/cid/318.html">公司简介</a></p><p><a href="index.php/Home/About/index/cid/317.html">文化理念</a></p><p><a href="index.php/Home/About/index/cid/315.html">大事记</a></p><p><a href="index.php/Home/About/index/cid/409.html">使命&目标</a></p> 
			</div>
			<div class="bo_about">
				<h4><a href="index.php/Home/Service/index/cid/445.html">服务范围</a></h4>
				<p><a href="index.php/Home/Newsshow/index/pagesss/1/cid/446/big/445.html">网站建设</a></p><p><a href="index.php/Home/Newsshow/index/pagesss/1/cid/447/big/445.html">网站托管</a></p><p><a href="index.php/Home/Newsshow/index/pagesss/1/cid/448/big/445.html">网络营销</a></p><p><a href="index.php/Home/Newsshow/index/pagesss/1/cid/449/big/445.html">软件系统开发</a></p><p><a href="index.php/Home/Newsshow/index/pagesss/1/cid/451/big/445.html">广告设计</a></p><p><a href="index.php/Home/Newsshow/index/pagesss/1/cid/450/big/445.html">UI界面设计</a></p><p><a href="index.php/Home/Newsshow/index/pagesss/1/cid/456/big/445.html">服务流程</a></p><p><a href="index.php/Home/Newsshow/index/pagesss/1/cid/457/big/445.html">服务优势</a></p><p><a href="index.php/Home/Newsshow/index/pagesss/1/cid/458/big/445.html">售后服务</a></p> 
			</div>
			<div class="bo_link">
				<h4><a href="javascript:;">友情链接</a></h4>
				<ul class="ullllls">
				
				
					<li><a href="http://www.znbo.com/" target="_blank">广州网站建设</a></li><li><a href="http://www.zhuojie.cc/" target="_blank">网站建设</a></li><li><a href="http://www.resonance.com.cn/" target="_blank">南宁网站建设</a></li><li><a href="http://www.fractal-technology.com/index.html" target="_blank">北京网站建设</a></li><li><a href="http://www.gz898.com/" target="_blank">广州做网站</a></li><li><a href="http://www.resonance.com.cn/" target="_blank">南宁网络公司</a></li><li><a href="http://www.resonance.com.cn/" target="_blank">南宁网页设计</a></li><li><a href="http://www.cneecn.com/" target="_blank">南京网站建设</a></li><li><a href="http://www.resonance.com.cn/" target="_blank">南宁网站开发</a></li><li><a href="http://www.resonance.net.cn/" target="_blank">南宁画册设计</a></li><li><a href="http://www.resonance.net.cn/" target="_blank">南宁VI设计</a></li><li><a href="http://www.resonance.net.cn/" target="_blank">南宁平面设计</a></li><li><a href="http://www.resonance.net.cn/" target="_blank">南宁广告公司</a></li><li><a href="http://api.resonance.com.cn/" target="_blank">在线桌面版API</a></li><li><a href="http://www.resonance.com.cn/" target="_blank">重权1，PR2，其他正常就肯定换</a></li> 
				</ul>
				
				
			</div>
			
			<div class="lianxi">
				<div class="dianhau"><img src="/upload/file/1515655599.png"/></div>
				<div class="erwm"><img src="/upload/file/1516790675.jpg"/></div>
				<p>微信公众号</p>
			</div>
		</div>
		
		<div class="bottom_b">
			<div class="jz">
				<p class="zuo">© Copyright 2011-2017 广西共振广告. ALL Rights Reserved.</p>
				<p class="you">地址：广西南宁市青秀区中山路66号金外滩商务大厦13楼1301室</p>
			</div>
		</div>
	</div>
<!----------------------------------底部 结束-------------------------------->

</div>








<script>  /*异步加载 - 在线交流 - 站长统计 */
  var gz_weburl='/';
  var lang='cn';
  var classnow='';
  var id='';
  
  var url=gz_weburl+'include/interface/uidata.php?lang='+lang,h = 'http://www.resonance.com.cn/';
  
  if(h.indexOf("preview=1")!=-1)url = url + '&theme_preview=1';
  $.ajax({
    type: "POST",
    url: url,
    dataType:"json",
    success: function(msg){
      var c = msg.config;
      
      if(c.gz_stat==1){       //站长统计
        var navurl=classnow==10001?'':'../';
        var stat_d=classnow+'-'+id+'-'+lang;
        var url = gz_weburl+'include/stat/stat.php?type=para&u='+navurl+'&d='+stat_d;
        $.getScript(url);
      }
    }
  });
    //var metClicks = $(".metClicks");//点击次数
    var ClicksListnow='';
    var weburl='/';
    if(ClicksListnow){
      //var DataClicks = metClicks.data("metclicks");
      //ClicksStr=DataClicks.split("|"); 
      var ClicksModule = 'news';//ClicksStr[0],ClicksListnow = ClicksStr[1];
      var urlw = weburl+'include/hits.php?type='+ClicksModule+'&id='+ClicksListnow;
      $.ajax({
        type: "POST",
        url: urlw,
        dataType:"text",
        success: function(msg){
          //var t = msg.split('"');
          //metClicks.html(t[1]);
        }
      });
    }
</script>


<!--客服开始-->
<style type="text/css">

a,img{border:0;text-decoration:none;}

.cndns-right p{margin:0px;padding:0px;line-height:20px;}
.cndns-right i{margin:0px;padding:0px;font-style:normal;}
.cndns-right ul{margin:0px;padding:0px;list-style:none;}
.cndns-right ul li{margin:0px;padding:0px;list-style:none;}
.cndns-right a{color:#333333;text-decoration:none;}
.cndns-right .cndns-right-btn:hover{    color: #ff5a00;
    text-decoration: none;
    width: auto;
    height: 48px;
    border: 1px solid #ddd;
    text-align: center;
    display: block;
    margin-bottom: 6px;
    position: relative;
    background-color: #fff;}
.cndns-right .clear{clear:both;font-size:0px;line-height:0;height:0;}

@font-face {
	font-family: 'icomoon';
    src:url('/font/icomoon.eot?qradjf');
    src:url('/font/icomoon.eot?qradjf#iefix') format('embedded-opentype'),
        url('/font/icomoon.ttf?qradjf') format('truetype'),
        url('/font/icomoon.woff?qradjf') format('woff'),
        url('/font/icomoon.svg?qradjf#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.demo-icon{
  font-family:"icomoon";
  font-style:normal;
  font-weight:normal;
  speak:none;
  display:inline-block;
  text-decoration:inherit;
  text-align:center;
  font-variant:normal;
  text-transform:none;
  font-size:24px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:24px;
  color:#999; 
}

/*new right*/
.cndns-right{position:fixed;right:1px;top:50%;margin-top:-100px;z-index:100}
.cndns-right-meau{position:relative;}
.cndns-right-btn{width:48px;height:48px;border:1px solid #ddd;text-align:center;display:block;margin-bottom:6px;position:relative;background-color:#fff}
.cndns-right-btn span{color:#848484;font-size:26px;line-height:48px;}
.cndns-right-btn sup{display:block;min-width:24px;height:24px;text-align:center;line-height:24px;color:#fff;border-radius: 50%;background-color:#24D3B6;position:absolute;left:-12px;top:-12px;}
.cndns-right-btn p{color:#24D3B6;font-size:14px;line-height:18px;padding-top:5px;display:none;}
.cndns-right-meau:hover .cndns-right-btn span{display:none}
.cndns-right-meau:hover .cndns-right-btn p{display:block;}
.meau-car .cndns-right-btn {border-color:#24D3B6;margin-bottom:20px;}
.meau-car.cndns-right-meau:hover .cndns-right-btn{background-color:#24D3B6}
.meau-car.cndns-right-meau:hover .cndns-right-btn span{color:#fff;display:block;}
.meau-car .cndns-right-btn span{color:#24D3B6;}
.meau-sev .cndns-right-btn{border-color:#ff6600;background:url(/images/02index-banner-8.gif) no-repeat #ff6600 center;} 
.meau-sev .cndns-right-btn p{color:#fff}
.meau-sev .cndns-right-btn span{color:#fff}
.meau-top .cndns-right-btn span{font-size:12px;line-height:12px;padding-top:10px;display:block}
.meau-top .cndns-right-btn i{display:block;color:#999}
.meau-top.cndns-right-meau:hover .cndns-right-btn{background-color:#24D3B6}
.meau-top.cndns-right-meau:hover .cndns-right-btn span{display:block;color:#fff} 
.meau-top.cndns-right-meau:hover .cndns-right-btn i{color:#fff;}
.cndns-right-box{position:absolute;top:-15px;right:48px;padding-right:25px;display:none;}
.cndns-right-box .box-border{border:1px solid #ccc;border-top:4px solid #24D3B6;padding:20px;background-color:#fff;-webkit-box-shadow: 0 3px 8px rgba(0,0,0,.15);-moz-box-shadow: 0 3px 8px rgba(0,0,0,.15);box-shadow: 0 3px 8px rgba(0,0,0,.15);position:relative}
.cndns-right-box .box-border .arrow-right{display:block;width:13px;height:16px;background:url(/images/arrow.png?1) no-repeat;position:absolute;right:-13px;top:26px;}
.cndns-right-box .box-border .sev-t span{font-size:42px;float:left;display:block;line-height:56px;margin-right:20px;color:#d3d3d3}
.cndns-right-box .box-border .sev-t p{float:left;color:#24D3B6;font-size:24px;line-height:28px;}
.cndns-right-box .box-border .sev-t p i{display:block;font-size:14px;color:#aaa;}
.cndns-right-box .box-border .sev-b{padding-top:15px;margin-top:15px;border-top:1px solid #e4e4e4}
.cndns-right-box .box-border .sev-b h4{color:#666;font-size:14px;font-weight:normal;padding-bottom:15px;}
.cndns-right-box .box-border .sev-b li{float:left;width:33.33333%}
.cndns-right-box .box-border .sev-b li a{display:inline-block;color:#999;font-size:13px;padding-left:43px;background:url(/images/q1.gif) no-repeat left 3px;line-height:36px;}
.cndns-right-box .box-border .sev-b li a:hover{color:#24D3B6}
.meau-sev .cndns-right-box .box-border{width:430px;}
.meau-contact .cndns-right-box .box-border{width:230px;}
.cndns-right-meau:hover .cndns-right-box{display:block}
.meau-code .cndns-right-box{top:inherit;bottom:-35px;}
.meau-code .cndns-right-box .box-border{width:156px;text-align:center;border-top:1px solid #ccc;}
.meau-code .cndns-right-box .box-border i{display:block;color:#24D3B6;font-size:16px;line-height:16px;}
.meau-code .cndns-right-box .box-border .arrow-right{top:inherit;bottom:50px;}
.meau-sev .cndns-right-btn .demo-icon{display:none;}
.meau-sev:hover .cndns-right-btn{background:#24D3B6}
.meau-zs .cndns-right-btn{background-color:#24D3B6;color:#fff;margin-top:80px;border-color:#24D3B6}
.meau-zs .cndns-right-btn span{color:#fff}
.meau-zs .cndns-right-btn p{color:#fff}
</style>


<!--右侧-->
<div class="cndns-right">
   
    <div class="cndns-right-meau meau-sev">
        <a href="javascript:" class="cndns-right-btn">
            <span class="demo-icon">&#xe901;</span>
            <p>
                在线<br />
                客服
            </p>
        </a>
        <div class="cndns-right-box">
            <div class="box-border">
                <div class="sev-t">
                    <span class="demo-icon">&#xe901;</span>
                    <p>在线客服<i>咨询时间：9:00--18:00</i></p>
                    <div class="clear"></div>
                </div>
                <div class="sev-b">
                    <h4>选择下列客服马上在线沟通：</h4>
                    <ul id="zixunUl">
					 <li><a href="http://wpa.qq.com/msgrd?v=3&uin=1226850955&site=http://www.resonance.com.cn/&menu=yes" target="_blank">售前咨询</a></li>
				    <li><a href="http://wpa.qq.com/msgrd?v=3&uin=1226850955&site=http://www.resonance.com.cn/&menu=yes" target="_blank">售后咨询</a></li>
					<!--
                        <li><a href="javascript:void(0);">域名/主机</a></li>
                        
                        <li><a href="javascript:void(0);">建站/网店</a></li>
                        <li><a href="javascript:void(0);">企业邮局</a></li>
                        <li><a href="javascript:void(0);">代理咨询</a></li>
                        <li><a href="javascript:void(0);">网站推广</a></li>
                        <li><a href="javascript:void(0);">橙云主机</a></li>
                        
                        <li><a href="javascript:void(0);">域名交易</a></li>
                        
                        <li><a href="javascript:void(0);">租用托管(BGP)</a></li>
                        
                        <li><a href="javascript:void(0);">其他产品</a></li>
						-->
                        <div class="clear"></div>
                    </ul>
                </div>
                <span class="arrow-right"></span>
            </div>
        </div>
    </div>
    <div class="cndns-right-meau meau-contact">
        <a href="javascript:" class="cndns-right-btn">
            <span class="demo-icon">&#xe902;</span>
            <p>
                客服<br />
                热线
            </p>
        </a>
        <div class="cndns-right-box">
            <div class="box-border">
                <div class="sev-t">
                    <span class="demo-icon">&#xe902;</span>
                    <p>0771-5508889<br /><i>客服服务热线</i></p>
                    <div class="clear"></div>
                </div>
                <span class="arrow-right"></span>
            </div>
        </div>
    </div>
    <div class="cndns-right-meau meau-code">
        <a href="javascript:" class="cndns-right-btn">
            <span class="demo-icon">&#xe903;</span>
            <p>
                关注<br />
                微信
            </p>
        </a>
        <div class="cndns-right-box">
            <div class="box-border">
                <div class="sev-t">
                    <img src="/upload/file/1516790675.jpg"  width="100" height="100"/>
                    <i>关注官方微信</i>
                </div>
                <span class="arrow-right"></span>
            </div>
        </div>
    </div>
    <div class="cndns-right-meau meau-top" id="top-back">
        <a href="javascript:" class="cndns-right-btn" onclick="topBack()">
            <span class="demo-icon">&#xe904;</span>
            <i>顶部</i>
        </a>
    </div>

</div>


<script type="text/javascript">
//置顶图标显示
$('#top-back').hide()
$(window).scroll(function(){
	 if($(this).scrollTop() > 350){
		$("#top-back").fadeIn();
	 }
	 else{
		$("#top-back").fadeOut();
	 }
  })	
//置顶事件
function topBack(){
  $('body,html').animate({scrollTop:0},300);
}
</script>


<!--客服结束-->


<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F4834ed1abfc1464ccbb994d777a5b3db' type='text/javascript'%3E%3C/script%3E"));
</script>





</body>
</html>

Run code

Cut to clipboard

reply | quote | #¹

广西河池市金城江区 2018-04-23, 16:49:22

Swiper的初始化与更新
用js监视用户浏览器的大小变动
js 页面宽度 js 监听页面宽度变化 js 监听页面宽度变化 js监控页面变化
js获取浏览器和设备相关width（屏幕的宽度）

	
<!-----banner 开始------>


 <style>

.device {width:100%;height: 100%;background: #111; position: relative;}
	 /*------------------左右按钮-----------------*/
/*.device .arrow-left {background: url(img/arrows.png) no-repeat left top;position: absolute;left: 10px;top: 50%;margin-top: -15px;width: 17px; height: 30px;}
.device .arrow-right {background: url(img/arrows.png) no-repeat left bottom; position: absolute; right: 10px; top: 50%; margin-top: -15px; width: 17px; height: 30px;}*/
.swiper-container {width:100%;height:100%;}
.content-slide {padding: 20px;color: #fff;}
.title {font-size: 25px;margin-bottom: 10px;}
.pagination {position: absolute;z-index: 20;bottom:17px;width: 100%;text-align: center;}
.swiper-pagination-switch {display: inline-block;width:8px;height: 8px; border-radius: 8px;background-color:#ffd17d;margin: 0 5px;opacity: 0.8;cursor: pointer;display: block;margin-left: 18px;display: inline-block;border-radius:25px;-moz-border-radius:25px;}
.swiper-active-switch {background:transparent;border: 1px solid #ffd17d;opacity: 1;width:10px;height:10px;display: block;display: inline-block;border-radius:25px;-moz-border-radius:25px;margin-bottom:-1px;}
.bj>.in_news>.neih>.xinw>a>.meige>.ner>p{height:38px;}




  </style>

<div class="device">
    <a class="arrow-left" href="javascript:;"></a> 
    <a class="arrow-right" href="javascript:;"></a>
    <div class="swiper-container">
     
      <div class="swiper-wrapper">
	  
	  <foreach name="blist" item="r" key="k" >
	  <div class="swiper-slide"><div class="jqthumb" style="width: 100%px; height: 600px; opacity: 1;"><div style="width: 100%; height: 100%; background-image: url({$r.img_path}); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;"></div></div></div>
	  
	  </foreach>
	  
	  
	  <!--
        <div class="swiper-slide"><div class="jqthumb" style="width: 100%px; height: 600px; opacity: 1;"><div style="width: 100%; height: 100%; background-image: url(images/index_19.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;"></div></div></div>
        <div class="swiper-slide"><div class="jqthumb" style="width: 100%px; height: 600px; opacity: 1;"><div style="width: 100%; height: 100%; background-image: url(images/index_19.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;"></div></div> </div>
		-->
		
		
		
		
	  </div>
   
    </div>
    
    <div class="pagination"></div>
</div>


<script src="js/idangerous.swiper.min.js"></script>
  <script>
  var mySwiperhtml;
  $(document).ready(function(){
  if(!mySwiperhtml) mySwiperhtml=$('.swiper-container').html();
newssspptttt();
var nwesswidttth=document.body.clientWidth;


window.onresize = function(){
   if(nwesswidttth!=document.body.clientWidth){
	   if(mySwiper) $('.swiper-container').html(mySwiperhtml);
		newssspptttt();
   }
 
}


});
var mySwiper;

  function newssspptttt(){
		/*if(mySwiper){
			//mySwiper.removeAllSlides();
			$('.swiper-container').html(mySwiperhtml);
			mySwiper.appendSlide(mySwiperhtml);
			mySwiper.startAutoplay();
		}*/
		mySwiper = new Swiper('.swiper-container',{
		autoplay : 5000,//可选选项，自动滑动
		loop : true,//可选选项，开启循环
		calculateHeight : true,
		pagination : '.pagination',
		paginationClickable :true,
		roundLengths : true,slidesPerView : 1,autoResize : false,
		});
		
	$('#sdafasdfdsimgmmm').hide();
    $(".swiper-slide img").each(function(){
    $(this).show();
  });}
</script>
	
<!-----banner 结束------>

Run code

Cut to clipboard

if(isNew){  
  $('#newstop-wrapper').append(html);  
  topSwiper = new Swiper('#newstop', {  
    pagination : '.swiper-pagination',  
    loop : true,  
    autoplay : 5000,  
    preventClicks : false,  
    preventLinksPropagation : true,  
    width : window.innerWidth,  
    autoplayDisableOnInteraction : false,  
    observer : true  
  });  
} else {  
  topSwiper.stopAutoplay();  
  topSwiper.removeAllSlides();  
  if($.trim(html) != ""){  
    topSwiper.appendSlide(html);  
    topSwiper.startAutoplay();  
  }  
}

Run code

Cut to clipboard

reply | quote | #²

广西河池市 2018-05-07, 18:04:32

Swiper有边框
图片有边框幻灯片下边有边框有背景色盒子高度比图片高 7个像素 7px 底部距离

img{display:block;}

Run code

Cut to clipboard

#,广西河池市,2018-05-28,00:51:33, Swiper2说明文档

#,广西河池市,2018-05-28,12:08:32,
roundLengths
值为true时，Swiper会四舍五入宽度和高度
类型：boolean默认：false举例： true

<script> 
var mySwiper = new Swiper('.swiper-container',{
roundLengths : true,
})
</script>

Run code

Cut to clipboard

当滑动组有边框线，宽度不够超出或者

#,广西河池市,2018-05-28,16:07:49,

			<script> 
				var mySwiper = new Swiper('.swiper-containtt',{
				slidesPerView : 3,
				slidesPerGroup : 3,
				pagination : '.haohhccttt',loop : true,loopedSlides :3,
				/*paginationVisibleClass : 'pa_esch',
				paginationActiveClass : 'pa_eschpa_dq',*/
				paginationClickable :true,//createPagination :false,
				})
				
				
			</script>

Run code

Cut to clipboard

#,广西河池市,2018-05-28,16:26:36, 禁止拖动

onlyExternal : true,

Run code

Cut to clipboard

使该slide无法拖动 swiper禁止手动滑动 swiper-no-swiping swiper禁止鼠标拖动
swiper 中禁止鼠标拖动切换图片
noSwiping

    <script>
    var swiper = new Swiper('.swiper-container', {
		loop : true,
        pagination: '.swiper-pagination',
        paginationClickable: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30,
		onSlideChangeStart: function(swiper){
      //alert(swiper.activeIndex);
	  //console.log(swiper.activeIndex);
			var newwwssnummall=parseInt('3');
			//$('#Namb_onnewwwssnummall').text('0'+newwwssnummall);
			var newwwssnumm=swiper.activeIndex;
			if(newwwssnumm<1 || !newwwssnumm){
				newwwssnumm='03';
			}else{
				if(newwwssnumm>newwwssnummall) newwwssnumm='01';//+newwwssnummall;
				else if(newwwssnumm<10) newwwssnumm='0'+newwwssnumm;
			}
			$('#Namb_on').text(newwwssnumm);
    }
    });
    </script>

Run code

Cut to clipboard

reply | quote | #³

Records:3 1/1 «‹1 ›»

lizhenqiu blog

swiper2兼容ie幻灯片插件

相关日志

有过 3 条评论 »

留下評論