Skip to content

J
joshine
Commit e0caead2 by lmf
Options

升级轮播图

parent 1b58e6a6
Showing with 178 additions and 219 deletions
app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/home.phtml
...@@ -4,240 +4,199 @@ ...@@ -4,240 +4,199 @@
* 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;
}
}
</style> <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('homepageslider')->toHtml();?>
<div class="banner1"></div>
<script> <script>
require([ require([
'jquery' 'jquery'
], function ($) { ],function($,window,document,undefinen){
$.fn.banner = function(options){ $.fn.bannerSwiper=function(option){
var that = this; this.default={
options = options || {}; boxWrap:null,//必填
this._obj = { nextBtn:false,//是否往下启动按钮
btn:options.btn===false ? false : true, prevBtn:false,//是否往上启动按钮
list:options.list===false ? false : true, autoPlay:false,//是否启动自动播放
autoPlay:options.autoPlay===false ? false : true, times:3000,//自动轮播的时间间隔,
delayTime:options.delayTime || 2000, speed:600,//点击按钮是切换的速度
moveTime:options.moveTime || 200, circle:false,//是否启动小圆点
index:options.index || 0, circleAlign:"center",//小圆点的对其方式
iPrev:options.img.length-1, circleClick:false//小圆点是否可以点击
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>`
} }
that.html(`<div class="imgbox">${str}</div>`).css({ var self=this;
"width":"100%", this.time=null;
"height":"auto", this.options=$.extend({},this.default,option);
position:"relative", self.flag=true;
overflow:"hidden" // 插件入口
}).children(".imgbox").css({ this.init=function(){
"width":"100%", this.bulid();
}).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;
} }
that._obj.btnMove(1); this.bulid=function(){
} var self=this;
this._obj.rightClick=function(){ var wrap=self.options.boxWrap;
if (that._obj.index ==that._obj.img.length-1){ self.num=1;
that._obj.index = 0; self.nowTime=+new Date();
that._obj.iPrev=that._obj.img.length-1; self.width=$(window).width();
}else{ var firstImg=$(wrap).find('li').first();
that._obj.index++; var lastImg=$(wrap).find('li').last();
that._obj.iPrev=that._obj.index-1; $(wrap).append(firstImg.clone());
$(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(){
if (this._obj.btn){ self.stops();
$("<input type='button' id='left' value='<'>").css({
left:0,
}).appendTo(this).
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.on("click","#right",that._obj.rightClick) self.on('mouseleave',function(){
this._obj.btnMove=function (type) { self.plays(1);
let imgs=that.children(".imgbox").children("a"); })
imgs.eq(this.iPrev).css({ // 开始计时器，自动轮播
left:0 this.plays=function(){
}).stop().animate({ var self=this;
left:imgs.eq(0).width()*type // self.stops();
},this.moveTime).end().eq(this.index).css({ console.log('play')
left:-imgs.eq(0).width()*type this.time=setInterval(function(){
}).stop().animate({ self.go(-self.width)
left:0 },self.options.times);
},this.moveTime)
if(!this.list) return;
$(".list").children("li").css("background","rgba(200,200,200,0.6)")
.eq(this.index).css("background","#005caf")
} }
} // 停止计时器
if (this._obj.list){ this.stops=function(){
let str=""; console.log('stop');
for (var i=0;i<this._obj.img.length;i++){ clearInterval(self.time)
str+=`<li></li>`; }
// 手动创建按钮元素
this.prevBtn=function(){
var self=this;
var ele=$("<a id='prevBtn'><</a>");
self.append(ele);
$('#prevBtn').bind("click",function(){
self.go(self.width);
})
} }
$("<ul class='list'>").html(str).appendTo(this).css({ // 手动创建按钮元素
margin:0, this.NextBtn=function(){
padding:0, var self=this;
listStyle:"none", var ele=$("<a id='nextBtn'>></a>");
width:"100%", self.append(ele)
height:40, $('#nextBtn').bind("click",function(){
bottom:0, self.go(-self.width);
position:"absolute", })
display:"flex", }
justifyContent:"center", // 手动创建小圆点
lineHeight:"40px", this.circle=function(){
textAlign:"center" var self=this;
}).children("li").css({ var ele=$('<div id="circle-wrap"></div>');
width:40, for(var i=0;i<self.length-2;i++){
height:6, $('<a class="dot" rel="external nofollow" ></a>').appendTo(ele)
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)
} }
if ($(this).index()<that._obj.index){ ele.css({
that._obj.listMove($(this).index(),1) "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()
})
}
// 点击小圆点，图片切换
this.circlePlay=function(){
self.flag=true;
if(self.flag){
self.flag=false;
$(self.options.boxWrap).stop().animate({
'left':-self.num*self.width
},self.options.speed,function(){
self.flag=true;
});
} }
that._obj.index = $(this).index(); self.playCircle(this.num-1);
})
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.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;
});
}
}
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
});
});
function isMobile() { $('#banner').bannerSwiper({
var userAgentInfo = navigator.userAgent; boxWrap:"#banner-wrap",
var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"]; nextBtn:true,
var mobile_flag = false; prevBtn:true,
for (var v = 0; v < mobileAgents.length; v++) { autoPlay:true,
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) { circle:true,
mobile_flag = true; circleClick: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