Skip to content

J
joshine
Commit cd3cfc92 by lmf
Options

优化首页轮播图

parent ddcb5bef
Showing with 221 additions and 106 deletions
app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/home.phtml
...@@ -4,126 +4,240 @@ ...@@ -4,126 +4,240 @@
* See COPYING.txt for license details. * See COPYING.txt for license details.
*/ */
?> ?>
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('homepageslider')->toHtml();?> <style>
<script> .banner1,.banner1 >.imgbox, .banner1 >.imgbox > a, .banner1 >.imgbox > a >img{
require([ height: 634px !important;
'jquery' }
], function ($) { input#left,input#right {
function animation(obj, target, callback) {//obj要实现的那个元素， target目标位置 top: 300px !important;
clearInterval(obj.timer);//清除以前的定时器，只保留当前的 padding-top: 2px;
obj.timer = setInterval(function () { }
var step = (target - obj.offsetLeft) / 10; @media (max-width: 768px) {
step = step > 0 ? Math.ceil(step) : Math.floor(step); .banner1,.banner1 >.imgbox, .banner1 >.imgbox > a,.banner1 >.imgbox > a >img{
if (obj.offsetLeft == target) { height: 577px !important;
clearInterval(obj.timer); margin-top:10px;
//回调函数 }
callback && callback(); input#left,input#right{
} else { top: 280px !important;
obj.style.left = obj.offsetLeft + step + 'px'; padding: 1px;
} }
}, 15); }
@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;
}
} }
window.addEventListener('load', function () { </style>
var banner = document.querySelector('.banner'); <div class="banner1"></div>
var prev = document.querySelector('.prev'); <script>
var next = document.querySelector('.next'); require([
var circle = document.querySelector('.gd'); 'jquery'
var bannerWidth = banner.offsetWidth; ], function ($) {
var ul = banner.querySelector('ul'); $.fn.banner = function(options){
var num = 0; var that = this;
options = options || {};
//鼠标移动盒子内让按钮显示 this._obj = {
banner.addEventListener('mouseenter', function () { btn:options.btn===false ? false : true,
prev.style.display = 'block'; list:options.list===false ? false : true,
next.style.display = 'block'; autoPlay:options.autoPlay===false ? false : true,
clearInterval(autoPlay); delayTime:options.delayTime || 2000,
autoPlay = null;//清除定时器 moveTime:options.moveTime || 200,
}) index:options.index || 0,
banner.addEventListener('mouseleave', function () { iPrev:options.img.length-1,
prev.style.display = 'none'; img:options.img || [],
next.style.display = 'none'; href:options.href || [],
autoPlay = setInterval(function () { };
//手动调用点击事件 this._obj.init = function(){
next.click(); var str = ``;
}, 5000); 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({
"width":"100%",
"height":"auto",
position:"relative",
overflow:"hidden"
}).children(".imgbox").css({
"width":"100%",
//设置ul的宽度 }).children("a").css({
var nums = ul.children.length; position: "absolute",
ul.style.width = nums * bannerWidth + 'px'; left:1920,
top:0,
"width":"100%",
//动态创建底部小圆点 }).eq(0).css({
for (var k = 0; k < nums; k++) { left:0
let i = document.createElement('i'); }).end().children("img").css({
circle.appendChild(i); "width":"100%",
i.setAttribute('index', k);
i.addEventListener('click', function () {
num = this.getAttribute('index');
animation(ul, -num * bannerWidth);
currents();
});
}
//为按钮prev，next加事件 });
circle.children[num].className = 'current'; }
//判断有没有执行完动画 this._obj.init();
var flag = true; this._obj.leftClick=function () {
next.addEventListener('click', function () { if (that._obj.index ==0){
if (flag) { that._obj.index = that._obj.img.length-1;
flag = false; that._obj.iPrev=0;
if (num == nums - 1) { }else{
animation(ul, 0); that._obj.index--;
num = 0; that._obj.iPrev=that._obj.index+1;
flag = true;
} else {
num++;
animation(ul, -num * bannerWidth, function () {
flag = true;
});
} }
currents(); that._obj.btnMove(1);
} }
}); this._obj.rightClick=function(){
if (that._obj.index ==that._obj.img.length-1){
that._obj.index = 0;
that._obj.iPrev=that._obj.img.length-1;
}else{
that._obj.index++;
that._obj.iPrev=that._obj.index-1;
}
that._obj.btnMove(-1);
}
if (this._obj.btn){
$("<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)
this._obj.btnMove=function (type) {
let imgs=that.children(".imgbox").children("a");
imgs.eq(this.iPrev).css({
left:0
}).stop().animate({
left:imgs.eq(0).width()*type
},this.moveTime).end().eq(this.index).css({
left:-imgs.eq(0).width()*type
}).stop().animate({
left:0
},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){
let str="";
for (var i=0;i<this._obj.img.length;i++){
str+=`<li></li>`;
}
$("<ul class='list'>").html(str).appendTo(this).css({
margin:0,
padding:0,
listStyle:"none",
width:"100%",
height:40,
bottom:0,
position:"absolute",
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)
}
if ($(this).index()<that._obj.index){
that._obj.listMove($(this).index(),1)
}
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)
prev.addEventListener('click', function () { $(".list").children("li").css("background","rgba(200,200,200,0.6)")
if (flag) { .eq(iNow).css("background","#005caf")
flag = false;
if (num == 0) {
animation(ul, -nums * bannerWidth - 1);
num = nums - 1;
flag = true;
} else {
num--;
animation(ul, -num * bannerWidth, function () {
flag = true;
});
} }
currents();
} }
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 img_arr = ["/media/carousel/pc/1.jpg", "/media/carousel/pc/2.jpg"];
if (isMobile()) {
img_arr = ["/media/carousel/mobile/1.jpg", "/media/carousel/mobile/2.jpg"];
}
$(".banner1").banner({
img: img_arr,
href: ["/shapewear", "/shapewear"],
btn: true,
list: true,
autoPlay: true,
delayTime: 5000,
moveTime: 500,
index: 0
}); });
});
function currents() { function isMobile() {
for (var a = 0; a < nums; a++) { var userAgentInfo = navigator.userAgent;
circle.children[a].className = ''; var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
var mobile_flag = false;
for (var v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
} }
circle.children[num].className = 'current';
} }
//无缝播放 var screen_width = window.screen.width;
var li = ul.children[0].cloneNode(true); var screen_height = window.screen.height;
ul.appendChild(li); if(screen_width < 500 && screen_height < 800){
mobile_flag = true;
//自动播放 }
var autoPlay = setInterval(function () { return mobile_flag;
//手动调用点击事件 }
next.click(); </script>
}, 5000);
})
});
</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();?>
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('flashsaleproduct')->toHtml();?> <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('flashsaleproduct')->toHtml();?>
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_category_thumnail')->toHtml();?> <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_category_thumnail')->toHtml();?>
\ No newline at end of file
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