将jquery轮播图修改为vue轮播图
修改时有几个坑需要注意：
- jq和vue的事件绑定会有冲突，需要将jq的事件绑定修改为在html元素上使用v-on
- jq绑定事件时，可以将同类名的所有元素都一起绑定，例如：$(‘little_img’).click(function(){}),function里面可以使用$(this)来获取当前元素。vue在绑定事件时，是在html元素上绑定，要获取当前元素需要使用function($event),例如：<a @mouseover=”switchImg($event)”>标签</a> ，要获取当前元素，需要在js里使用e.target或者e.currentTarget(target和currentTarget的区别是: target:触发事件的元素。currentTarget:事件绑定的元素。 两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了),这种情况下需要使用e.currentTarget。获取所有元素时，只能使用$(‘元素选择器’)
- jq使用show()和hide()方法时，和vue使用v-show的原理是一样的，所以可以先在元素上使用v-show()，然后在js使用$().hide(),来更换元素的显示或者隐藏效果
- 定时器在使用时，传递方法时不要加括号，例如：
this.timer = setInterval(this.auto_play, 2000); //定时器引用方法时，不用加括号- 定时器在轮播图使用时，要在页面渲染完之后调用，在鼠标悬停在图片上时清除定时器，在鼠标离开图片时再创建定时器。但在是vue中，没有鼠标悬停的方法，我们可以使用@mouseenter,@mouseleave
- 在引用变量时，要放在data中
原代码：
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title>路线详情</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/bootstrap.min.css\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/common.css\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/route-detail.css\">
</head>
<body>
<!--引入头部-->
<div id=\"header\"></div>
<!-- 详情 start -->
<div class=\"wrap\">
<div class=\"bread_box\">
<a href=\"/\">首页</a>
<span> ></span>
<a href=\"#\">国内游</a><span> ></span>
<a href=\"#\">全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认</a>
</div>
<div class=\"prosum_box\">
<dl class=\"prosum_left\">
<dt>
<img alt=\"\" class=\"big_img\" </dt>
<dd id=\"dd\">
<a class=\"up_img up_img_disable\"></a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m40920d0669855e745d97f9ad1df966ebb.jpg\">
<img </a>
<a title=\"\" class=\"little_img cur_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4531a8dbceefa2c44e6d0e35627cd2689.jpg\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m46d8cb900e9f6c0a762aca19eae40c00c.jpg\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m45ea00f6eba562a767b5095bbf8cffe07.jpg\" style=\"display:none;\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg\" style=\"display:none;\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4e7e964909d7dd1a9f6e5494d4dc0c847.jpg\" style=\"display:none;\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m467db00e1b76718fab0fe8b96e10f4d35.jpg\" style=\"display:none;\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m487bbbc6e43eba6aa6a36cc1a182f7a20.jpg\" style=\"display:none;\">
<img </a>
<a class=\"down_img down_img_disable\" style=\"margin-bottom: 0;\"></a>
</dd>
</dl>
<div class=\"prosum_right\">
<p class=\"pros_title\" id=\"rname\">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认</p>
<p class=\"hot\" id=\"routeIntroduce\">1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
<div class=\"pros_other\">
<p >经营商家 ：<span id=\"sname\">黑马国旅</span></p>
<p >咨询电话 : <span id=\"consphone\">400-618-9090</span></p>
<p >地址 ： <span id=\"address\">传智播客黑马程序员</span></p>
</div>
<div class=\"pros_price\">
<p class=\"price\"><strong id=\"price\">¥2699.00</strong><span>起</span></p>
<p class=\"collect\">
<a class=\"btn\"><i class=\"glyphicon glyphicon-heart-empty\"></i>点击收藏</a>
<a class=\"btn already\" disabled=\"disabled\"><i class=\"glyphicon glyphicon-heart-empty\"></i>点击收藏</a>
<span>已收藏100次</span>
</p>
</div>
</div>
</div>
<div class=\"you_need_konw\">
<span>旅游须知</span>
<div class=\"notice\">
<p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br>
<p>2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p>
<p>3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p>
<p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p>
<p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p>
<p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br>
<p>2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p>
<p>3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p>
<p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p>
<p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p>
</div>
</div>
</div>
<!-- 详情 end -->
<!--引入头部-->
<div id=\"footer\"></div>
<!-- jQuery (necessary for Bootstrap\'s JavaScript plugins) -->
<script <!-- Include all compiled plugins (below), or include individual files as needed -->
<script <!--导入布局js，共享header和footer-->
<script type=\"text/javascript\" <script <script>
$(document).ready(function() {
//自动播放
goImg();
// var timer = setInterval(\"auto_play()\", 5000);
});
function goImg(){
//焦点图效果
//点击图片切换图片
$(\'.little_img\').on(\'mousemove\', function() {
$(\'.little_img\').removeClass(\'cur_img\');
var big_pic = $(this).data(\'bigpic\');
$(\'.big_img\').attr(\'src\', big_pic);
$(this).addClass(\'cur_img\');
});
//上下切换
var picindex = 0;
var nextindex = 4;
$(\'.down_img\').on(\'click\',function(){
var num = $(\'.little_img\').length;
if((nextindex + 1) <= num){
$(\'.little_img:eq(\'+picindex+\')\').hide();
$(\'.little_img:eq(\'+nextindex+\')\').show();
picindex = picindex + 1;
nextindex = nextindex + 1;
}
});
$(\'.up_img\').on(\'click\',function(){
var num = $(\'.little_img\').length;
if(picindex > 0){
$(\'.little_img:eq(\'+(nextindex-1)+\')\').hide();
$(\'.little_img:eq(\'+(picindex-1)+\')\').show();
picindex = picindex - 1;
nextindex = nextindex - 1;
}
});
}
//自动轮播方法
function auto_play() {
var cur_index = $(\'.prosum_left dd\').find(\'a.cur_img\').index();
cur_index = cur_index - 1;
var num = $(\'.little_img\').length;
var max_index = 3;
if ((num - 1) < 3) {
max_index = num - 1;
}
if (cur_index < max_index) {
var next_index = cur_index + 1;
var big_pic = $(\'.little_img:eq(\' + next_index + \')\').data(\'bigpic\');
$(\'.little_img\').removeClass(\'cur_img\');
$(\'.little_img:eq(\' + next_index + \')\').addClass(\'cur_img\');
$(\'.big_img\').attr(\'src\', big_pic);
} else {
var big_pic = $(\'.little_img:eq(0)\').data(\'bigpic\');
$(\'.little_img\').removeClass(\'cur_img\');
$(\'.little_img:eq(0)\').addClass(\'cur_img\');
$(\'.big_img\').attr(\'src\', big_pic);
}
}
$(function () {
/*
<dd>
<a class=\"up_img up_img_disable\"></a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m40920d0669855e745d97f9ad1df966ebb.jpg\">
<img </a>
<a title=\"\" class=\"little_img cur_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4531a8dbceefa2c44e6d0e35627cd2689.jpg\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m46d8cb900e9f6c0a762aca19eae40c00c.jpg\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m45ea00f6eba562a767b5095bbf8cffe07.jpg\" style=\"display:none;\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg\" style=\"display:none;\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4e7e964909d7dd1a9f6e5494d4dc0c847.jpg\" style=\"display:none;\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m467db00e1b76718fab0fe8b96e10f4d35.jpg\" style=\"display:none;\">
<img </a>
<a title=\"\" class=\"little_img\" data-bigpic=\"http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m487bbbc6e43eba6aa6a36cc1a182f7a20.jpg\" style=\"display:none;\">
<img </a>
<a class=\"down_img down_img_disable\" style=\"margin-bottom: 0;\"></a>
</dd>
*/
//1.获取rid
var rid = getParameter(\"rid\");
//2.发送请求请求 route/findOne
$.get(\"route/findOne\",{rid:rid},function (route) {
//3.解析数据填充html
$(\"#rname\").html(route.rname);
$(\"#routeIntroduce\").html(route.routeIntroduce);
$(\"#price\").html(\"¥\"+route.price);
$(\"#sname\").html(route.seller.sname);
$(\"#consphone\").html(route.seller.consphone);
$(\"#address\").html(route.seller.address);
//图片展示
var ddstr = \'<a class=\"up_img up_img_disable\"></a>\';
//遍历routeImgList
for (var i = 0; i < route.routeImgList.length; i++) {
var astr ;
if(i >= 4){
astr = \'<a title=\"\" class=\"little_img\" data-bigpic=\"\'+route.routeImgList[i].bigPic+\'\" style=\"display:none;\">\\n\' +
\' <img +
\' </a>\';
}else{
astr = \'<a title=\"\" class=\"little_img\" data-bigpic=\"\'+route.routeImgList[i].bigPic+\'\">\\n\' +
\' <img +
\' </a>\';
}
ddstr += astr;
}
ddstr+=\'<a class=\"down_img down_img_disable\" style=\"margin-bottom: 0;\"></a>\';
$(\"#dd\").html(ddstr);
//图片展示和切换代码调用
goImg();
});
});
</script>
</body>
</html>修改后代码：
这里使用的是ajax访问数据库获得的数据，与上面的代码不同，请各位自行准备数据测试
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title>路线详情</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/bootstrap.min.css\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/common.css\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/route-detail.css\">
</head>
<body>
<!--引入头部-->
<div id=\"header\"></div>
<!-- 详情 start -->
<div class=\"wrap\">
<div class=\"bread_box\">
<a href=\"/\">首页</a>
<span> ></span>
<a href=\"#\">国内游</a><span> ></span>
<a href=\"#\">{{travel.rname}}</a>
</div>
<div class=\"prosum_box\">
<dl class=\"prosum_left\">
<dt>
<img alt=\"\" class=\"big_img\" :src=\"travel.routeImgList[1].bigPic\" v-if=\"travel.routeImgList\">
</dt>
<dd >
<a class=\"up_img up_img_disable\" @click=\"putUp($event)\"></a>
<a title=\"\" :class=\"{little_img:true,cur_img:index==1}\" :data-bigpic=\"routeImg.bigPic\"
v-for=\"(routeImg,index) in travel.routeImgList\" :key=\"index\" @mouseover=\"switchImg($event)\" v-show=\"index<4\">
<img :src=\"routeImg.smallPic\" @mouseenter=\"clearTimer()\" @mouseleave=\"creatTimer()\">
</a>
<a class=\"down_img down_img_disable\" style=\"margin-bottom: 0;\" @click=\"putDown($event)\"></a>
</dd>
</dl>
<div class=\"prosum_right\">
<p class=\"pros_title\">{{travel.rname}}</p>
<p class=\"hot\">{{travel.routeIntroduce}}</p>
<div class=\"pros_other\" v-if=\"travel.seller\">
<p>经营商家 ：{{travel.seller.sname }}</p>
<p>咨询电话 : {{travel.seller.consphone}}</p>
<p>地址 ： {{travel.seller.address}}</p>
</div>
<div class=\"pros_price\">
<p class=\"price\"><strong>¥{{travel.price}}</strong><span>起</span></p>
<p class=\"collect\">
<a class=\"btn\"><i class=\"glyphicon glyphicon-heart-empty\"></i>点击收藏</a>
<a class=\"btn already\" disabled=\"disabled\"><i class=\"glyphicon glyphicon-heart-empty\"></i>点击收藏</a>
<span>已收藏100次</span>
</p>
</div>
</div>
</div>
<div class=\"you_need_konw\">
<span>旅游须知</span>
<div class=\"notice\">
<p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br>
<p>2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p>
<p>3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p>
<p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p>
<p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p>
<p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br>
<p>2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p>
<p>3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p>
<p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p>
<p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p>
</div>
</div>
</div>
<!-- 详情 end -->
<!--引入头部-->
<div id=\"footer\"></div>
<!-- jQuery (necessary for Bootstrap\'s JavaScript plugins) -->
<script <!-- Include all compiled plugins (below), or include individual files as needed -->
<script <!--导入布局js，共享header和footer-->
<script type=\"text/javascript\" src=\"js/vue.min.js\"></script>
<script src=\"js/vue-axios.min.js\"></script>
<script <script>
//自动切换图片
let vm4 = new Vue({
el:\'.wrap\',
data:{
travel:{},
picindex:0,
nextindex:4,
timer:null
},
methods:{
switchImg(e){
let little_img = $(e.currentTarget)
$(\'.little_img\').removeClass(\'cur_img\');
var big_pic = little_img.data(\'bigpic\');
$(\'.big_img\').attr(\'src\', big_pic);
little_img.addClass(\'cur_img\');
// console.log(e.currentTarget)
// console.log($(\'.big_img\')[0])
},
//上下切换
putDown(e){
var num = $(\'.little_img\').length;
if((this.nextindex + 1) <= num){
$(\'.little_img:eq(\'+this.picindex+\')\').hide(); //这里与v-show的用法类似，所以可以改变v-show(),但是不能把css写死
$(\'.little_img:eq(\'+this.nextindex+\')\').show();
this.picindex = this.picindex + 1;
this.nextindex = this.nextindex + 1;
}
},
putUp(){
var num = $(\'.little_img\').length;
if(this.picindex > 0){
$(\'.little_img:eq(\'+(this.nextindex-1)+\')\').hide();
$(\'.little_img:eq(\'+(this.picindex-1)+\')\').show();
this.picindex = this.picindex - 1;
this.nextindex = this.nextindex - 1;
}
},
//自动轮播方法
auto_play() {
var cur_index = $(\'.prosum_left dd\').find(\'a.cur_img\').index();
cur_index = cur_index - 1;
var num = $(\'.little_img\').length;
var max_index = 3;
if ((num - 1) < 3) {
max_index = num - 1;
}
if (cur_index < max_index) {
var next_index = cur_index + 1;
var big_pic = $(\'.little_img:eq(\' + next_index + \')\').data(\'bigpic\');
$(\'.little_img\').removeClass(\'cur_img\');
$(\'.little_img:eq(\' + next_index + \')\').addClass(\'cur_img\');
$(\'.big_img\').attr(\'src\', big_pic);
} else {
var big_pic = $(\'.little_img:eq(0)\').data(\'bigpic\');
$(\'.little_img\').removeClass(\'cur_img\');
$(\'.little_img:eq(0)\').addClass(\'cur_img\');
$(\'.big_img\').attr(\'src\', big_pic);
}
},
clearTimer(){
clearInterval(this.timer)
},
creatTimer(){
this.timer = setInterval(this.auto_play, 2000); //定时器引用方法时，不用加括号
}
},
mounted(){
let rid = getParameter(\"rid\");
this.axios.get(\'route/findOne\',{params:{rid:rid}})
.then(data=>{
console.log(data.data)
this.travel=data.data;
//自动播放
// clearInterval(timer);
this.timer = setInterval(this.auto_play, 2000); //定时器引用方法时，不用加括号
})
}
})
</script>
</body>
</html>
