fn_load_banner();//輪播圖

let $banner = $(".banner");

let $picLi= $(".banner .pic li");

let $prev= $(".banner .prev");

let $next= $(".banner .next");

let $tabLi= $(".banner .tab li");

let index= 0;//小圓點點擊事件

$tabLi.click(function() {

index= $(this).index();

$(this).addClass("active").siblings("li").removeClass("active");

$picLi.eq(index).fadeIn(1500).siblings("li").fadeOut(1500);

});//點擊切換上一張

$prev.click(function() {

index--;if(index < 0){

index= $tabLi.length - 1;

}

$tabLi.eq(index).addClass("active").siblings("li").removeClass("active");

$picLi.eq(index).fadeIn(1500).siblings("li").fadeOut(1500);

}).mousedown(function() {return false;

});//點擊切換下一張

$next.click(auto).mousedown(function(){return false;

})functionauto(){

index++;

index%=$tabLi.length;

$tabLi.eq(index).addClass("active").siblings("li").removeClass("active");

$picLi.eq(index).fadeIn(1500).siblings("li").fadeOut(1500);

}//定時器

let timer = setInterval(auto, 2000);

$banner.hover(function() {

clearInterval(timer);

},function() {

auto();

});functionfn_load_banner(){

$.ajax({

url:"/news/banner/",

type:"GET",

async:false})

.done(function(res) {if(res.errno === "0"){

let content=``;

let tab_content=``;

$(".pic").html("");

$(".tab").html("");

res.data.banner.forEach(function(one_banner, index){//console.log(one_banner);

if(index === 0){

console.log(one_banner);

content=`

`;

tab_content=`

`

}else{

console.log(one_banner);

content=`

`

tab_content=`

`

}

$(".pic").append(content);

$(".tab").append(tab_content);

})

}else{

message.showError(res.errmsg);

}

})

.fail(function(){

message.showError('服務器超時，請重試！');

})

}

總結

以上是生活随笔為你收集整理的django 轮播图上传_django之动态轮播图技术的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。