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

来源:5-7 首页.UI组件-UiSlider(2)

慕函数4234673

2020-02-12 15:44:29

<!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">

<div class="link"><select name="eara"><option>医院地区</option></select></div>

<div class="link"><select name="level"><option>医院等级</option></select></div>

<div class="link"><select name="name"><option>医院名称</option></select></div>

<div class="link"><select name="department"><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>

</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;

}

.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){

  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(){


  })

  .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()

})

//搜索

$.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){

  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(){


  })

  .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()

})//搜索

$.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){

  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(){


  })

  .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()

})//搜索

$.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){

  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(){


  })

  .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()

})//搜索

$.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){

  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(){


  })

  .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()

})//搜索

$.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){

  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(){


  })

  .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()

})//搜索

$.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){

  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(){


  })

  .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()

})//搜索

$.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){

  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(){


  })

  .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()

})//搜索

$.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){

  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(){


  })

  .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. 在自定义的事件的时候,为啥第一个会有wrap,下面定义的事件直接.on("自定义的事件",function(){})

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

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

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

写回答

1回答

好帮手慕夭夭

2020-02-12

同学你好,上传的js代码中,很多方法都重复定义了,不知道同学是不是粘贴错误了。为保证答疑的准确性,请同学先核对一下,上传一份最终版的js代码。

祝学习愉快 !

0

0 学习 · 14456 问题

查看课程