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的旋 ...
随机推荐
- Fortify漏洞之Path Manipulation（路径篡改）
继续对Fortify的漏洞进行总结,本篇主要针对 Path Manipulation(路径篡改)的漏洞进行总结,如下: 1.Path Manipulation(路径篡改) 1.1.产生原因: 当满足以 ...
- iOS testflight 使用说明
一.告知开发者苹果手机的账户邮箱 1.通过任何形式告知即可 2.下载testflight 二.开发者发送激活邮件到测试者的账户邮箱 1.进入邮箱查看邮件点击 Accept invitation 进行下 ...
- C#基础 - 定义变量，输入输出
本节课主要讲解C#的发展历史及部分C#语言基础, 主要内容有:控制台程序的创建,输出,输入,定义变量,变量赋值,值覆盖,值拼接,值 打印,两种数据类型,整形类型转换 本节重点难点:定义变量 ...
- outlook配置其他邮箱登录如qq邮箱或登录无邮件信息记录
今天加班想想自己outlook还没登登录过,于是想着登录一下outlook方便管理邮箱信息,才发现原来登录邮箱都要配置,感觉真是醉了.下面开始正式的配置流程. 选择添加账户 首先,点击文件选择账户设置 ...
- 简述FTP的主动模式与被动模式（精简）
一.主被动 主动: 客户端从任意一个大于1024的端口现在假设为1234(非特权端口)连接到服务端的21端口(命令端口),随之客户端监听端口(N+1)即为1235端口(可以理解为这是客户端认定的数据端 ...
- Notes for <<Thinking In Java>>
String Thus, when you create a toString( ) method, if the operations are simple ones that the comp ...
- 别人家的java语言编写的自动化测试系统
https://gitee.com/testdevops/easyrest 但是我还不会用 ~~~~(>_<)~~~~ 目前的状况是:大概知道流程了,可是第一个用例就跑步起来 自己想写一些 ...
- 小程序数据绑定和setData
我们wxml没有直接调用数据的能力,我们的逻辑是通过js调用数据,再由js传递给wxml才能够显示出来.那么怎么由js传递给wxml? 首先我的js里面有这样一段代码 process: funct ...
- MySQL 中 关于 find_in_set 用法
在项目中用的是 EF.MySQL,在查询中用到某一个字段的值在某几个中.一开始想到的是 in. 但是,这个字段是 int 类型的,传入的参数需要用“,”分隔.这样传入的就是字符型的. 这样的结果是:本 ...
- socket、端口、进程的关系
本文属网络编程部分.socket的引入是为了解决不同计算机间进程间通信的问题. 端口是TCP/IP协议中的概念,描述的是TCP协议上的对应的应用,可以理解为基于TCP的系统服务,或者说系统进程!如下图 ...