tab切换里面做轮播图
这里的轮播图有三页,并且每页的数据有8个,只能将23个数据分割开来,这里要实现5个tab用一个轮播图
<div class="report_detail_class">
<div class="fishqc-tap">
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'fish' && 'active'" ms-click="sortclick(@setting.fish)">最近新测</a>
</div>
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'cosmetic' && 'active'" ms-click="sortclick(@setting.cosmetic)">美妆</a>
</div>
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'motherbaby' && 'active'" ms-click="sortclick(@setting.motherbaby)">母婴</a>
</div>
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'healthcare' && 'active'" ms-click="sortclick(@setting.healthcare)">保健品</a>
</div>
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'food' && 'active'" ms-click="sortclick(@setting.food)">食品/其他</a>
</div>
</div>
<!-- test借用样式 -->
<div ms-if="@currentSelect.key == 'fish'">
<div ms-visible="havadata" class="newhomepagecontain">
<div class="swiper-containerfish">
<div class="swiper-wrapper" style="height: 440px;">
<div class="swiper-slide swiperWidth" >
<div style="width:100%">
<div style="display:inline-block;width:24.9%;float:left;height:217px" ms-for="($index, el) in @slide1">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}" >
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide2">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%" >
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide3">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
<!-- 最后一个加载更多 -->
<div style="display:inline-block;width:25%;float: left;height:217px" >
<a class="img forHover" style="width: 100%;" href="https://product.fishqc.com/product-list" href="javascript:;">
<div class="picContent">
<div style="height:132px;">
<img src="data:image/system/pc/moreInfo.png" alt="" class="productImg" style="height: 70%;vertical-align: middle;padding-top: 20px;">
</div>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">查看更多优品</p>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-paginationfish"></div>
</div>
</div>
</div>
<div ms-if="@currentSelect.key == 'cosmetic'">
<div ms-visible="havadata" class="newhomepagecontain">
<div class="swiper-containercosmetic">
<div class="swiper-wrapper" style="height: 440px;">
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:24.9%;float:left;height:217px" ms-for="($index, el) in @slide1Cosmetic">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide2Cosmetic">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide3Cosmetic">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
<!-- 最后一个加载更多 -->
<div style="display:inline-block;width:25%;float: left;height:217px">
<a class="img forHover" style="width: 100%;" href="https://product.fishqc.com/product-list?product=meizhuang" href="javascript:;">
<div class="picContent">
<div style="height:132px;">
<img src="data:image/system/pc/moreInfo.png" alt="" class="productImg" style="height: 70%;vertical-align: middle;padding-top: 20px;">
</div>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">查看更多优品</p>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-paginationcosmetic"></div>
</div>
</div>
</div>
<div ms-if="@currentSelect.key == 'motherbaby'">
<div ms-visible="havadata" class="newhomepagecontain">
<div class="swiper-containermotherbaby">
<div class="swiper-wrapper" style="height: 440px;">
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:24.9%;float:left;height:217px" ms-for="($index, el) in @slide1Motherbaby">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide2Motherbaby">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide3Motherbaby">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
<!-- 最后一个加载更多 -->
<div style="display:inline-block;width:25%;float: left;height:217px">
<a class="img forHover" style="width: 100%;" href="https://product.fishqc.com/product-list?product=muying" href="javascript:;">
<div class="picContent">
<div style="height:132px;">
<img src="data:image/system/pc/moreInfo.png" alt="" class="productImg" style="height: 70%;vertical-align: middle;padding-top: 20px;">
</div>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">查看更多优品</p>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-paginationmotherbaby"></div>
</div>
</div>
</div>
<div ms-if="@currentSelect.key == 'healthcare'">
<div ms-visible="havadata" class="newhomepagecontain">
<div class="swiper-containerhealthcare">
<div class="swiper-wrapper" style="height: 440px;">
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:24.9%;float:left;height:217px" ms-for="($index, el) in @slide1Healthcare">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide2Healthcare">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide3Healthcare">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
<!-- 最后一个加载更多 -->
<div style="display:inline-block;width:25%;float: left;height:217px">
<a class="img forHover" style="width: 100%;" href="javascript:;" href="https://product.fishqc.com/product-list">
<div class="picContent">
<div style="height:132px;">
<img src="data:image/system/pc/moreInfo.png" alt="" class="productImg" style="height: 70%;vertical-align: middle;padding-top: 20px;">
</div>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">查看更多优品</p>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-paginationhealthcare"></div>
</div>
</div>
</div>
<div ms-if="@currentSelect.key == 'food'">
<div ms-visible="havadata" class="newhomepagecontain">
<div class="swiper-containerfood">
<div class="swiper-wrapper" style="height: 440px;">
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:24.9%;float:left;height:217px" ms-for="($index, el) in @slide1Food">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide2Food">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide3Food">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
<!-- 最后一个加载更多 -->
<div style="display:inline-block;width:25%;float: left;height:217px">
<a class="img forHover" style="width: 100%;" href="https://product.fishqc.com/product-list?product=shipin" href="javascript:;">
<div class="picContent">
<div style="height:132px;">
<img src="data:image/system/pc/moreInfo.png" alt="" class="productImg" style="height: 70%;vertical-align: middle;padding-top: 20px;">
</div>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">查看更多优品</p>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-paginationfood"></div>
</div>
</div>
</div>
</div>
currentSelect: {},
setting: {
fish: {
key: "fish"
},
cosmetic: {
key: "cosmetic"
},
motherbaby: {
key: "motherbaby"
},
healthcare: {
key: "healthcare"
},
food:{
key: "food"
}
},
owlObj: {},
fishlistdata: [],
cosmeticlistdata: [],
motherbabylistdata: [],
foodlistdata: [],
healthcarelistdata: [],
slide1:[],
slide2:[],
slide3:[],
slide1Cosmetic:[],
slide2Cosmetic: [],
slide3Cosmetic: [],
slide1Motherbaby:[],
slide2Motherbaby: [],
slide3Motherbaby: [],
slide1Food:[],
slide2Food: [],
slide3Food: [],
getFutureDate:[],
slide1Healthcare: [],
slide2Healthcare:[],
slide3Healthcare: [],
havadata:false,
sortclick: function (tap) {
zhou.currentSelect = tap;
console.log(tap,'调用1')
zhou.gethomepageProductList(tap.key)
},
Jumpreport: function(type,table,miyao) {
if(type == "pro"){
url = "https://product.fishqc.com/product/"+table+"/"+miyao;
window.open(url);
}else{
url = "https://www.fishqc.com/report-"+table;
window.open(url);
}
return false;
},
// 优品的数据
gethomepageProductList: function (type) {
zhou.havadata = false;
zhou.youloading = true;
$.ajaxSetup({
crossDomain: true,
xhrFields: {
withCredentials: true
}
});
$.get("//product.fishqc.com/homepageProductList", { 'lang': 'chs', 'type': type ,'limit': }, function (data) {
var res = data;
if (res.code == "") {
zhou.youloading = false;
zhou.networkfail = false;
zhou.havadata = true;
console.log(res.data, 'data')
if (type == 'fish') {
res.data.push({ chs_name: '查看更多优品', img: '/image/system/new-arr.png', orgreen: true, url: '//product.fishqc.com/product-list' })
zhou.fishlistdata = res.data
console.log(zhou.fishlistdata,'data')
zhou.slide1=zhou.fishlistdata.slice(,)
zhou.slide2=zhou.fishlistdata.slice(,)
zhou.slide3=zhou.fishlistdata.slice(,)
zhou.getnew(type)
} else if (type == 'cosmetic') {
res.data.push({ chs_name: '查看更多优品', img: '/image/system/new-arr.png', orgreen: true, url: '//product.fishqc.com/product-list?product=meizhuang' })
zhou.cosmeticlistdata = res.data
zhou.slide1Cosmetic = zhou.cosmeticlistdata.slice(, )
zhou.slide2Cosmetic = zhou.cosmeticlistdata.slice(, )
zhou.slide3Cosmetic = zhou.cosmeticlistdata.slice(, )
zhou.getnew(type)
} else if (type == 'motherbaby') {
res.data.push({ chs_name: '查看更多优品', img: '/image/system/new-arr.png', orgreen: true, url: '//product.fishqc.com/product-list?product=muying' })
zhou.motherbabylistdata = res.data
zhou.slide1Motherbaby = zhou.cosmeticlistdata.slice(, )
zhou.slide2Motherbaby = zhou.cosmeticlistdata.slice(, )
zhou.slide3Motherbaby = zhou.cosmeticlistdata.slice(, )
zhou.getnew(type)
} else if (type == 'food') {
res.data.push({ chs_name: '查看更多优品', img: '/image/system/new-arr.png', orgreen: true, url: '//product.fishqc.com/product-list?product=shipin' })
zhou.foodlistdata = res.data
zhou.slide1Food = zhou.cosmeticlistdata.slice(, )
zhou.slide2Food = zhou.cosmeticlistdata.slice(, )
zhou.slide3Food = zhou.cosmeticlistdata.slice(, )
zhou.getnew(type)
} else if (type == 'healthcare') {
res.data.push({ chs_name: '查看更多优品', img: '/image/system/new-arr.png', orgreen: true, url: '//product.fishqc.com/product-list' })
zhou.healthcarelistdata = res.data
zhou.slide1Healthcare = zhou.cosmeticlistdata.slice(, )
zhou.slide2Healthcare = zhou.cosmeticlistdata.slice(, )
zhou.slide3Healthcare = zhou.cosmeticlistdata.slice(, )
zhou.getnew(type)
}
} else {
zhou.youloading = false;
}
}).fail(function () {
zhou.networkfail = true
zhou.youloading = false;
});
},
getnew: function (type) {
console.log('调用了轮播图', type)
zhou.owlObj[type] = new Swiper('.swiper-container' + type, {
pagination: {
el: '.swiper-pagination' + type,
draggable: true,
clickable: true,
},
uniqueNavElements: false,
slidesPerView: ,
slidesPerGroup: ,
});
},
tab切换里面做轮播图的更多相关文章
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 用 CSS 做轮播图
对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...
- React Native 如何做轮播图 react-native-swiper
//:仿饿了么github:https://github.com/stoneWeb/elm-react-native 欢迎各位同学加入: React-Native群:397885169 大前端群:54 ...
- 用avalon框架怎么做轮播图?
avalon这个框架其实特别的小众,做个轮播图呢?在github上的例子只有一个,而且功能特别的少,有的引入的插件与avalon里面的指令又不兼容,所以找了一个owl-carousel,目前实现了移动 ...
- jQuery做轮播图
这是我自己做的一个简单的轮播图,效果图如下: 我觉得轮播图中最主要的是要理解到图片为什么会滑动,是怎么控制的.上面这个我自己做的,是搭好的一个结构,在无序列表中插入需要的图片.然后在插入图片的后面添加 ...
- 做一个vue轮播图组件
根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组, ...
- vue music-抓取歌单列表数据（渲染轮播图）
下载安装新依赖 babel-runtime:对es6语法进行转译 fastclick:对移动端进行点击300毫秒延迟 ,,取消掉 babel-polyfill:API 先添加,在npm install ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
随机推荐
- JavaScript常用节点类型
一.常用节点类型: nodeType:节点类型 nodeName:节点名称 nodeValue:节点值 1.查看节点类型(控制台操作): 获取元素:var p = document.getElemen ...
- RCS版本控制
RCS(Revision Control System)衍生品有两个 SCCS(Source Code Control System) CVS(Concurrent Versions System)是 ...
- 修改mysql/MariaDB数据库的端口号+远程
1.修改端口 2.远程+开放端口 (1)设置远程账号:xxx和密码yyyyyyygrant all privileges on *.* to 'xxx'@'%' identified by 'yyyy ...
- ping IP 带时间戳循环显示并写入日志（windos版+linux版）
在工作中,判断网络是否通畅,首选命令就是ping,但有时候我们需要持续ping一个或多个地址时,需要加 -t 即可,但有时候需要在ping的时候加入时间戳并把ping记录写入到日志里面,方法如下: w ...
- CEIWEI CommMonitor 串口监控精灵v11.0 串口过滤 串口监控
CEIWEI CommMonitor 串行端口监控精灵是用于 RS232 / RS422 / RS485 端口监控的专业 强大的系统实用程序软件.CEIWEI CommMonitor 监控显示, ...
- Go数据类型之基本数据类型
不想沦为芸芸众生的人只需做一件事,便是对自己不再散漫:他应当听从良知的呼唤:“成为你自己!” ---尼采 1.整型 有符号整数类型:int8.int16.int32和int64 无符号整数类型:uin ...
- charles 手机证书下载安装
本文参考:charles 手机证书下载安装 本文的Charles,适应windows/MAC/IOS/Android,避免抓包HTTPS失败和乱码: 用的版本是V4.1.2,其它版本原理类似: cha ...
- PAT基础级-钻石段位样卷2-7-3 大笨钟 (10 分)
微博上有个自称“大笨钟V”的家伙,每天敲钟催促码农们爱惜身体早点睡觉.不过由于笨钟自己作息也不是很规律,所以敲钟并不定时.一般敲钟的点数是根据敲钟时间而定的,如果正好在某个整点敲,那么“当”数就等于那 ...
- 透过CountDownLatch窥探AQS
本文来自公众号“Kahuna”,可搜索Alitaba119,欢迎关注,转载请注明出处,非常感谢 “ A synchronization aid that allows one or more thre ...
- Springboot简单集成ActiveMQ
Springboot简单集成ActiveMQ 消息发送者的实现 pom.xml添加依赖 <dependency> <groupId>org.springframework.bo ...