Django打造大型企业官网(六)
程序员文章站
2022-10-08 20:42:27
4.9.根据轮播图个数修改小圆点数量 src/js/index.js 4.10.小圆点点击事件和自动更新当前选中的小圆点 src/js/index.js src/css/scss.css 4.11.实现自动循环无限轮播 src/js/index.js 4.12.左右牵头切换实现循环轮播 src/js ......
4.9.根据轮播图个数修改小圆点数量
src/js/index.js
function banner() { this.bannerwidth = 798; } banner.prototype.initbanner = function () { var self = this; this.bannerul.css({ "width":self.bannerwidth*self.bannercount }) }; banner.prototype.initpagecontrol = function () { var self = this; var pagecontrol = $(".page-control"); for (var i=0;i<self.bannercount;i++){ var circle = $("<li></li>"); pagecontrol.append(circle); if (i === 0){ circle.addclass("active"); } } pagecontrol.css({"width":self.bannercount*12+8*2+16*(self.bannercount-1)}); }; banner.prototype.run = function () { this.initbanner(); this.initpagecontrol(); this.loop(); this.listenarrowclick(); };
4.10.小圆点点击事件和自动更新当前选中的小圆点
src/js/index.js
function banner() { this.pagecontrol = $(".page-control"); }; banner.prototype.animate = function () { var self = this; self.bannerul.animate({"left":-798*self.index},500); // 通过index获取到当前的li标签,添加active样式,兄弟li标签移除active样式 self.pagecontrol.children('li').eq(self.index).addclass("active").siblings().removeclass("active"); }; banner.prototype.listenpagecontrol = function () { var self = this; self.pagecontrol.children("li").each(function (index,obj) { $(obj).click(function () { self.index = index; self.animate(); }); }); }; banner.prototype.run = function () { this.listenbannerhover(); };
src/css/scss.css
.header{ z-index: 100; .banner-group{ overflow:hidden; z-index: 0;
4.11.实现自动循环无限轮播
src/js/index.js
function banner() { this.index = 1; }; banner.prototype.initbanner = function () { var self = this; //实现无限轮播,原理:123-->>31231,在首尾克隆一张 var firstbanner = self.lilist.eq(0).clone(); var lastbanner = self.lilist.eq(self.bannercount-1).clone(); self.bannerul.append(firstbanner); self.bannerul.prepend(lastbanner); self.bannerul.css({ "width":self.bannerwidth*(self.bannercount+2), "left":-self.bannerwidth, }); }; banner.prototype.animate = function () { var self = this; self.bannerul.animate({"left":-798*self.index},500); //小圆点的active var index = self.index; if(index === 0){ index = self.bannercount-1; }else if(index === self.bannercount+1){ index = 0; }else{ index = self.index - 1; } // 通过index获取到当前的li标签,添加active样式,兄弟li标签移除active样式 self.pagecontrol.children('li').eq(index).addclass("active").siblings().removeclass("active"); }; banner.prototype.loop = function(){ var self = this; this.timer = setinterval(function () { if(self.index >= self.bannercount+1){ self.bannerul.css({ "left":-self.bannerwidth, }); self.index = 2; }else{ self.index++; } self.animate(); },2000); };
4.12.左右牵头切换实现循环轮播
src/js/index.js
banner.prototype.listenarrowclick = function () { var self = this; self.leftarrow.click(function () { if(self.index === 0){ self.bannerul.css({ "left":-self.bannercount*self.bannerwidth, }); self.index = self.bannercount - 1; }else{ self.index --; } self.animate(); }); self.rightarrow.click(function () { if(self.index === self.bannercount + 1){ self.bannerul.css({ "left":-self.bannerwidth, }); self.index = 2; }else{ self.index ++; } self.animate(); }); };