实践的活动

5 years ago · 13aac3169e
parent 98c8527290
commit 13aac3169e
8 changed files with 163 additions and 1 deletions
--- a/application/index/view/index/practice.html
+++ b/application/index/view/index/practice.html
@ -8,11 +8,38 @@
    <script src="/axios.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/index.css?640523">
+    <script src="__IMG__/lunbo/js.js" type="text/javascript" charset="utf-8"></script>
+    <link rel="stylesheet" type="text/css" href="__IMG__/lunbo/css.css"/>
+
 </head>
 <body><div id="app" :class="bodyOver?'van-over':''" >
    <div class="toptitle">社会实践教育活动</div>

-<img src="__IMG__/jimg1.png" style="width:100%;display: block" />
+<!--<img src="__IMG__/jimg1.png" style="width:100%;display: block" />-->
+    <!--轮播图开始-->
+    <div id="boxhdp">
+        <ul id="img">
+            <li class="current"><img src="__IMG__/lunbo/t1.png"></li>
+            <li><img src="__IMG__/lunbo/t2.png"></li>
+            <li><img src="__IMG__/lunbo/t3.png"></li>
+            <li><img src="__IMG__/lunbo/t4.png"></li>
+            <li><img src="__IMG__/lunbo/t5.png"></li>
+        </ul>
+        <ul id="li">
+            <li class="on"></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+        </ul>
+        <div style="clear: both;"></div>
+        <div class="an" id="an">
+            <a href="javascript:;" id="prev"><</a>
+            <a href="javascript:;" id="next" class="an-a2">></a>
+        </div>
+    </div>
+
+    <!--轮播图-->
 <div class="bottomDiv" style="padding-top: 20px;">
    <div class="beforeCon">
        <div class="title"><img src="__IMG__/icon2.png" />前言<img src="__IMG__/icon1.png" /></div>
@ -147,6 +174,17 @@

 </div></body>
 <script>
+    hdp({
+        li:"li",	//默认值：li;默认用li包裹
+        boxid:"boxhdp",	//最外面div  id
+        imgid:"img",	//图片外面id
+        optid:"li",	//opt外面id
+        an:"an",		//左右按钮id，用于移上显示和隐藏
+        prev:"prev",	//左边箭头id
+        next:"next",	//右边箭头id
+        ms:3000		//多少毫秒切换一张,默认800毫秒
+    })
+
    new Vue({
        el: '#app',
        data: {
--- a/public/images/lunbo/css.css
+++ b/public/images/lunbo/css.css
@ -0,0 +1,37 @@
+*{margin: 0; padding: 0;}
+body{
+	font-family: "microsoft yahei";
+	font-size: 14px;
+	background-color: #1F1F1F;
+}
+li{list-style: none;}
+a{ text-decoration: none;}
+img{ width: 100%;}
+#boxhdp{ width: 600px; height: 300px;margin: 0 auto; margin-top: 30px; overflow: hidden; position: relative;}
+#img>li{ width: 100%; height: 100%; float: left; text-align: center; display: none;}
+#img>.current{display: block;}
+#li{position: absolute;
+    left: 50%;
+    bottom: 15px;
+    margin-left: -35px;}
+#li>li{ width: 10px;height: 10px; background-color: #ccc; border-radius: 50%; margin-right: 5px; float: left; cursor: pointer;}
+#li>.on{ background-color: #f50;}
+#an{ display: none;}
+#an a{
+	position: absolute;
+	top: 50%;
+	margin-top: -20px;
+	width: 40px;
+	height: 40px;
+	background-color: rgba(0,0,0,.3);
+	text-align: center;
+	line-height: 40px;
+	color: #fff;
+	font-family: "宋体";
+	font-weight: 600;
+	font-size: 1.2em;
+}
+#an a:hover{
+	background-color: rgba(0,0,0,.8);
+}
+#an .an-a2{ right: 0;}
--- a/public/images/lunbo/js.js
+++ b/public/images/lunbo/js.js
@ -0,0 +1,87 @@
+//获取id，tagName
+function getIdName(id,tagName){
+	
+	if(tagName!=0){
+		return document.getElementById(id).getElementsByTagName(tagName);
+	}else{
+		return document.getElementById(id);
+	}
+}
+function hdp(json){
+	var tiemr=null;
+	var pd=0;
+	var index=0;
+	var that;
+	var option={
+		li:"li",	//默认值：默认用li包裹
+		boxid:"",	//最外面div  id
+		imgid:"",	//图片外面id
+		optid:"",	//opt外面id	
+		an:"",		//左右按钮id，用于移上显示和隐藏
+		prev:"",	//左边箭头id
+		next:"",	//右边箭头id
+		ms:800		//多少毫秒切换一张,默认800毫秒
+	}
+	for(var i in option){
+		if(json[i]!=undefined){
+			option[i]=json[i];
+		}
+	}
+	
+	var div=getIdName(option.boxid,0);
+	var imgs=getIdName(option.imgid,option.li);
+	var lis=getIdName(option.optid,option.li);
+	var an=getIdName(option.an,0);
+	var prev=getIdName(option.prev,0);
+	var next=getIdName(option.next,0);
+	var ms=option.ms;
+	
+	function lbt(that){
+		if(that>=0){
+			index=that;
+		}else{
+			if(pd==0){
+				index++;
+			}else{
+				index--;
+				pd=0;
+			}
+		}
+		if(index>=lis.length) index=0;
+		if(index<0) index=lis.length-1;
+		for(var j=0;j<lis.length;j++){
+			lis[j].className="";
+			imgs[j].className="";
+		}
+		lis[index].className="on";
+		imgs[index].className="current";
+	}
+	imgs[index].className="current";
+	lis[index].className="on";
+	for(var i=0;i<lis.length;i++){
+		lis[i].index=i;
+		lis[i].onclick=function(){
+			that=this.index;
+			lbt(that);
+		}
+	}
+	timer=setInterval(lbt,ms);
+	
+	
+	div.onmouseover=function(){
+		clearInterval(timer);
+		an.style.display="block";
+	}
+	div.onmouseout=function(){
+		timer=setInterval(lbt,ms);
+		an.style.display="none";
+	}
+	prev.onclick=function(){
+		pd=1;
+		lbt();
+	}
+	next.onclick=function(){
+		pd=0;
+		lbt();
+	}
+}
--- a/public/images/lunbo/t1.png
+++ b/public/images/lunbo/t1.png
--- a/public/images/lunbo/t2.png
+++ b/public/images/lunbo/t2.png
--- a/public/images/lunbo/t3.png
+++ b/public/images/lunbo/t3.png
--- a/public/images/lunbo/t4.png
+++ b/public/images/lunbo/t4.png
--- a/public/images/lunbo/t5.png
+++ b/public/images/lunbo/t5.png