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的旋 ...
随机推荐
- android studio 开发环境配置
android studio 开发环境配置 参考: 第一次使用Android Studio时你应该知道的一切配置 https://www.cnblogs.com/qianguyihao/p/43909 ...
- 基于【 springBoot +springCloud+vue 项目】一 || 项目架构简介
一.前言 基于前期学习以及工作经验积累,持续更新基于springboot+springcloud+vue的demo项目.
- 安卓开发之cache 的使用（图片查看器案例）
package com.lidaochen.test; import android.graphics.Bitmap; import android.graphics.BitmapFactory; i ...
- Javascript的异步与单线程
一.前言 我们都知道,javasript是一个单线程的语言:所谓单线程就是同一时间不能做两件事情,两段代码不能同时执行:因为这种机制,才避免了两段js同时对一个DOM节点进行渲染的冲突.但是也会因此产 ...
- javascript_05-操作符
一元运算符 a++和++a //5 2 3 var a =1; var b = ++a + ++a; console.log(b) //4 1 3 var a =1; var b = a++ + ++ ...
- Python面向对象之多态、封装
一.多态 超过一个子类继承父类,出现了多种的形态. 例如,动物种类出现了多种形态,比如猫.狗.猪 class Animal:pass class Cat(Animal):pass class Dog( ...
- FDD-LTE上下行带宽一样的,为什么上下行流量差别这么大
转:https://zhidao.baidu.com/question/923940070377297579.html 虽然FD系统,上下行使用的带宽一样,但是上下行的信号编码效率完全不同.上行信号( ...
- git管理分支某公司的流程
- k8s的Pod状态和生命周期管理
Pod状态和生命周期管理 一.什么是Pod? 二.Pod中如何管理多个容器? 三.使用Pod 四.Pod的持久性和终止 五.Pause容器 六.init容器 七.Pod的生命周期 (1)Pod p ...
- html简单知识
一.html标签的特征: 1.空白折叠现象 2.对空格和换行不敏感 3.标签要严格封闭 二.p标签的嵌套 p中只能存放字体.图片.表单控件,不能放盒子标签 三.html中标签的分类 1.行内标签 在一 ...