css：
#guide_page {
/*display: none;*/
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: auto;
}
#guide_page .bg {
position: fixed;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 100;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
#close_btn{
position:absolute;
top:74px;
right:80px;
z-index:101;
font-size: 24px;
color: #FFFFFF;
text-align: center;
cursor:pointer;
}
#guide_page .lunBo {
margin: 0 auto;
position: relative;
width: 980px;
z-index: 101;
overflow: auto;
}
#guide_page .lunBo .con{
width: 980px;
height: 780px;
overflow: hidden;
}
#guide_page .lunBo .con li {
float:left;
width: 980px;
height: 780px;
display:none;
}
#guide_page .lunBo .con li .top {
position: absolute;
left: 145px;
top: 0;
}
#guide_page .lunBo .con li .top img{
width:700px;
}
#guide_page .lunBo .con li .center {
width: 500px;
margin: 240px auto 0;
text-align: center;
}
#guide_page .lunBo .con li .center .tit {
font-family: PingFangSC-Medium;
font-size: 36px;
color: #FFFFFF;
line-height:70px;
}
#guide_page .lunBo .con li .center .des {
font-family: PingFangSC-Medium;
font-size: 14px;
color: #FFFFFF;
line-height: 20px;
}
#guide_page .lunBo .con li .pic{
width:725px;height:408px;
margin:30px auto 10px;
}
#guide_page .lunBo .con li .pic img {
width:725px;height:408px;
box-shadow: 0 0 12px 4px rgba(101, 137, 221, 0.25);
}
/*鼠标按钮*/
#guide_page .direction {
position:absolute;
width:880px;
height: 100px;
left:50px;
top:560px;
}
#guide_page .directiona {
width: 30px;
font: 30px bold 宋体;
color: black;
background: lightblue;
line-height: 30px;
border-radius: 15px;
text-align: center;
text-decoration: none;
cursor: pointer;
z-index: 15;
position: relative;
}
#guide_page .left {
float: left;
}
#guide_page .right {
float: right
}
#guide_page .close1 {
float: right
}
/*小圆点*/
#guide_page .point {
width: 200px;
margin: 30px auto 50px;
}
#guide_page .point span {
width: 12px;
height: 12px;
border-radius: 6px;
border: 1px solid #FFFFFF;
cursor: pointer;
float: left;
margin: 0 5px;
position: relative;
z-index: 15;
}
#guide_page .point .on {
background: #FFFFFF;
}
<dhtml:
<d<div id="guide_page">
<div class="bg"></div>
<div id="close_btn">Close tips</div>
<div class="lunBo" id="LunBo">
<ul class="con">
<li>
<div class="center">
<h4 class="tit">Documents</h4>
<p class="des">In “Documents”, you can find all the materials that your mentee(s) has uploaded to the system. You can download and start your editing.</p>
</div>
<div class="pic"><img src="/files/mentor/images/tu1.png" alt="1" width="571" height="321" /></div>
</li>
<li>
<div class="center">
<h4 class="tit">Activities</h4>
<p class="des">In “Activities”, you can find all the appointments that your mentee(s) makes or discover any new mentee has been assigned to you.</p>
</div>
<div class="pic"><img src="/files/mentor/images/tu2.png" alt="2" width="571" height="321" /></div>
</li>
<li>
<div class="center">
<h4 class="tit">Upload</h4>
<p class="des">In “Upload”, you can upload all the materials that you have finished editing. <br /></p>
</div>
<div class="pic"><img src="/files/mentor/images/tu3.png" alt="3" width="480" height="270" /></div>
</li>
<li>
<div class="center">
<h4 class="tit">My Mentee</h4>
<p class="des">In “My Mentees”, you will find all mentees under your mentorship. By clicking their name, you can check their relevant info.</p>
</div>
<div class="pic"><img src="/files/mentor/images/tu4.png" alt="4" width="390" height="220" /></div>
</li>
</ul>
<div class="point">
<span class="yellow"></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="direction">
<a href="javascript:;" class="left"><img src="/files/mentee/images/left.svg" alt="1"></a>
<a href="javascript:;" class="right"><img src="/files/mentee/images/rigth.svg" alt="2"></a>
<a href="javascript:;" class="close1"><img src="/files/mentee/images/close1.svg" alt="3"></a>
</div>
</div>
/**
* Created by Wendy on 2018/8/27.
*/
js：
$(function(){
if(getCookie('login')){
$("#guide_page").hide();
}
var i=0;
var size = $(".con li").length;
// console.log(size);
$(".lunBo .point span").first().addClass('on');
$(".lunBo .con li").eq(0).show().siblings().hide();
$(".direction .close1").hide();
$(".direction .left").hide();
//鼠标划入圆点
$(".lunBo .point span").hover(function(){
var index=$(this).index();
i=index;
$(".lunBo .con li").eq(i).show().siblings().hide();
$(this).addClass('on').siblings().removeClass('on');
})
/*自动轮播*/
// var t=setInterval(function(){
// i++;
// move();
// },4000);
//对lunBo定时器的操作
// $("#LunBo").hover(function(){
// window.clearInterval(t)
// // clearInterval(t);
// },function(){
// t=setInterval(move,4000);
// })
/*向左按钮*/
$(".lunBo .left").click(function(){
i--;
move();
})
/*向右按钮*/
$(".lunBo .right").click(function(){
i++;
move();
})
function move(){
$(".direction .left").show();
if(i==size){
$(".lunBo .con li").eq(i).show().siblings().hide();
$(".lunBo .point span").eq(i).addClass('on').siblings().removeClass('on');
i=0;
}
if(i==-1){
$(".lunBo .con li").eq(0).show().siblings().hide();
$(".lunBo .point span").eq(0).addClass('on').siblings().removeClass('on');
i=size-1;
}
// console.log(i);
// console.log(size);
if(i===size-1){
$(".direction .right").hide();
$(".direction .close1").show();
$(".close1").click(function(){
$("#guide_page").hide();
})
}else{
$(".direction .close1").hide();
$(".direction .right").show();
}
$(".lunBo .con li").eq(i).show().siblings().hide();
$(".lunBo .point span").eq(i).addClass('on').siblings().removeClass('on');
}
function setCookie(name,value,day){
var date = new Date();
date.setDate(date.getDate() + day);
document.cookie = name + '=' + value + ';expires='+ date;
};
//获取cookie
function getCookie(name){
var reg = RegExp(name+'=([^;]+)');
var arr = document.cookie.match(reg);
if(arr){
return arr[1];
}else{
return '';
}
};
$('#close_btn').click(function(){
setCookie('login','aaaa',70);
$("#guide_page").hide();
})
})
