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 @@
* See COPYING.txt for license details.
*/
?>
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('homepageslider')->toHtml();?>
<script>
require([
'jquery'
], function ($) {
function animation(obj, target, callback) {//obj要实现的那个元素， target目标位置
clearInterval(obj.timer);//清除以前的定时器，只保留当前的
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
//回调函数
callback && callback();
} else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 15);
<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;
}
}
window.addEventListener('load', function () {
var banner = document.querySelector('.banner');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var circle = document.querySelector('.gd');
var bannerWidth = banner.offsetWidth;
var ul = banner.querySelector('ul');
var num = 0;
//鼠标移动盒子内让按钮显示
banner.addEventListener('mouseenter', function () {
prev.style.display = 'block';
next.style.display = 'block';
clearInterval(autoPlay);
autoPlay = null;//清除定时器
})
banner.addEventListener('mouseleave', function () {
prev.style.display = 'none';
next.style.display = 'none';
autoPlay = setInterval(function () {
//手动调用点击事件
next.click();
}, 5000);
});
</style>
<div class="banner1"></div>
<script>
require([
'jquery'
], function ($) {
$.fn.banner = function(options){
var that = this;
options = options || {};
this._obj = {
btn:options.btn===false ? false : true,
list:options.list===false ? false : true,
autoPlay:options.autoPlay===false ? false : true,
delayTime:options.delayTime || 2000,
moveTime:options.moveTime || 200,
index:options.index || 0,
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>`
}
that.html(`<div class="imgbox">${str}</div>`).css({
"width":"100%",
"height":"auto",
position:"relative",
overflow:"hidden"
}).children(".imgbox").css({
"width":"100%",
//设置ul的宽度
var nums = ul.children.length;
ul.style.width = nums * bannerWidth + 'px';
}).children("a").css({
position: "absolute",
left:1920,
top:0,
"width":"100%",
//动态创建底部小圆点
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();
});
}
}).eq(0).css({
left:0
}).end().children("img").css({
"width":"100%",
//为按钮prev，next加事件
circle.children[num].className = 'current';
//判断有没有执行完动画
var flag = true;
next.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == nums - 1) {
animation(ul, 0);
num = 0;
flag = true;
} else {
num++;
animation(ul, -num * bannerWidth, function () {
flag = true;
});
});
}
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;
}
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 () {
if (flag) {
flag = false;
if (num == 0) {
animation(ul, -nums * bannerWidth - 1);
num = nums - 1;
flag = true;
} else {
num--;
animation(ul, -num * bannerWidth, function () {
flag = true;
});
$(".list").children("li").css("background","rgba(200,200,200,0.6)")
.eq(iNow).css("background","#005caf")
}
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() {
for (var a = 0; a < nums; a++) {
circle.children[a].className = '';
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;
}
circle.children[num].className = 'current';
}
//无缝播放
var li = ul.children[0].cloneNode(true);
ul.appendChild(li);
//自动播放
var autoPlay = setInterval(function () {
//手动调用点击事件
next.click();
}, 5000);
})
});
</script>
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_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('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