Skip to content

J
joshine
Commit 58d307dc by lmf
Options

优化首页轮播图

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