Слияние кода завершено, страница обновится автоматически
Введение
В веб-странице можно отобразить изображение, которое может быть использовано для полноэкранного изображения на главной странице (с возможностью переключения между несколькими изображениями), фокального изображения или для отображения изображений в альбоме после вторичной разработки!
Адаптация под экраны ПК, мобильных устройств и планшетов!
Комментарии подробные, код не сложный, поддерживается возможность модификации кода новичками по своему усмотрению!
Необходимые плагины: Jquery 1+
Скриншоты:
Каталог:
Просмотр примера кода:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>mybigimgbox 焦点图功能 自适应PC 手机 平板等设备</title>
<style>html,body {padding: 0px;margin: 0px;}</style>
<link href="./css/mybigimgbox.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div class="mybigimgbox" style="display: none;">
<div style="display: none;">
<a href="./" target="_self"><img src="./img/bigimg01.jpg" alt="测试一"></a>
<a href="./" target="_self"><img src="./img/bigimg02.jpg" alt="测试二"></a>
<a href="./" target="_self"><img src="./img/bigimg03.jpg" alt="测试三"></a>
<a href="./" target="_self"><img src="./img/bigimg04.jpg" alt="测试四"></a>
<a href="./" target="_self"><img src="./img/bigimg05.jpg" alt="测试五"></a>
</div>
</div>
<script src="./js/mybigimgbox.js"></script>
</body>
</html>
Рекомендуется загрузить этот проект на локальный компьютер, а затем открыть example/index.html в браузере.
Использование:
Шаг 1: В разделе страницы добавьте следующее:
<link href="./css/mybigimgbox.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
Шаг 2: Добавьте содержимое в раздел страницы.
<div class="mybigimgbox" style="display: none;">
<div style="display: none;">
<a href="./" target="_self"><img src="./img/bigimg01.jpg" alt="测试一"></a>
<a href="./" target="_self"><img src="./img/bigimg02.jpg" alt="测试二"></a>
<a href="./" target="_self"><img src="./img/bigimg03.jpg" alt="测试三"></a>
<a href="./" target="_self"><img src="./img/bigimg04.jpg" alt="测试四"></a>
<a href="./" target="_self"><img src="./img/bigimg05.jpg" alt="测试五"></a>
</div>
</div>
<script src="./js/mybigimgbox.js"></script>
<div class="box">
<div class="mybigimgbox" style="display: none;">
<div style="display: none;">
<a href="./" target="_self"><img src="./img/bigimg01.jpg" alt="测试一"></a>
<a href="./" target="_self"><img src="./img/bigimg02.jpg" alt="测试二"></a>
<a href="./" target="_self"><img src="./img/bigimg03.jpg" alt="测试三"></a>
<a href="./" target="_self"><img src="./img/bigimg04.jpg" alt="测试四"></a>
<a href="./" target="_self"><img src="./img/bigimg05.jpg" alt="测试五"></a>
</div>
</div>
</div>
<script src="./js/mybigimgbox.js"></script>
Обратите внимание: ссылки на файлы CSS и JS должны быть изменены в соответствии с реальной структурой каталогов, и только одна страница может ссылаться на них.
Шаг 3: Измените параметры конфигурации в соответствии с вашими потребностями. Откройте файл ./mybigimgbox.js и внесите изменения.
Шаг 4: Измените содержимое блоков кода:
<a href="./" target="_self"><img src="./img/bigimg01.jpg" alt="测试一"></a>
<a href="./" target="_self"><img src="./img/bigimg02.jpg" alt="测试二"></a>
<a href="./" target="_self"><img src="./img/bigimg03.jpg" alt="测试三"></a>
<a href="./" target="_self"><img src="./img/bigimg04.jpg" alt="测试四"></a>
<a href="./" target="_self"><img src="./img/bigimg05.jpg" alt="测试五"></a>
Обратите внимание, что содержимое тегов A и Img можно изменить, но структура кода должна оставаться неизменной.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )