Skip to content

J
joshine
Commit cd3cfc92 by lmf
Options

优化首页轮播图

parent ddcb5bef
Showing with 216 additions and 101 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{
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>
<div class="banner1"></div>
<script>
require([ require([
'jquery' 'jquery'
], function ($) { ], function ($) {
function animation(obj, target, callback) {//obj要实现的那个元素， target目标位置 $.fn.banner = function(options){
clearInterval(obj.timer);//清除以前的定时器，只保留当前的 var that = this;
obj.timer = setInterval(function () { options = options || {};
var step = (target - obj.offsetLeft) / 10; this._obj = {
step = step > 0 ? Math.ceil(step) : Math.floor(step); btn:options.btn===false ? false : true,
if (obj.offsetLeft == target) { list:options.list===false ? false : true,
clearInterval(obj.timer); autoPlay:options.autoPlay===false ? false : true,
//回调函数 delayTime:options.delayTime || 2000,
callback && callback(); moveTime:options.moveTime || 200,
} else { index:options.index || 0,
obj.style.left = obj.offsetLeft + step + 'px'; iPrev:options.img.length-1,
} img:options.img || [],
}, 15); 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({
"width":"100%",
"height":"auto",
position:"relative",
overflow:"hidden"
}).children(".imgbox").css({
"width":"100%",
window.addEventListener('load', function () { }).children("a").css({
var banner = document.querySelector('.banner'); position: "absolute",
var prev = document.querySelector('.prev'); left:1920,
var next = document.querySelector('.next'); top:0,
var circle = document.querySelector('.gd'); "width":"100%",
var bannerWidth = banner.offsetWidth;
var ul = banner.querySelector('ul');
var num = 0;
//鼠标移动盒子内让按钮显示 }).eq(0).css({
banner.addEventListener('mouseenter', function () { left:0
prev.style.display = 'block'; }).end().children("img").css({
next.style.display = 'block'; "width":"100%",
clearInterval(autoPlay);
autoPlay = null;//清除定时器
})
banner.addEventListener('mouseleave', function () {
prev.style.display = 'none';
next.style.display = 'none';
autoPlay = setInterval(function () {
//手动调用点击事件
next.click();
}, 5000);
});
//设置ul的宽度
var nums = ul.children.length;
ul.style.width = nums * bannerWidth + 'px';
//动态创建底部小圆点
for (var k = 0; k < nums; k++) {
let i = document.createElement('i');
circle.appendChild(i);
i.setAttribute('index', k);
i.addEventListener('click', function () {
num = this.getAttribute('index');
animation(ul, -num * bannerWidth);
currents();
}); });
} }
this._obj.init();
//为按钮prev，next加事件 this._obj.leftClick=function () {
circle.children[num].className = 'current'; if (that._obj.index ==0){
//判断有没有执行完动画 that._obj.index = that._obj.img.length-1;
var flag = true; that._obj.iPrev=0;
next.addEventListener('click', function () { }else{
if (flag) { that._obj.index--;
flag = false; that._obj.iPrev=that._obj.index+1;
if (num == nums - 1) {
animation(ul, 0);
num = 0;
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){
prev.addEventListener('click', function () { that._obj.index = 0;
if (flag) { that._obj.iPrev=that._obj.img.length-1;
flag = false; }else{
if (num == 0) { that._obj.index++;
animation(ul, -nums * bannerWidth - 1); that._obj.iPrev=that._obj.index-1;
num = nums - 1;
flag = true;
} else {
num--;
animation(ul, -num * bannerWidth, function () {
flag = true;
});
} }
currents(); that._obj.btnMove(-1);
} }
}); if (this._obj.btn){
$("<input type='button' id='left' value='<'>").css({
function currents() { left:0,
for (var a = 0; a < nums; a++) { }).appendTo(this).
circle.children[a].className = ''; 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>`;
} }
circle.children[num].className = 'current'; $("<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){
var li = ul.children[0].cloneNode(true); that._obj.listMove($(this).index(),1)
ul.appendChild(li); }
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)")
var autoPlay = setInterval(function () { .eq(iNow).css("background","#005caf")
//手动调用点击事件 }
next.click(); }
}, 5000); 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
});
}); });
</script>
function isMobile() {
var userAgentInfo = navigator.userAgent;
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;
}
}
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>
<?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