js轮播图实现简单代码轮播图jquery代码( 二 )

这里使用的是ajax访问数据库获得的数据，与上面的代码不同，请各位自行准备数据测试
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>路线详情</title><link rel="stylesheet" type="text/css" href="https://www.520longzhigu.com/diannao/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="https://www.520longzhigu.com/diannao/css/common.css"><link rel="stylesheet" type="text/css" href="https://www.520longzhigu.com/diannao/css/route-detail.css"></head><body><div id="header"></div><div class="wrap"><div class="bread_box"><a href="https://www.520longzhigu.com/">首页</a><span> ></span><a href="https://www.520longzhigu.com/diannao/#">国内游</a><span> ></span><a href="https://www.520longzhigu.com/diannao/#">{{travel.rname}}</a></div><div class="prosum_box"><dl class="prosum_left"><dt><img class="big_img" :src="https://www.520longzhigu.com/diannao/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="https://www.520longzhigu.com/diannao/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><div id="footer"></div><script src="https://www.520longzhigu.com/diannao/js/jquery-3.3.1.js"></script><script src="https://www.520longzhigu.com/diannao/js/bootstrap.min.js"></script><script type="text/javascript" src="https://www.520longzhigu.com/diannao/js/include.js"></script><script src="https://www.520longzhigu.com/diannao/js/vue.min.js"></script><script src="https://www.520longzhigu.com/diannao/js/axios.min.js"></script><script src="https://www.520longzhigu.com/diannao/js/vue-axios.min.js"></script><script src="https://www.520longzhigu.com/diannao/js/getParameter.js"></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=https://www.520longzhigu.com/diannao/>{console.log(data.data)this.travel=data.data;//自动播放// clearInterval(timer);this.timer = setInterval(this.auto_play, 2000); //定时器引用方法时，不用加括号})}})

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

js轮播图实现简单代码 轮播图jquery代码( 二 )

js轮播图实现简单代码轮播图jquery代码( 二 )