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的旋 ...
随机推荐
- php中需要注意的函数（持续更新）
explode 函数 $a = null; explode("#",$a); //不会报错会返回一个只包含空字符串的数组
- extjs layout 最灵活的页面布局样式
当你在页面布局的时候,遇到页面元素较多,不知如何完美布局... 可以试试下面这个类型,万能布局类型. var panel = new Ext.Panel({ renderTo:Ext.getBody( ...
- AetherUpload大文件传输
AetherUpload-Laravel是laravel框架下的一个大文件传输组件 github:https://github.com/peinhu/AetherUpload-Laravel 文件传输 ...
- Shell 编程中的常用工具
文件查找 find 命令 语法格式 find命令总结: 常用选项: -name 查找/etc目录下以conf结尾的文件 find /etc -name "*.conf" -inam ...
- SQL SERVER-Login搬迁脚本
USE master GO IF OBJECT_ID ('sp_hexadecimal') IS NOT NULL DROP PROCEDURE sp_hexadecimal GO CREATE PR ...
- python3 wordcloud词云
wordclou:根据文本生成词云 一.词云设置 wc=WordCloud(width=400, height=200, #画布长.宽,默认(400,200)像素 margin=1, #字与字之间的距 ...
- SpringBoot项目的异常
1.问题描述 创建springcloud 项目时候,main报错: Spring Boot Application in default package less… (Ctrl+F1)Inspecti ...
- 《3+1团队》第七次作业：团队项目设计完善&编码
项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 3+1团队 团队博客地址 https://home.cnblogs.com/u/3-1group ...
- matlab(8) Regularized logistic regression : 不同的λ(0,1,10,100)值对regularization的影响，对应不同的decision boundary\ 预测新的值和计算模型的精度predict.m
不同的λ(0,1,10,100)值对regularization的影响\ 预测新的值和计算模型的精度 %% ============= Part 2: Regularization and Accur ...
- C#获取资源文件
System.Resources.ResourceManager rs = new System.Resources.ResourceManager("NetWebBrowser.Resou ...