Skip to content

J
joshine
Commit 453b8855 by lmf
Options

恢复之前轮播图

parent e0caead2
Showing with 219 additions and 178 deletions
app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/home.phtml
...@@ -4,199 +4,240 @@ ...@@ -4,199 +4,240 @@
* See COPYING.txt for license details. * See COPYING.txt for license details.
*/ */
?> ?>
<style>
.banner1,.banner1 >.imgbox, .banner1 >.imgbox > a, .banner1 >.imgbox > a >img{
height: 634px !important;
}
input#left,input#right {
top: 300px !important;
padding-top: 2px;
}
@media (max-width: 768px) {
.banner1,.banner1 >.imgbox, .banner1 >.imgbox > a,.banner1 >.imgbox > a >img{
height: 577px !important;
margin-top:10px;
}
input#left,input#right{
top: 280px !important;
padding: 1px;
}
}
@media (max-width: 1024px) {
.rating-result::before, .rating-result>span::before {
-webkit-mask-size: 1rem 1rem;
}
.rating-result{
width: 5rem;
height: 1rem;
}
p.flashsale-title{
font-size: 18px;
}
}
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('homepageslider')->toHtml();?> </style>
<div class="banner1"></div>
<script> <script>
require([ require([
'jquery' 'jquery'
],function($,window,document,undefinen){ ], function ($) {
$.fn.bannerSwiper=function(option){ $.fn.banner = function(options){
this.default={ var that = this;
boxWrap:null,//必填 options = options || {};
nextBtn:false,//是否往下启动按钮 this._obj = {
prevBtn:false,//是否往上启动按钮 btn:options.btn===false ? false : true,
autoPlay:false,//是否启动自动播放 list:options.list===false ? false : true,
times:3000,//自动轮播的时间间隔, autoPlay:options.autoPlay===false ? false : true,
speed:600,//点击按钮是切换的速度 delayTime:options.delayTime || 2000,
circle:false,//是否启动小圆点 moveTime:options.moveTime || 200,
circleAlign:"center",//小圆点的对其方式 index:options.index || 0,
circleClick:false//小圆点是否可以点击 iPrev:options.img.length-1,
img:options.img || [],
href:options.href || [],
};
this._obj.init = function(){
var str = ``;
for(var i=0;i<this.img.length;i++){
str += `<a href="${this.href[i]}"><img src="${this.img[i]}"></a>`
} }
var self=this; that.html(`<div class="imgbox">${str}</div>`).css({
this.time=null; "width":"100%",
this.options=$.extend({},this.default,option); "height":"auto",
self.flag=true; position:"relative",
// 插件入口 overflow:"hidden"
this.init=function(){ }).children(".imgbox").css({
this.bulid(); "width":"100%",
}).children("a").css({
position: "absolute",
left:1920,
top:0,
"width":"100%",
}).eq(0).css({
left:0
}).end().children("img").css({
"width":"100%",
});
}
this._obj.init();
this._obj.leftClick=function () {
if (that._obj.index ==0){
that._obj.index = that._obj.img.length-1;
that._obj.iPrev=0;
}else{
that._obj.index--;
that._obj.iPrev=that._obj.index+1;
} }
this.bulid=function(){ that._obj.btnMove(1);
var self=this; }
var wrap=self.options.boxWrap; this._obj.rightClick=function(){
self.num=1; if (that._obj.index ==that._obj.img.length-1){
self.nowTime=+new Date(); that._obj.index = 0;
self.width=$(window).width(); that._obj.iPrev=that._obj.img.length-1;
var firstImg=$(wrap).find('li').first(); }else{
var lastImg=$(wrap).find('li').last(); that._obj.index++;
$(wrap).append(firstImg.clone()); that._obj.iPrev=that._obj.index-1;
$(wrap).prepend(lastImg.clone());
self.length=$(wrap).find('li').length;
$(wrap).width(self.width*self.length);
$(wrap).find('li').width(self.width)
$(wrap).parent().height(480);
$(wrap).parent().width(self.width);
$(wrap).css({'left':-self.width*self.num})
// 是否启动自动轮播
if(self.options.autoPlay){
self.plays();
}
// 是否启动按钮
if(self.options.nextBtn){
self.NextBtn();
}
// 是否启动按钮
if(self.options.prevBtn){
self.prevBtn();
}
// 是否启动小圆点
if(self.options.circle){
self.circle()
}
if(self.options.circleClick){
self.clickCircle();
}
} }
// // 鼠标移入时 that._obj.btnMove(-1);
self.on('mouseenter',function(){ }
self.stops(); if (this._obj.btn){
}) $("<input type='button' id='left' value='<'>").css({
// 鼠标移出时 left:0,
self.on('mouseleave',function(){ }).appendTo(this).
self.plays(1); after($("<input type='button' id='right' value='>'>").css({
right:0,
})).parent()
.children("input").css({
position:"absolute",
top:130,
width:30,
height:30,
border:"none",
background:"rgba(200,200,200,0.5)",
borderRadius:"50%",
color:"#ffffff"
}) })
// 开始计时器，自动轮播 this.on("click","#left",that._obj.leftClick)
this.plays=function(){ this.on("click","#right",that._obj.rightClick)
var self=this; this._obj.btnMove=function (type) {
// self.stops(); let imgs=that.children(".imgbox").children("a");
console.log('play') imgs.eq(this.iPrev).css({
this.time=setInterval(function(){ left:0
self.go(-self.width) }).stop().animate({
},self.options.times); left:imgs.eq(0).width()*type
} },this.moveTime).end().eq(this.index).css({
// 停止计时器 left:-imgs.eq(0).width()*type
this.stops=function(){ }).stop().animate({
console.log('stop'); left:0
clearInterval(self.time) },this.moveTime)
} if(!this.list) return;
// 手动创建按钮元素 $(".list").children("li").css("background","rgba(200,200,200,0.6)")
this.prevBtn=function(){ .eq(this.index).css("background","#005caf")
var self=this;
var ele=$("<a id='prevBtn'><</a>");
self.append(ele);
$('#prevBtn').bind("click",function(){
self.go(self.width);
})
} }
// 手动创建按钮元素 }
this.NextBtn=function(){ if (this._obj.list){
var self=this; let str="";
var ele=$("<a id='nextBtn'>></a>"); for (var i=0;i<this._obj.img.length;i++){
self.append(ele) str+=`<li></li>`;
$('#nextBtn').bind("click",function(){
self.go(-self.width);
})
}
// 手动创建小圆点
this.circle=function(){
var self=this;
var ele=$('<div id="circle-wrap"></div>');
for(var i=0;i<self.length-2;i++){
$('<a class="dot" rel="external nofollow" ></a>').appendTo(ele)
}
ele.css({
"position":"absolute",
'bottom':'0',
'right':'0',
'left':'0',
'height':'20px',
"padding":"0 10px",
'text-align':self.options.circleAlign
});
self.append(ele);
self.playCircle(this.num-1);
}
//小圆点指定当前项
this.playCircle=function(num){
$('#circle-wrap').find('.dot').eq(num).addClass('on').siblings().removeClass('on');
}
// 点击小圆点
this.clickCircle=function(){
var self=this;
$('#circle-wrap').find('.dot').on('click',function(){
self.num=$(this).index()+1;
self.circlePlay()
})
} }
// 点击小圆点，图片切换 $("<ul class='list'>").html(str).appendTo(this).css({
this.circlePlay=function(){ margin:0,
self.flag=true; padding:0,
if(self.flag){ listStyle:"none",
self.flag=false; width:"100%",
$(self.options.boxWrap).stop().animate({ height:40,
'left':-self.num*self.width bottom:0,
},self.options.speed,function(){ position:"absolute",
self.flag=true; display:"flex",
}); justifyContent:"center",
lineHeight:"40px",
textAlign:"center"
}).children("li").css({
width:40,
height:6,
background:"rgba(200,200,200,0.6)",
margin:"0 5px",
textAlign: "center",
cursor:"pointer"
}).eq(0).css({
background:"#005caf"
}).end().click(function () {
if ($(this).index()>that._obj.index){
that._obj.listMove($(this).index(),-1)
} }
self.playCircle(this.num-1); if ($(this).index()<that._obj.index){
} that._obj.listMove($(this).index(),1)
// 点击按钮，进行轮播,以及自动轮播
this.go=function(offset){
var self=this;
if(self.flag){
self.flag=false;
if(offset<0){
self.num++;
if(self.num>self.length-2){
self.num=1;
}
}
if(offset>0){
self.num--;
if(self.num<=0){
self.num=self.length-2
}
}
if(Math.ceil($(self.options.boxWrap).position().left)<-(self.length-2)*self.width){
$(self.options.boxWrap).css({
'left':-self.width
});
}
if(Math.ceil($(self.options.boxWrap).position().left)>-self.length){
$(self.options.boxWrap).css({
'left':-self.width*(self.length-2)
})
}
self.playCircle(this.num-1);
$(self.options.boxWrap).stop().animate({
'left':$(self.options.boxWrap).position().left+offset
},self.options.speed,function(){
self.flag=true;
});
} }
that._obj.index = $(this).index();
})
this._obj.listMove=function (iNow,type) {
let imgs=that.children(".imgbox").children("a");
imgs.eq(this.index).css({
left:0
}).stop().animate({
left:imgs.eq(0).width()*type
},this.moveTime).end().eq(iNow).css({
left:-imgs.eq(0).width()*type
}).stop().animate({
left:0
},this.moveTime)
$(".list").children("li").css("background","rgba(200,200,200,0.6)")
.eq(iNow).css("background","#005caf")
} }
this.init();
} }
if (this._obj.autoPlay){
this._obj.t=setInterval(()=>{
this._obj.rightClick();
},this._obj.delayTime);
this.hover(function () {
clearInterval(that._obj.t)
},function () {
that._obj.t=setInterval(()=>{
that._obj.rightClick();
},that._obj.delayTime);
})
}
}
var image_list = "hello ";
console.log(image_list);
var img_arr = ["/media/carousel/pc/1.png", "/media/carousel/pc/2.png"];
if (isMobile()) {
img_arr = ["/media/carousel/mobile/1.png", "/media/carousel/mobile/2.png"];
}
$(".banner1").banner({
img: img_arr,
href: ["/shapewear", "/shapewear"],
btn: true,
list: true,
autoPlay: true,
delayTime: 5000,
moveTime: 500,
index: 0
});
});
$('#banner').bannerSwiper({ function isMobile() {
boxWrap:"#banner-wrap", var userAgentInfo = navigator.userAgent;
nextBtn:true, var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
prevBtn:true, var mobile_flag = false;
autoPlay:true, for (var v = 0; v < mobileAgents.length; v++) {
circle:true, if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
circleClick:true mobile_flag = true;
}) break;
}) }
}
var screen_width = window.screen.width;
var screen_height = window.screen.height;
if(screen_width < 500 && screen_height < 800){
mobile_flag = true;
}
return mobile_flag;
}
</script> </script>
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_top_category_thumnail')->toHtml();?> <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_top_category_thumnail')->toHtml();?>
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_new_arrivals')->toHtml();?> <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_new_arrivals')->toHtml();?>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment