Skip to content

J
joshine
Commit 05e99940 by dhn
Options

首页banner修改

parent e5dd9e31
Showing with 67 additions and 52 deletions
app/code/Joshine/Banner/view/frontend/templates/index.phtml
...@@ -3,68 +3,82 @@ ...@@ -3,68 +3,82 @@
$collection = $block->getCollection(); $collection = $block->getCollection();
?> ?>
<div class="banner1" style="background-color: #f0f0f0;"></div>
<?php <?php
$_objectManager = \Magento\Framework\App\ObjectManager::getInstance(); //instance of\Magento\Framework\App\ObjectManager $_objectManager = \Magento\Framework\App\ObjectManager::getInstance(); //instance of\Magento\Framework\App\ObjectManager
$storeManager = $_objectManager->get('Magento\Store\Model\StoreManagerInterface'); $storeManager = $_objectManager->get('Magento\Store\Model\StoreManagerInterface');
$currentStore = $storeManager->getStore(); $currentStore = $storeManager->getStore();
$mediaUrl = $currentStore -> getBaseUrl ( \Magento\Framework\UrlInterface :: URL_TYPE_MEDIA ) ; $mediaUrl = $currentStore -> getBaseUrl ( \Magento\Framework\UrlInterface :: URL_TYPE_MEDIA ) ;
?>
<?php foreach ($collection->getItems() as $item):?>
<?php echo $item->getData('name');?>
<?php endforeach;?>
<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Joshine_Banner::css/banner.css'); ?>"> $mobileDetect = $_objectManager->get(\Joshine\Common\Lib\MobileDetect\MobileDetect::class);
<script type="text/javascript"> $isMobile = $mobileDetect->isMobile();
require(['jquery','banner'],function ($){ ?>
var img_arr = <style>
[ .banner,.banner-place,.banner-place li{
<?php foreach ($collection->getItems() as $item):?> width: 100%;
[ }
<?php echo "'".$mediaUrl . $item->getData('img_patch') . "',";?> .cms-index-index .owl-carousel.owl-theme {
<?php echo "'".$mediaUrl . $item->getData('phone_img_patch') . "',";?> margin: 0 auto;
], padding: 0;
<?php endforeach;?> }
]; .cms-index-index .owl-carousel.owl-theme .owl-nav .owl-prev,.cms-index-index .owl-carousel.owl-theme .owl-nav .owl-next{
background-color:#FFFFFF;
border-radius: 22px;
opacity: 0.7;
top:40%;
}
@media (max-width: 768px) {
.cms-index-index .owl-carousel.owl-theme .owl-nav .owl-prev,.cms-index-index .owl-carousel.owl-theme .owl-nav .owl-next{
border-radius: 0px;
padding: 10px 0px 10px 5px;
}
}
</style>
<div class="banner1" style="background-color: #f0f0f0;width:100%;">
<ul class="banner-place owl-carousel owl-theme">
var href = [
<?php foreach ($collection->getItems() as $item):?> <?php foreach ($collection->getItems() as $item):?>
<?php echo "'" . $item->getData('url') . "',";?> <li>
<?php endforeach;?> <a href="<?$item->getData('url')?>">
];
jQuery('.banner1').banner({ <?php if ($isMobile) :?>
img: img_arr, <img class="mobile" src="<?= $mediaUrl . $item->getData('phone_img_patch')?>" alt="" />
href:href, <?php else:?>
btn: true, <img class="pc" src="<?= $mediaUrl . $item->getData('img_patch')?>" alt="" />
list: true, <?php endif; ?>
autoPlay: true, </a>
delayTime: 5000, </li>
moveTime: 500, <?php endforeach;?>
index: 0 </ul>
}); </div>
<script>
window.onload = function (){ // <![CDATA[
var h_max = 0; require(['jquery', 'jquery.owlCarousel'], function ($) {
var isMobile = window.matchMedia("(pointer:coarse)").matches;
$('.top_banner').each(function (i,v){ var el = $('.banner-place');
var h = $(this).height(); var owl = el.owlCarousel({
h_max = h > h_max ? h : h_max; nav: true,
navText: [],
autoplay:true,
autoplayTimeout:3000,
loop: true,
dots: true,
dotsEach:1,
dotsSpeed:2,
items: 1,
center: false,
slideBy: 1
}); });
if(isMobile)
if (h_max > 0){ {
$('.banner1').height(h_max); $('.owl-nav .owl-prev').html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke-width="1.5" d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"></path></svg>')
$('.banner1').css('line-height',h_max+'px'); $('.owl-nav .owl-next').html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke-width="1.5" d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"></path></svg>')
var buttonTop = h_max/2;
$('#left').css({'top':buttonTop,'line-height': 0});
$('#right').css({'top':buttonTop,'line-height': 0});
} }
if (img_arr.length <= 1){ else
$('.banner1 .list').hide(); {
$('#left').hide(); $('.owl-nav .owl-prev').html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke-width="1.5" d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"></path></svg>')
$('#right').hide(); $('.owl-nav .owl-next').html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke-width="1.5" d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"></path></svg>')
} }
} });
}); // ]]>
</script> </script>
\ 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