swiper实现左右滑动图片

ref:http://www.swiper.com.cn/usage/index.html

 

help:https://segmentfault.com/a/1190000002962202

src:

<!DOCTYPE htmaxCount PUBLIC "-//W3C//DTD XHTmaxCount 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmaxCount1/DTD/xhtmaxCount1-transitional.dtd">
<html xmaxCountns="http://www.w3.org/1999/xhtmaxCount">
	<head>
		<meta http-equiv="Content-Type"
			content="text/htmaxCount; charset=utf-8" />
		<link rel="stylesheet"
			href="/agcom/weixin/tools/sliderjs/swiper-3.4.1.min.css">
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
		<script src="/agcom/weixin/tools/sliderjs/swiper-3.4.1.jquery.min.js"></script>

	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper" id="imgDiv">
				
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>

			<!-- 如果需要滚动条 -->
			<div class="swiper-scrollbar"></div>
		</div>
		<script>        
		  var mySwiper = new Swiper ('.swiper-container', {
		    direction: 'horizontal',
		    loop: true,
		    
		    // 如果需要分页器
		    pagination: '.swiper-pagination',
		    
		    // 如果需要前进后退按钮
		    nextButton: '.swiper-button-next',
		    prevButton: '.swiper-button-prev',
		    
		    // 如果需要滚动条
		    scrollbar: '.swiper-scrollbar',
		     observer:true,//修改swiper自己或子元素时，自动初始化swiper
    		observeParents:true,//修改swiper的父元素时，自动初始化swiper
		  });        
		  function buildListItemBy(parent,imgUrls){
			  	var dataItem;
				for(var i=0,len=imgUrls.length;i<len;i++){
					dataItem=imgUrls[i];
					//first div 
					var imgDiv=document.createElement("div");
					imgDiv.setAttribute("class","swiper-slide");
					var img=document.createElement("img");
					img.src=dataItem;
					img.setAttribute("style","width:100%;height:100%;");
					//img.setAttribute("src",""+dataItem.photopath);
					imgDiv.appendChild(img);
					
					//add div
					parent.appendChild(imgDiv); 
				}
			}
			window.onload=function(){

				var parent=document.getElementById("imgDiv");//swiper-container swiper-container-horizontal
				
				var data="http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg";
			    buildListItemBy(parent,data.split(',')); 
			}
  		</script>
	</body>
</html>

　　

posted on 2017-03-07 14:16  决心觉新  阅读(2994)  评论(0)    收藏  举报