老师，麻烦看一下，uislider插件里怎么也绑定不上事件

首页课程实战体系课手记专栏慕课教程

来源：5-8 首页.UI组件-UiSlider（3）

chenqianguan

2018-04-08 19:45:55

<!doctype html>

<html>

<head>

<title>城市医院预约平台</title>

</head>

<body>

<p class="welcome">欢迎来到城市医院预约挂号统一平台 请 

</p>

</div>

</a>

</div>

</div>

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

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

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

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

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

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

【东院】北京市东城区帅府园一号【本院】北京市西城区大木仓···

</div>

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

【东院】北京市东城区帅府园一号【本院】北京市西城区大木仓···

</div>

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

【东院】北京市东城区帅府园一号【本院】北京市西城区大木仓···

</div>

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

【东院】北京市东城区帅府园一号【本院】北京市西城区大木仓···

</div>

<a href="#" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>

</div>

</div>

东城区

</div>

西城区

</div>

朝阳城区

</div>

丰台城区

</div>

石景山城区

</div>

海淀城区

</div>

门头沟城区

</div>

房山城区

</div>

其他城区

</div>

</div>

</div>

<a href="#9" class="link">gsdfgsdgddfg</a>

<a href="#9" class="link">gsdfg```sdgddfg</a>

<a href="#9" class="link">gsdfgsdgt1`ddfg</a>

<a href="#9" class="link">gsdfg```sdgddfg</a>

<a href="#9" class="link">gsdfgsdgt1`ddfg</a>

</div>

</div>

<a href="#9" class="link">gsdfgsdgddfg</a>

<a href="#9" class="link">gsdfg```sdgddfg</a>

<a href="#9" class="link">gsdfgsdgt1`ddfg</a>

<a href="#9" class="link">gsdfg```sdgddfg</a>

<a href="#9" class="link">gsdfgsdgt1`ddfg</a>

</div>

</body>

</html>

css、代码

margin:0;

padding:0;

}

.top{

margin-top: 20px;

height: 30px;

line-height: 30px;

color: #868686;

font-size: 13px;

background-color: #f5f5f5;

}

select input{

border: none;

}

text-decoration: none;

}

.top .call{

display: inline-block;

float: left;

padding-left: 20px;

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

}

margin: 0;

padding: 0;

}

.top a{

color: #2da5e1;

font-size: 10px;

}

.top .welcome{

float:right;

}

/*header模块内样式*/

.header .logo{

width: 402px;

height:74px;

padding: 9px 0;

display: inline-block;

}

.header .logo img{

width: 100%;

height: 100%;

}

.header .search{

width: 326px;

height: 38px;

position: absolute;

right: 0;

top: 29px;

/*background-color: orange;*/

}

.nav .link{

display: inline-block;

float: left;

padding-left: 30px;

line-height: 36px;

color: #fff;

font-size: 16px;

min-width: 80px;

text-align: center;

}

.nav a:hover{

color:#d7f3ff;

}

.nav .menu{

width: 130px;

padding-right: 30px;

background-color: #1fa4f0;

position: relative;

}

.nav .menu .menu-list{

background-color: #1fa4f0;

width: 100%;

height: 423px;

position: absolute;

left: 0;

top:36px;

}

.clearfix:after{

content: ' ';

display: block;

height: 0;

line-height: 0;

clear: both;

zoom: 1;

}

.wrap{

width: 1000px;

margin: 0 auto;

position: relative;

}

.header{

height: 92px;

}

.nav{

height: 36px;

background-color: #60bff2;

}

.banner{

width: 802px;

height: 414px;

margin: 0 auto;

padding: 9px 0 0 198px;

}

.banner-slider{

width: 544px;

height: 414px;

float: left;

background-color: #8edff3;

}

.banner-search .submit{

height: 32px;

text-align: center;

}

.banner-search .submit .button{

width: 108px;

height: 33px;

background-color: #fecd09;

font-size: 14px;

color: #fff;

border-radius: 3px;

}

.banner-search{

width: 250px;

height: 250px;

padding-bottom: 2px;

float: right;

background-color: #eee;

}

.banner-help .caption,

.banner-search .caption{

height: 22px;

padding: 10px 0 10px 0;

text-align: center;

}

.banner-help .caption .text,

.banner-search .caption .text{

display: inline-block;

height: 22px;

line-height: 22px;

padding-left: 28PX;/*为旁边图片腾出位置*/

color: #fec009;

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

}

.banner-help .caption .list,

.banner-search .form .line{

padding-bottom: 9px;

text-align: center;

}

.banner-search .form .line select{

width: 170px;

font-size: 12px;

z-index: 0;

border: 1px solid #dcdddd;

height: 26px;

line-height: 26px ;

padding: 2px 0;

color: #666;

}

.banner-help{

width: 250px;

height: 150px;

float: right;

background-color: #fafafa;

margin-top: 12px;

}

.banner-help .caption .text{

color: #00b3ea;

background-position: 0 -23px;/*水平垂直方向偏移量*/

}

.banner-help .link{

color: #00b3ea;

display: inline-block;

width: 86px;

line-height: 26px;

font-size: 14px;

text-align: center;

padding: 0 0 8px 26px ;

}

.content-close .caption,

.content-news .caption{

height: 38px;

line-height: 38px;

background-color: #f4f6fa;

text-indent: 20px;

color: #fec009;

font-size: 15px;

}

.content-close .caption{

color:#4ab4ed;

}

.content-news .more,

.content-close .more{

float: right;

padding-right: 22px;

font-size: 12px;

color: #868686;

}

.content-close .list,

.content-news .list{

padding: 15px 20px 13px 35px;

line-height: 29px;

font-size: 12px;

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

}

.content-close .list{

background-image: url(../img/list-blue.jpg) ;

}

.content-close .list .link,

.content-news .list .link{

display: block;

color: #969696;

}

.content{

padding: 10px 0 38px 0;

}

.content-tab{

float: left;

width: 742px;

height: 490px;

background-color: #eee;

}

.content-tab .caption{

height: 34px;

line-height: 34px;

background-color: #f5f5fa;

}

.content-tab .caption .item{

display: block;

width: 112px;

height: 34px;

text-align: center;

float: left;

color: #00b3ea;

}

.content-tab .caption .item-focus{

background-color: #60bff2;

color: #fff;

}

.content-tab .block{

border: 1px solid #f4f6fa;

height: 452px;

}

.content-tab .block-caption{

height: 26px;

line-height: 26px;

padding: 8px;

border-bottom: 1px solid #f4f6fa;

}

.content-tab .block-caption{

display: block;

padding: 0 10px 0 10px;

font-size: 12px;

color:#4c4948;

float: left;

}

.content-tab .block-caption-item-focus{

background-color: #60bff2;

color: #fff;

}

.content-tab .block-content{

padding: 16px 12px;

}

.content-tab .block-content .block-more{

display: block;

line-height: center;

text-align: center;

color: #5084c4;

font-size: 14px;

}

.content-tab .block-content .block-list{}

.content-tab .block-content .block-list .item{

float: left;

width: 216px;

height: 102px;

padding: 0 20px 10px 120px;

position: relative;

font-size: 12px;

}

.content-tab .block-content .block-list .item img{

width: 110px;

height: 98px;

position: absolute;

left: 0;

top: 0;

}

.content-tab .block-content .block-list .item-level{

float: right;

font-size: 12px;

color: #979797;

}

.content-tab .block-content .block-list .item-phone,

.content-tab .block-content .block-list .item-address{

line-height: 18px;

padding-bottom: 4px;

color: #666;

}

.content-tab .block-content .block-text-list .item{

display: block;

width: 351px;

height: 27px;

font-size: 14px;

color: #666;

padding-top: 8px;

float: left;

border-bottom: 1px dashed #dcdddd;

}

.content-tab .block-content .block-text-list .item:nth-child(2n){

margin-left: 13px;

}

.content-news,.content-close{

float: right;

width: 248px;

height: 236px;

border: 1px solid #ccc;

}

.content-close{

margin-top: 12px;

border:1px solid #f4f6fa;

}

.content-news{

background-color: #fff;

border:1px solid #f4f6fa;

}

.footer{

height: 70px;

line-height: 70px;

text-align: center;

padding: 25px 0;

background-color: #eceef2;

}

/*ui的css*/

.ui-search{

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

font-size: 14px;

color: #fff;

position: relative;

}

.ui-search-selected{

width: 70px;

height: 38px;

line-height: 38px;

position: absolute;

left: 0;

top: 0;

text-indent: 14px;

}

.ui-search-select-list{

position: absolute;

width: 67px;

line-height: 24px;

background-color: #fff;

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

top: 36px;

left: 2px;

z-index: 9;

}

.ui-search-select-list a{

display: block;

color: #A5a2a2;

text-align: center;

}

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

background-color: #ebeef5;

}

.ui-search-input{

width: 215px;

height: 34px;

position: absolute;

top: 2px;

left: 70px;

line-height: 32px;

font-size: 13px;

color: #A5a2a2;

border: none;

}

.ui-search-submit{

display: block;

position: absolute;

right: 0;/*left的优先级比right高很多*/

width: 40px;

top: 0;

height: 36px;

}

.ui-menu-item{

height: 22px;

line-height: 22px;

padding: 8px 5px 9px 6px;

margin-left: 2px;

}

.ui-menu-item:hover{

background-color: #fff;

}

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

color: #333;

}

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

color: #868686;

}

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

display: block;

}

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

background-position: 0 0;

}

.ui-menu-item-department{

float: left;

height: 22px;

line-height: 22px;

position: relative;

padding-left: 30px;

font-size: 14px;

color: #fff;

}

.ui-menu-item-disease{

font-size: 12px;

float: right;

padding-left: 5px;

color: #d7f3ff;

}

.ui-menu-item-detail{

display: none;

position: absolute;

width: 500px;

height: 393px;

padding: 20px 10px 10px 20px;

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

top: 0;

left: 190px;

box-shadow: 5px 5px 2px rgba(0,0,0,0.1)

}

.ui-menu-item-detail-group{

}

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

width: 100%;

display: block;

height: 34px;

line-height: 34px;

color: #666;

font-size: 16px;

font-weight: bold;

}

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

line-height: 23px;

}

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

display: inline-block;

color: #868686;

margin-right: 7px;

font-size: 8px;

padding-bottom: 5px;

}

.ui-menu-item-department:before{

content: ' ';

display: block;

width: 22px;

height: 21px;

position: absolute;

left: 0;

top:1px;

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

}

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

content: " |";

color: #eee;

padding-left: 8px;

}

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

background-position-y: -22px;

}

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

background-position-y: -44px;

}

.ui-backTop{

display: none;

position: fixed;

right: 2px;

bottom: 2px;

z-index: 9;

width: 40px;

height: 40px;

color: #fff;

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

}

.ui-backTop:hover{

background: rgba(102,102,102,0.9);

}

.ui-backTop:hover:after{

content: '回到顶部';

display: block;

line-height: 20px;

text-align: center;

}

/* 幻灯片组件 */

.ui-slider{

width: 544px;

height: 414px;

position: relative;

/*overflow: hidden;*/

}

.ui-slider-wrap{

width: 99999px;

height: 414px;

position: absolute;

left: 0;

right: 0;

transition: all 0.7s;

}

.ui-slider-wrap .item{

display: block;

float: left;

width: 544px;

height: 414px;

}

.ui-slider-arrow{

width: 544px;

height: 40px;

position: absolute;

margin-top: -20px;

top: 50%;

}

.ui-slider-arrow .item{

display: block;

width: 40px;

height: 40px;

position: absolute;

top: 0;

/*left: 0;*//*left优先级远大于right*/

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

}

.ui-slider-arrow .left{

left: 0;

}

.ui-slider-arrow .right{

right: 0;

background-position: -40px 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;

/*border-radius: 50%;*/

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

}

.ui-slider-process .item_focus,

.ui-slider-process .item:hover{

background-position: -23px 0;

}

js代码

//定义uiSearch

$.fn.uiSearch= function(){

var ui = $(this);

$('.ui-search-select-list').hide();

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

$('.ui-search-select-list').show();

return false;

});

$('.ui-search-select-list a',ui).click(function(){

$('.ui-search-selected').text($(this).text());

$('.ui-search-select-list').hide();

return false;

});

$('body').click(function(){

$('.ui-search-select-list').hide();

})

}

// ui-tab规定

// @param{string} header TAB组件的选项卡 ,里面有若干个 .item

// @param{string} content TAB组件的内容区域,里面有若个,item

//@param{string} focus_prefix 选型卡高亮样式前缀，可选

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

var ui =$(this);

var tabs =$(header,ui);

var cons=$(content,ui);

var focus_prefix= focus_prefix || '';

tabs.click(function(){

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

tabs.removeClass(focus_prefix+'item-focus').eq(index).addClass(focus_prefix+'item-focus');

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

return false;

})

}

//ui-backTop

$.fn.UiBackTop = function(){

var ui=$(this);

var el=$('<a class="ui-backTop" href="#log"></a>');

ui.append(el);

var windowHeight=$(window).height();

$(window).scroll(function(){

var top=$('body').scrollTop();

if(top>windowHeight){

el.show();

}else{

el.hide();

}

});

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

// $(window).scrollTop(0);

});

}

//ui-slider

//1.箭头翻页；2.进度点联动；3.到第三页时，下一页回到第一页；4.自动轮播

$.fn.UiSlider = function(){

var ui=$(this);

// var wrap=$('.ui-slider-wrap');

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

// var btn_next=$('.ui-slider-arrow .right',ui);

// var item=$('.ui-slider-wrap .item',ui);

var tips=$('.ui-slider-process a',ui);

// var current=0;

// var size=item.size();

// var width=item.eq(0).width();

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

console.log(tips)

})

// btn_prev.on('click',function() {

// wrap.triggerHandler('move_prev');

// });

// btn_next.on('click',function(){

// });

// tips.on('click',function(){

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

// wrap.triggerHandler('move_to',index);

// });

}

//页面的脚本逻辑

$(function(){

$('.ui-search').uiSearch();

$('.content-tab').UiTab('.caption > .item','.block > .item');//有尖括号选择子代class，没有则是选择子孙class

$('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap','block-caption-');

$('body').UiBackTop();

$('ui-slider').UiSlider();

})

写回答

2回答

樱桃小胖子

2018-04-09

已采纳

只写到这一步是可以绑定上事件的，运行没有效果是因为你在最后调用的时候写错了

希望可以帮到你~

hhenqianguan

h 非常感谢！太感谢了

h018-04-09

共1条回复

chenqianguan

提问者

2018-04-09

老师请问这个错位怎么处理呢，只有第一个正常显示

0 学习 · 36712 问题

查看课程

相似问题

为什么要用到triggerHandler

回答 2

关于首页组件UICascading，多级菜单联动实现

回答 2

UiSlider-3

回答 1

这个是选择器吗？之前视频没看到过啊。。教辅里也没有啊

回答 2

triggerHandler写法怎么理解

回答 2

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