体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

点击小圆点没有反应，这这节课里有太多的不懂，请老师解释下

来源：5-7 首页.UI组件-UiSlider（2）

慕函数4234673

2020-02-12 17:55:17

<!DOCTYPE html>

<html leng="en">

<head>

<meta charset="utf-8">

<title></title>

<link rel="stylesheet" type="text/css" href="css/index.css">

<link rel="stylesheet" type="text/css" href="css/base.css">

<link rel="stylesheet" type="text/css" href="css/ui.css">

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

</head>

<body>

<div class="top">

<div class="wrap">

<p class="call">010-114/110614</p>

<p class="welcome">欢迎来到城市统一挂号平台&nbsp;请&nbsp;&nbsp;

<a  href="#">登录</a>&nbsp;&nbsp; 

  <a href="#">注册</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#">帮助中心</a></p>

</div>

</div>

<div class="header">

<div class="wrap">

<a href="#2" class="logo"><img src="img/logo.png"></a>

<div class="search ui-search">

<div class="ui-search-selected">医院</div>

<div class="ui-search-selected-list">

<a href="#2" >科室</a>

<a href="#2" >疾病</a>

<a href="#2">医院</a>

</div>

<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">

<a href="#2" class="ui-search-submit"></a>

</div>

</div>

</div>

<div class="nav">

<div class="wrap">

<div class="link menu">全部科室

<div class="menu-list ui-menu">

<div class="ui-menu-item">

<a href="#4" class="ui-menu-item-department">内科</a>

<a href="#4" class="ui-menu-item-disease">高血压</a>

<a href="#4" class="ui-menu-item-disease">冠心病</a>

<div class="ui-menu-item-detail">

<div class="ui-menu-item-detail-group">

<div class="ui-menu-item-detail-group-caption">内科</div>

<div class="ui-menu-item-detail-group-list">

<a href="#3">心脑血管科</a>

<a href="#3">神经内科</a>

<a href="#3">内分泌科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

</div>

<div class="ui-menu-item-detail-group-caption">内科常见的疾病</div>

<div class="ui-menu-item-detail-group-list">

<a href="#3">心脑血管科</a>

<a href="#3">神经内科</a>

<a href="#3">内分泌科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

</div>

</div>

</div>

</div>

<div class="ui-menu-item">

<a href="#4" class="ui-menu-item-department">外科</a>

<a href="#4" class="ui-menu-item-disease">高血压</a>

<a href="#4" class="ui-menu-item-disease">冠心病</a>

<div class="ui-menu-item-detail">

<div class="ui-menu-item-detail-group">

<div class="ui-menu-item-detail-group-caption">内科</div>

<div class="ui-menu-item-detail-group-list">

<a href="#3">心脑血管科</a>

<a href="#3">神经内科</a>

<a href="#3">内分泌科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

</div>

<div class="ui-menu-item-detail-group-caption">内科常见的疾病</div>

<div class="ui-menu-item-detail-group-list">

<a href="#3">心脑血管科</a>

<a href="#3">神经内科</a>

<a href="#3">内分泌科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

</div>

</div>

</div>

</div>


</div>

</div>

<a href="#" class="link">按医院挂号</a>

       <a href="#" class="link">按科室挂号</a>

       <a href="#" class="link">按疾病挂号</a>

       <a href="#" class="link">最新公告</a>

       <a href="#" class="link right">社会知名医院</a>

</div>

</div>

<div class="banner">

<div class="banner_slider ui-slider">

<div class="ui-slider-wrap">

<a href="#1" class="item"><img src="img/banner_1.jpg"></a>

<a href="#2" class="item"><img src="img/banner_2.jpg"></a>

<a href="#3" class="item"><img src="img/banner_3.jpg"></a>

  </div>

  <div class="ui-slider-arrow">

  <a  href="#3" class="item left"></a>

  <a  href="#3" class="item right"></a>

  </div>

  <div class="ui-slider-process">

  <a href="#3" class="item item1"></a>

  <a href="#3" class="item "></a>

       <a href="#3" class="item "></a>

       

  </div>


</div>

<div class="banner_search ">

<div class="caption"><span class="text">快速预约</span></div>

<div class="form ui-cascading">

<div class="link">

<select name="eara" date-search="getDistinctArea" date-where=""><option>医院地区</option><option>朝阳区</option><option>东城区</option></select>

</div>

<div class="link">

<select name="level" date-search="getLeveByArea" date-where=""><option>医院等级</option>

<option>医院等级1</option>

<option>医院等级2</option>

</select>

</div>

<div class="link">

<select name="name" date-search="getNameByAreaAndLevel" date-where="" ><option>医院名称</option></select>

</div>

<div class="link">

<select name="department" date-search="getDepartmentArrByHospitalName" date-where="" ><option>医院科室</option></select>

</div>

   </div>

   <div class="submit">

    <input type="button" class="button" value="快速查询">

   </div>

</div>

<div class="banner_help">

<div class="caption"><span class="text">帮助中心</span></div>

<div class="list">

<a href="#" class="line">账号指南</a>

           <a href="#" class="line">预约指南</a>

           <a href="#" class="line">账号找回</a>

           <a href="#" class="line">常见问题</a>

</div>

</div>

</div>

<div class="content">

<div class="wrap">

<div class="content_tab">

<div class="caption">

<a href="#3" class="item item1">医院</a>

<a href="#3" class="item ">科室</a>

</div>

<div class="block">

<div class="item">

<div class="block_item">

<a href="#3" class=" item1 block_caption_item">全部</a>

<a href="#3" class="block_caption_item">东城区</a>

<a href="#3" class="block_caption_item">西城区</a>

<a href="#3" class="block_caption_item">朝阳区</a>

<a href="#3" class="block_caption_item">丰台区</a>

<a href="#3" class="block_caption_item">石景山区</a>

<a href="#3" class="block_caption_item">海定区</a>

<a href="#3" class="block_caption_item">门头沟区</a>

<a href="#3" class="block_caption_item">房山区</a>

<a href="#3" class="block_caption_item">其他</a>

</div>

<div class="block_content">

<div class="block_wrap">

<div class="block_list">

<div class="block_list_item">

<img src="img/hospital-1.jpg" alt="医院">

<div class="hospital">北京协和医院 <span class="hospital-level">【三级甲等】</span></div>

<div class="phone">电话：东院咨询台：010-69155564..</div>

<div class="address">地址：[东院]北京市东城区帅府园一号[西院]北京市西城区牡丹..</div>

</div>

<div class="block_list_item">

<img src="img/hospital-2.jpg" alt="医院">

<div class="hospital">北京大学第一医院 <span class="hospital-level">【三级甲等】</span></div>

<div class="phone">电话：010-83572211、010-6..</div>

<div class="address">地址：北京市西城区西什库大街八号</div>

</div>

<div class="block_list_item">

<img src="img/hospital-3.jpg" alt="医院">

<div class="hospital">北京大学人民医院 <span class="hospital-level">【三级甲等】</span></div>

<div class="phone">电话：010-88325141、010-8..</div>

<div class="address">地址：北京市西城区西直门南大街11号</div>

</div>

<div class="block_list_item">

<img src="img/hospital-4.jpg" alt="医院">

<div class="hospital">北京大学第三医院 <span class="hospital-level">【三级甲等】</span></div>

<div class="phone">电话：010-88325141、010-8..</div>

<div class="address">地址：北京市西城区西直门南大街11号</div>

</div>

</div>

<div class="block_text_list">

<a href="#3" class="item">中国医学科学院肿瘤医院<span>【三级甲等】</span></a>

<a href="#3" class="item">中国医学科学院埠外医院<span>【三级甲等】</span></a>

<a href="#3" class="item">首都医科大学附属北京天坛医..<span>【三级甲等】</span></a>

<a href="#3" class="item">首都医科大学附属北京安贞医..<span>【三级甲等】</span></a>

<a href="#3" class="item">首都医科大学武宣医院<span>【三级甲等】</span></a>

<a href="#3" class="item">首都医科大学附属同仁..<span>【三级甲等】</span></a>

</div>

<a href="#3" class="block_more">更多医院</a>

</div>

<div class="block_wrap" style="display: none;">其他城区内容</div>

</div>

</div>

<div class="item" style="display: none;">科室内容

</div>

</div>

</div>

<div class="content_new">

<div class="caption">最新公告 <a href="#" class="more">|&nbsp;更多</a></div>

<div class="list">

<a href="#" class="link">特需门诊暂停</a><br>

<a href="#" class="link">中国联合网络通讯...</a><br>

<a href="#" class="link">防护侧率升级通知</a><br>

<a href="#" class="link">首都研究所附属儿科...</a><br>

<a href="#" class="link">首都医科大学附属..</a><br>

<a href="#" class="link">北京燕华医院暂停</a>

</div>


</div>

<div class="content_close">

<div class="caption">停诊公告 <a href="#" class="more">|&nbsp;更多</a></div>

<div class="list">

<a href="#" class="link">特需门诊暂停暂停暂停暂停暂停..</a><br>

<a href="#" class="link">中国联合网...</a><br>

<a href="#" class="link">防护侧率升级通知</a><br>

<a href="#" class="link">首都研究所附属儿科...</a><br>

<a href="#" class="link">首都医科大学附属复..</a><br>

<a href="#" class="link">北京燕华医院暂停</a>

</div>


</div>

  </div>

</div>

<div class="footer">

<p>copyright&copy;2017版权所有</p>

</div>

<script type="text/javascript" src="js/ui.js"></script>

<script type="text/javascript" src="js/data.js"></script>

</body>

</html>

*{

padding: 0;

margin: 0;

}

.top{

width: 100%;

height: 30px;

background: #f5f5f5;

}

.wrap{

width: 1000px;

margin:0 auto;

position: relative;

}

.header{

height: 92px;


}

.nav{

height: 36px;

background: #60bff2;

}

.banner{

 width: 802px;

 margin: 0 auto;

 padding: 9px 0 0 198px;

 height: 414px;

 overflow: hidden;

}

.banner_slider{

float: left;

width: 544px;

height: 414px;

background: #8edff3;

overflow: hidden;

}

.banner_search{

float: right;

width: 250px;

height: 255px;

background: #eee;

}

.banner_help{

float: right;

width: 250px;

height: 146px;

background: #ccc;

margin-top: 12px;

}

.content{

padding: 10px 0 38px 0;

overflow: hidden;

}

.content_tab{

float: left;

width: 742px;

height: 490px;

background: #eee;

}

.content_new,

.content_close{

float: right;

width: 248px;

height: 236px;

border: 1px solid #ccc;

}

.content_close{

margin-top: 12px;

}

.footer{

width: 100%;

height: 60px;

padding: 25px 0;

background:#eceef2;

}

p{

padding: 0;

margin:0;

display: inline-block;

}

a{

text-decoration: none;

}

select{

border: none;

outline: none;

}

input{

border: none;

outline: none;

}

/*top内部样式*/

.top{

height: 30px;

line-height: 30px;

font-size: 12px;

color:#b9b9b9;

}

.top .call{

float: left;

  background: url(../img/icon-call.png) no-repeat center left;

  padding-left: 20px;

}

.top .welcome{

float: right;

}

.top a{

color:#1fa4f0;

}

/*header内部样式*/

.header .logo{

width: 402px;

height: 74px;

display: inline-block;

   padding: 10px 0;

}

.header .logo img{

width: 100%;

height: 100%;


}

.header .search{

width: 326px;

height: 38px;

   float: right;

  /* border: 1px solid gray;*/

   margin-top: 25px;

 /*  background: orange;*/

}

.nav .link{

display: inline-block;

height: 36px;

line-height: 36px;

text-align: center;

float: left;

font-size: 16px;

min-width: 80px;

color: #fff;

margin-right: 30px;

}

.nav a:hover{

color:#d7f3ff;

}

.nav .menu{

width: 130px;

padding-right: 30px;

padding-left: 30px;

background: #1fa4f0;

text-align: center;

position: relative;

}

.nav .menu .menu-list{

position: absolute;

background: #1fa4f0;

width: 100%;

height: 423px;

top:36px;

left: 0px;

}

.banner_search,.banner_help{

background: #fafafa;

}

.banner_search .caption,.banner_help .caption {

height: 22px;

padding:15px 0 15px 0;

text-align: center;

}

.banner_search .caption .text,.banner_help .caption .text{

height: 22px;

display: inline-block;

line-height: 22px;

padding-left: 28px;

color: #fec009;

font-style: 16px;

background: url(../img/icon-help.png) no-repeat 0 0;

}

.banner_search .form{

height: 150px;

text-align: center;

}

.banner_search .form .link select{

margin-bottom: 12px;

width: 170px;

height: 25px;

line-height: 25px;

border: 1px solid #dcdddd;

  color:#666;


}

.banner_search .submit{

text-align:center;

height: 30px;

}

.banner_search .submit .button{

       width: 107px;

       height: 30px;

line-height: 30px;

background: #fecd09;

border: 1px solid gray;

color:#fff;

border-radius: 3px;

font-size: 14px;

}

.banner_help .caption .text{

background: url(../img/icon-help.png) no-repeat 0 -23px;

color:#00b3ea;

}

.banner_help .line{

display: inline-block;

   width: 86px;

   height: 26px;

   line-height: 26px;

   font-size: 15px;

    color:#00b3ea;

   text-align: center;

 padding: 0 0 8px 26px;

  

}

.content_close,

.content_new{

background: #fff;

border:1px solid #f4f6fa;


}

.content_new .caption,.content_close .caption{

height: 38px;

line-height: 38px;

text-align: left;

padding-left: 21px;

color:#fec009;

background: #f4f6fa;

}

.content_new .caption .more,.content_close .caption .more{

float: right;

margin-right: 24px;

color:#8a8a8a;

}

.content_new .list .link,

.content_close .list .link{

color:#969696;

}

.content_new .list{

padding:15px 20px 13px 35px;

height: 29px;

line-height: 29px;

font-size: 12px;

background: url(../img/list-yellow.jpg) no-repeat 17px 20px;

}

.content_close .caption{

color:#61bdef;

}

.content_close .list{

padding:15px 20px 13px 35px;

height: 29px;

line-height: 29px;

font-size: 12px;

background: url(../img/list-blue.jpg) no-repeat 17px 20px;

}

.content_tab {

background: none;

}

.content_tab .caption{

background: #f4f6fa;

height: 38px;

line-height: 38px;

}

.content_tab .caption .item{

display:inline-block;

text-align: center;

/*margin-right: 44px;*/

color: #60bff2;

width:112px;

}

.content_tab .caption .item1{

  

color: #fff;

background: #60bff2;

}

.content_tab .block{

border:1px solid #f4f6fa;

height: 452px;

}

.content_tab .block .item{

margin: 0 auto;

}

.content_tab .block .item .block_item{

background: #fff;

height: 38px;

line-height: 38px;

padding: 8px;

border-bottom: 1px solid #f4f6fa;

}

.content_tab .block .item .block_caption_item{

display: inline-block;

padding: 0 10px 0 10px;

color:#a6a4a3;

/*margin-right:2px;*/

font-size: 12px;

float: left;

}

.content_tab .block .item .item1{

width:48px;

background: #60bff2;

text-align: center;

color:#fff;

}

.content_tab .block .block_content{

padding: 16px 12px;

}

.content_tab .block .block_content .block_more{

display: block;

height: 55px;

line-height: 55px;

text-align: center;

color:#6895cc;

font-size: 15px;

}

.content_tab .block .block_content .block_list{

overflow: hidden;

}

.content_tab .block .block_content .block_list_item{

float: left;

width: 216px;

height: 102px;

font-size: 12px;

padding: 0 20px 10px 120px;

position: relative;

}

.content_tab .block .block_content .block_list_item img{

width: 110px;

height: 98px;

position: absolute;

top:0;

left: 0;

}

.content_tab .block .block_content .block_list_item .hospital{

color:#036eb7;

font-size: 14px;

line-height: 21px;

padding-top: 13px;


}

.content_tab .block .block_content .block_list_item .hospital-level{

float: right;

color:#c3c3c3;

   font-size: 12px;

}

.content_tab .block .block_content .block_list_item .phone,

.content_tab .block .block_content .block_list_item .address{

line-height: 20px;

color: #b0b0b0;

}

.content_tab .block .block_content .block_text_list{

padding-top: 13px;

overflow: hidden;

}

.content_tab .block .block_content .block_text_list .item{

display: block;

float: left;

color:#929292;

width: 351px;

height: 27px;

border-bottom: 1px dashed #dcdddd;

font-size: 13px

}

.content_tab .block .block_content .block_text_list .item span{

float: right;

}

.footer{

color:#d2d1cd;

text-align: center;

height: 60px;

line-height: 60px;

font-weight: bold;

}

.ui-search{

background: url(../img/ui-search.jpg) no-repeat center;

font-size: 14px;

color:#fff;

position: relative;

}

.ui-search .ui-search-selected{

  position: absolute;

  width: 70px;

  height: 38px;

  line-height: 38px;

  top:0px;

  left:0px;

  padding-left: 14px;

}

.ui-search .ui-search-selected-list{

width: 67px;

position: absolute;

line-height: 24px;

background:#fff;

box-shadow: 3px 3px 5px rgba(0,0,0,.2);

top:36px;

left: 2px;

z-index:2;

display: none;

}

.ui-search .ui-search-selected-list a{

display: block;

color: #A5a2a2;

text-align: center;

}

.ui-search .ui-search-selected-list a:hover{

background: #ebeef5;

}

.ui-search .ui-search-input{

width: 100px;

height: 36px;

line-height: 38px;

text-align: center;

position: absolute;

top:1px;

right: 150px;

}

.ui-menu-item {

height: 22px;

line-height: 22px;

padding:8px 5px 9px 6px;

color:#fff;

margin-left: 2px;

}

.ui-menu-item .ui-menu-item-department:before{

content: "";

display: block;

width: 22px;

height: 21px;

position: absolute;

top:1px;

left: 0px;

background: url(../img/icon-menu.jpg) no-repeat -22px 0;

}

.ui-menu-item:hover .ui-menu-item-department:before{

 background-position: 0 0;

}

.ui-menu-item:nth-chid(2) .ui-menu-item-department:before{

 background-position-y:-22px;

}

.ui-menu-item:nth-chid(3) .ui-menu-item-department:before{

 background-position-y:-66px;

}

.ui-menu-item:hover{

background: #fff;

}

.ui-menu-item:hover .ui-menu-item-department{

color:black;

}

.ui-menu-item:hover .ui-menu-item-disease{

color:gray;

}

.ui-menu-item:hover .ui-menu-item-detail{

display: block;

}


.ui-menu-item .ui-menu-item-department{

display: inline-block;

color: #fff;

float: left;

padding-left: 30px;

font-size: 14px;

position: relative;

}

.ui-menu-item .ui-menu-item-disease{

display: block;

float: right;

color: #d7f3ff;

font-size: 12px;

margin-right: 5px;

}

.ui-menu-item .ui-menu-item-detail{

  position: absolute;

  width: 539px;

  height: 423px;

  top:0px;

  left:191px;

  background: #fff;

  box-shadow: 5px 5px 2px rgba(0,0,0,.1);

  background: url(../img/bg-menu.jpg) no-repeat center;

  display: none;

}

.ui-menu-item .ui-menu-item-detail .ui-menu-item-detail-group{

padding:20px 0px 0px 20px;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-caption{

width: 100%;

height: 20px;

line-height: 20px;

font-size: 18px;

color:black;

margin-bottom: 10px;

font-weight: bold;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list{

margin-bottom: 20px;

text-align: left;

}


.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list a{

font-size: 12px;

color:gray;

height: 20px;

line-height: 20px;

margin-right: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:after{

content:"|";

color:gray;

margin-left: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:hover{

color:green;

}

.ui-backtop{

display:block;

position:fixed;

right:2px;

bottom:2px;

z-index:9;

width:40px;

height:40px;

color:#fff;

background:url(../img/icon-go-up.png) no-repeat center rgba(102,102,102,.9);

}

.ui-backtop:hover{

background:  rgba(102,102,102,.9);

}

.ui-backtop:hover:after{

content: "回到顶部";

display:block;

line-height: 20px;

text-align: center;

}

.ui-slider{

width: 544px;

height: 414px;

position: relative;

}


.ui-slider-wrap{

width: 99999px;

height: 414px;

position: absolute;

top:0;

left:0;

right: 0;

transition: all .5s;

}

.ui-slider-wrap .item{

display: block;

width: 544px;

height: 414px;

float: left;

}


.ui-slider-arrow{

width: 544px;

height: 40px;

position: absolute;

top:50%;

margin-top: -20px;


}

.ui-slider-arrow .item{

display: block;

width: 40px;

height: 40px;

position: absolute;

top:0;

background: url(../img/ui-slider-arrow.png) no-repeat;

}

.ui-slider-arrow .right{

right:0;

transform: rotate(180deg);

}

.ui-slider-arrow .left{

left: 0;

}

.ui-slider-process {

width: 544px;

height: 12px;

text-align: center;

position: absolute;

left: 0;

bottom:20px;


}

.ui-slider-process .item{

display: inline-block;

width: 16px;

height: 16px;

background: url(../img/ui-slider-process.png) no-repeat;

}

 .ui-slider-process .item1,

.ui-slider-process .item:hover{

background-position: -23px 0;

}

//搜索

$.fn.uisearch=function(){

  var ui=$(this)

  $(".ui-search-selected",ui).on("click",function(){

    $(".ui-search-selected-list").css({"display":"block"})

    return false  //阻止冒泡

  })

  $(".ui-search-selected-list a").on("click",function(){

   $(".ui-search-selected").text($(this).text())

   $(".ui-search-selected-list").css({"display":"none"})

   return false

  })

  $("body").on("click",function(){

  $(".ui-search-selected-list").hide()

  })

}

//选项卡切换

$.fn.UiTab = function(header,content){


var ui = $(this);

var tabs = $(header,ui);

var cons = $(content,ui);

tabs.on('click',function(){

var index = $(this).index();

 

tabs.removeClass('item1').eq(index).addClass('item1');

cons.hide().eq(index).show();

    

return false;

  })

}

//回到顶部

$.fn.uibacktop=function(){

 var ui=$(this)

 var el=$('<a href="0" class="ui-backtop"></a>')

 ui.append(el)

 var windowHeight=$(window).height()

 console.log(windowHeight)

$(window).on("scroll",function(){

 var top=$(document).scrollTop() 

if(top>windowHeight/2){

 el.show()

}else{

 el.hide()

}

})

el.on("click",function(){

 $(window).scrollTop(0)

})


}

//轮播图

$.fn.uislider=function(){

 var  ui=$(this)

 var wrap=$(".ui-slider-wrap")

 //所有的图片中的每一个

 var items=$(".ui-slider-wrap .item",ui)

 //按钮的上一张

 var btn_prev=$("ui-slider-arrow .left",ui)

 //按钮的下一张

 var btn_next=$("ui-slider-arrow .right",ui)

 // 进度条tip小圆点

 var tips=$(".ui-slider-process .item",ui)

 var current=0

 var size=items.size()

 var width=items.eq(0).width()


 //具体操作

 //1.自定义事件

 wrap

 .on("move_prev",function(){

   current=current-1

   wrap.triggerHandler("move_to",current)

 })

 .on("move_next",function(){


 })

 .on("move_to",function(evt,index){

    wrap.css('left',index*width*-1)


 })

 //事件

  btn_prev.on("click",function(){

   wrap.triggerHandler("move_prev")

  })

  btn_next.on("click",function(){

    wrap.triggerHandler("move_next")

  })

   tips.on("click",function(){

     index=$(this).index()

    wrap.triggerHandler("move_to")

   })


}




$(function(){

$(".ui-search").uisearch()

$(".content_tab").UiTab(".caption > .item",".block > .item");

$(".block .item").UiTab(".block_item > .block_caption_item",".block_content > .block_wrap");

$("body").uibacktop()

$(".ui-slider").uislider()


})


1.在js自定义的事件的时候，为啥第一个会有wrap，下面定义的事件直接.on("自定义的事件"，function(){})

2.width=items.eq(0).width(),这个宽度时如何得到的，eq(0)又代表啥

3.index*width*-1 当index为0 时，那应该是到第几张了呢？

4.这里讲解的轮播图，用的时jquery怎么这么乱，在做项目能否用之前讲过js原生代码来做


写回答

3回答

好帮手慕星星

2020-02-13

同学你好，代码中只触发了移动事件，但是没有传入索引移动到哪一张，所以没有效果。参考修改

http://img.mukewang.com/climg/5e4521d9090436d704530193.jpg

祝学习愉快！

0

慕函数4234673

提问者

2020-02-13

那在这里我也设置了点击小圆点，为啥点击没反应呢

0

好帮手慕星星

2020-02-12

同学你好，问题解答如下：

1、wrap是获取的轮播盒子元素，绑定事件就需要在轮播盒子上绑定

http://img.mukewang.com/climg/5e43d3f7096cf08203460044.jpg

http://img.mukewang.com/climg/5e43dc1f09c5100f03900169.jpg

所以是wrap.on()。

2、eq() 方法将匹配元素集缩减值指定 index 上的一个。items是所有的小图片盒子，eq(0)也就是获取items的一个元素，width()方法是用来获取宽度的，这样就拿到了一个小盒子的宽度。

3、index*width*-1，index为0时，计算的值也是0，那么left定位设置就是0，显示的也就是第一张。

4、可以使用原生js来写，但是这里讲解的是jquery方法，思路虽然有点绕，但是原理和原生js实现轮播是一样。活着自己可以尝试写一写。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0

0 学习 · 14456 问题

查看课程

相似问题

点击小圆点没有反应，这这节课里有太多的不懂，请老师解释下

回答 1

有没人觉得这老师敲代码敲得太快

回答 2

控制台报错了，帮忙看下

回答 2

老师，请帮我看看为什么点击进度圆点，没有弹出debugger呢

回答 1

还有几个小问题请老师解决 顺便看下还有什么地方可以改进

回答 2

打开慕课网App查看更多内容