jQuery を使用して基本的な Web 画像カルーセルを作成する
まず効果を見てみましょう:
以上です、スクリーンショットはありません~
カルーセル効果分析:
カルーセル効果は、カルーセル画像 (画像またはコンテナ)、カルーセル画像の表示を制御するボタン (左右のボタン)、インデックス ボタン (上記の効果画像の上部にある数字ボタンなど) の 3 つの部分に大別できます。 ) )、カルーセル画像を一定間隔で順番に表示します。
カルーセル画像の表示：表示する必要のあるカルーセル画像を表示し、表示する必要のないカルーセル画像を非表示にし、通常はこれらのカルーセル画像を位置合わせして重ねて表示します。時間。
コントロール ボタン: マウスをクリックするかインデックス ボタン上に移動すると、インデックス位置に対応するカルーセル画像が表示されます。上ボタンと下ボタンは、前後のカルーセル画像の表示を制御します。
その他: 一般に、インデックス ボタンにはアクティブと非アクティブの 2 つの状態があります。自動カルーセルは、マウスがカルーセル画像上を移動すると停止し、マウスが離れると開始します。
カルーセル効果の実装に関する注意:
jquery は、要素を選択するための豊富なセレクターとメソッドを提供しており、これにより開発が大幅に簡素化されます。たとえば、 $(".slider-item").filter(".slider-item-selected") は、現在のアクティブなインデックス ボタンを選択します。
2 つのカルーセル画像の切り替え表示効果は、jquery の fadeOut() メソッドと fadeIn() メソッドによって実現されます。具体的な使用方法については、jquery の API を参照してください。
CSS透明背景の実装：background: rgba(0, 0, 0, 0.2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); (以下の参考情報を参照してください) 、互換性のあるほとんどの主要なブラウザには IE が含まれています。なぜ不透明度を使用しないのでしょうか。不透明度を指定するとテキストが透明になるためです (子要素も透明になります)。
HTML のスケルトンは重要であり、作成した HTML の結果が良好である必要があります。
HTML:
<pre name="code" class="html"><div class="slider"> <div class="slider-extra"> <ul class="slider-nav"> <li class="slider-item">1</li> <li class="slider-item">2</li> <li class="slider-item">3</li> <li class="slider-item">4</li> </ul> <div class="slider-page"> <a class="slider-pre" href="javascript:;;"><</a> <a class="slider-next" href="javascript:;;">></a> </div> </div> </div>
* {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
}
ul {
list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
width: 650px;
height: 413px;
}
.slider {
text-align: center;
margin: 30px auto;
position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
position: absolute;
z-index: 8;
}
.slider-panel {
position: absolute;
}
.slider-panel img {
border: none;
}
.slider-extra {
position: relative;
}
.slider-nav {
margin-left: -51px;
position: absolute;
left: 50%;
bottom: 4px;
}
.slider-nav li {
background: #3e3e3e;
border-radius: 50%;
color: #fff;
cursor: pointer;
margin: 0 2px;
overflow: hidden;
text-align: center;
display: inline-block;
height: 18px;
line-height: 18px;
width: 18px;
}
.slider-nav .slider-item-selected {
background: blue;
}
.slider-page a{
background: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color: #fff;
text-align: center;
display: block;
font-family: "simsun";
font-size: 22px;
width: 28px;
height: 62px;
line-height: 62px;
margin-top: -31px;
position: absolute;
top: 50%;
}
.slider-page a:HOVER {
background: rgba(0, 0, 0, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
left: 100%;
margin-left: -28px;
}
$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已经开始轮播
t = 3000; //轮播时间间隔
length = $('.slider-panel').length;
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
$('.slider-page').hide();
//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop();
$('.slider-page').show();
}, function() {
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e) {
stop();
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
}, function() {
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click', function() {
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {
next();
});
/**
* 向前翻页
*/
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
play(preIndex, currentIndex);
}
/**
* 向后翻页
*/
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
/**
* 从preIndex页翻到currentIndex页
* preIndex 整数，翻页的起始页
* currentIndex 整数，翻到的那页
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
* 开始轮播
*/
function start() {
if(!hasStarted) {
hasStarted = true;
interval = setInterval(next, t);
}
}
/**
* 停止轮播
*/
function stop() {
clearInterval(interval);
hasStarted = false;
}
//开始轮播
start();
});
イベント部分: jquery の hover() を使用してマウスがホバーして離れるときのイベント処理をバインドし、jquery の binding() メソッドを使用してマウス クリック イベントをバインドして、前方、後方、および
を処理します。
カルーセル制御: pre()、next()、play()、start() は自動カルーセルを開始し、stop() は自動カルーセルを停止します。
上記の js は比較的緩く書かれており、構造が貧弱で、読むのに手間がかかり、使いにくく、結合度が高くなります。次の記事では、さまざまな効果、便利な構成、拡張性をカスタマイズできる純粋な jquery カルーセル プラグインを紹介します。
インデックス.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery轮播效果图 - by RiccioZhang</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
}
ul {
list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
width: 650px;
height: 413px;
}
.slider {
text-align: center;
margin: 30px auto;
position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
position: absolute;
z-index: 8;
}
.slider-panel {
position: absolute;
}
.slider-panel img {
border: none;
}
.slider-extra {
position: relative;
}
.slider-nav {
margin-left: -51px;
position: absolute;
left: 50%;
bottom: 4px;
}
.slider-nav li {
background: #3e3e3e;
border-radius: 50%;
color: #fff;
cursor: pointer;
margin: 0 2px;
overflow: hidden;
text-align: center;
display: inline-block;
height: 18px;
line-height: 18px;
width: 18px;
}
.slider-nav .slider-item-selected {
background: blue;
}
.slider-page a{
background: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color: #fff;
text-align: center;
display: block;
font-family: "simsun";
font-size: 22px;
width: 28px;
height: 62px;
line-height: 62px;
margin-top: -31px;
position: absolute;
top: 50%;
}
.slider-page a:HOVER {
background: rgba(0, 0, 0, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
left: 100%;
margin-left: -28px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已经开始轮播
t = 3000; //轮播时间间隔
length = $('.slider-panel').length;
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
$('.slider-page').hide();
//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop();
$('.slider-page').show();
}, function() {
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e) {
stop();
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
}, function() {
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click', function() {
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {
next();
});
/**
* 向前翻页
*/
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
play(preIndex, currentIndex);
}
/**
* 向后翻页
*/
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
/**
* 从preIndex页翻到currentIndex页
* preIndex 整数，翻页的起始页
* currentIndex 整数，翻到的那页
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
* 开始轮播
*/
function start() {
if(!hasStarted) {
hasStarted = true;
interval = setInterval(next, t);
}
}
/**
* 停止轮播
*/
function stop() {
clearInterval(interval);
hasStarted = false;
}
//开始轮播
start();
});
</script>
</head>
<body>
<div class="slider">
<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
<li class="slider-item">4</li>
</ul>
<div class="slider-page">
<a class="slider-pre" href="javascript:;;"><</a>
<a class="slider-next" href="javascript:;;">></a>
</div>
</div>
</div>
</body>
</html>
プラグインを使用する
上記の効果は満足のいくものに見えますが、唯一の欠点は、一部の部分を変更する必要がある場合は、毎回コードをコピーして貼り付ける必要があることです (カルーセル中のアニメーション効果など)。前の記事では、jquery のフェードインおよびフェードアウト効果を使用しています。スライド効果に変更する場合、js コードを変更する必要があります。私がプログラムに慣れていないプログラマーにとって、これらの JS を変更するのは確かに困難です。カルーセル プラグインの目的の 1 つは、プラグインを柔軟に構成できることです (この記事のプラグインに限らず)。プログラマは少量のコードを記述するだけで豊富な機能を実装できます。もちろん良いことです。この記事のカルーセル プラグインの html および css 部分はプログラマー自身が記述する必要がありますが、効果を実現するための js は少量の記述だけで済みます。
ここで使用する zslider プラグインは、GitHub のオープンソースです:
github:https://github.com/ricciozhang/zslider_v1
それでは、コードを見てみましょう:
(function($, window, document) {
//---- Statics
var DEFAULT_ANIMATE_TYPE = 'fade',
ARRAY_SLICE = [].slice,
ARRAY_CONCAT = [].concat
;
//---- Methods
function concatArray() {
var deep = false,
result = [];
if(arguments.length > 0 &&
arguments[arguments.length - 1] === true) {
deep = true;
}
for(var i = 0; i < arguments.length; i++) {
if(!!arguments[i].length) {
if(deep) {
for(var j = 0; j < arguments[i].length; j++) {
//recursive call
result = ARRAY_CONCAT.call(result,
concatArray(arguments[i][j], true));
}
} else {
result = ARRAY_CONCAT.call(result, arguments[i]);
}
} else if(i != arguments.length - 1 ||
(arguments[arguments.length - 1] !== true &&
arguments[arguments.length - 1] !== false)) {
result.push(arguments[i]);
}
}
return result;
}
//----- Core
$.fn.extend({
zslider: function(zsliderSetting, autoStart) {
var itemLenght = 0,
currItemIndex = 0,
started = false,
oInterval = {},
setting = {
intervalTime: 3000,
step: 1,
imagePanels: $(),
animateConfig: {
atype: 'fade',
fadeInSpeed: 500,
fadeOutSpeed: 1000
},
panelHoverStop: true,
ctrlItems: $(),
ctrlItemActivateType: 'hover' || 'click',
ctrlItemHoverCls: '',
flipBtn: {},
panelHoverShowFlipBtn: true,
callbacks: {
animate: null
}
},
that = this
;
//core methods
var slider = {
pre: function() {
var toIndex = itemLenght +
(currItemIndex - setting.step) % itemLenght;
slider.to(toIndex);
},
next: function() {
var toIndex = (currItemIndex + setting.step) % itemLenght;
slider.to(toIndex);
},
to: function(toIndex) {
//handle the index value
if(typeof toIndex === 'function') {
toIndex = toIndex.call(that, concatArray(setting.imagePanels, true),
concatArray(setting.ctrlItems, true),
currItemIndex, step);
}
if(window.isNaN(toIndex)) {
toIndex = 0;
}
toIndex = Math.round(+toIndex) % itemLenght;
if(toIndex < 0) {
toIndex = itemLenght + toIndex;
}
var currentPanel = setting.imagePanels.eq(currItemIndex),
toPanel = setting.imagePanels.eq(toIndex),
currrntCtrlItem = setting.ctrlItems.eq(currItemIndex)
toCtrlItem = setting.ctrlItems.eq(toIndex)
;
if(!setting.callbacks.animate ||
setting.callbacks.animate.call(that,
concatArray(setting.imagePanels, true),
concatArray(setting.ctrlItems, true),
currItemIndex, toIndex) === true) {
currrntCtrlItem.removeClass(setting.ctrlItemHoverCls);
toCtrlItem.addClass(setting.ctrlItemHoverCls);
toPanel.fadeIn(setting.animateConfig.fadeInSpeed);
currentPanel.fadeOut(setting.animateConfig.fadeOutSpeed);
}
//set the current item index
currItemIndex = toIndex;
},
start: function() {
if(!started) {
started = true;
oInterval =
window.setInterval(slider.next, setting.intervalTime);
}
},
stop: function() {
if(started) {
started = false;
window.clearInterval(oInterval);
}
},
isStarted: function() {
return started;
}
};
function initData() {
if(zsliderSetting) {
var temp_callbacks = zsliderSetting.callbacks;
$.extend(setting, zsliderSetting);
$.extend(setting.callbacks, temp_callbacks);
itemLenght = setting.imagePanels.length;
}
//convert to the jquery object
setting.imagePanels = $(setting.imagePanels);
setting.ctrlItems = $(setting.ctrlItems);
setting.flipBtn.container = $(setting.flipBtn.container);
setting.flipBtn.preBtn = $(setting.flipBtn.preBtn);
setting.flipBtn.nextBtn = $(setting.flipBtn.nextBtn);
}
function initLook() {
//show the first image panel and hide other
setting.imagePanels.hide();
setting.imagePanels.filter(':first').show();
//activate the first control item and deactivate other
setting.ctrlItems.removeClass(setting.ctrlItemHoverCls);
setting.ctrlItems.filter(':first').addClass(setting.ctrlItemHoverCls);
$(that).css('overflow', 'hidden');
if(setting.panelHoverShowFlipBtn) {
showFlipBtn(false);
}
}
function initEvent() {
$(concatArray(setting.imagePanels,
setting.flipBtn.preBtn, setting.flipBtn.nextBtn, true)).hover(function() {
if(setting.panelHoverStop) {
slider.stop();
}
if(setting.panelHoverShowFlipBtn) {
showFlipBtn(true);
}
}, function() {
slider.start();
if(setting.panelHoverShowFlipBtn) {
showFlipBtn(false);
}
});
if(setting.ctrlItemActivateType === 'click') {
setting.ctrlItems.unbind('click');
setting.ctrlItems.bind('click', function() {
slider.to($(this).index());
});
} else {
setting.ctrlItems.hover(function() {
slider.stop();
slider.to($(this).index());
}, function() {
slider.start();
});
}
setting.flipBtn.preBtn.unbind('click');
setting.flipBtn.preBtn.bind('click', function() {
slider.pre();
});
setting.flipBtn.nextBtn.unbind('click');
setting.flipBtn.nextBtn.bind('click', function() {
slider.next();
});
}
function init() {
initData();
initLook();
initEvent();
}
function showFlipBtn(show) {
var hasContainer = setting.flipBtn.container.length > 0,
eles;
eles = hasContainer ? setting.flipBtn.container :
//to the dom array:
/*ARRAY_CONCAT.call(ARRAY_SLICE.apply(setting.flipBtn.preBtn),
ARRAY_SLICE.apply(setting.flipBtn.nextBtn));*/
concatArray(setting.flipBtn.preBtn,
setting.flipBtn.nextBtn, true);
if(show) {
$(eles).show();
} else {
$(eles).hide();
}
}
init();
if(arguments.length < 2 || !!autoStart){
slider.start();
}
return slider;
}
});
})(jQuery, window, document);
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7514
15
1378
52
79
11
19
64
小紅書で公開するときに写真が自動的に保存される問題を解決するにはどうすればよいですか?投稿時に自動保存された画像はどこにありますか？
Mar 22, 2024 am 08:06 AM
ソーシャルメディアの継続的な発展に伴い、Xiaohongshu はますます多くの若者が自分たちの生活を共有し、美しいものを発見するためのプラットフォームとなっています。多くのユーザーは、画像を投稿する際の自動保存の問題に悩まされています。では、この問題をどうやって解決すればよいでしょうか? 1.小紅書で公開するときに写真が自動的に保存される問題を解決するにはどうすればよいですか? 1. キャッシュをクリアする まず、Xiaohongshu のキャッシュ データをクリアしてみます。手順は次のとおりです: (1) 小紅書を開いて右下隅の「マイ」ボタンをクリックします。 (2) 個人センター ページで「設定」を見つけてクリックします。 (3) 下にスクロールして「」を見つけます。 「キャッシュをクリア」オプションを選択し、「OK」をクリックします。キャッシュをクリアした後、Xiaohongshu を再起動し、写真を投稿して、自動保存の問題が解決されるかどうかを確認します。 2. 小紅書バージョンを更新して、小紅書が正しく動作することを確認します。
TikTokのコメントに写真を投稿するにはどうすればよいですか?コメント欄の写真への入り口はどこですか？
Mar 21, 2024 pm 09:12 PM
Douyin のショートビデオの人気により、コメント エリアでのユーザーのやり取りがより多彩になりました。ユーザーの中には、自分の意見や感情をよりよく表現するために、コメントで画像を共有したいと考えている人もいます。では、TikTokのコメントに写真を投稿するにはどうすればよいでしょうか?この記事では、この質問に詳しく答え、関連するヒントと注意事項をいくつか紹介します。 1.Douyinのコメントに写真を投稿するにはどうすればよいですか? 1. Douyinを開く: まず、Douyin APPを開いてアカウントにログインする必要があります。 2. コメントエリアを見つける：短いビデオを閲覧または投稿するときに、コメントしたい場所を見つけて「コメント」ボタンをクリックします。 3. コメントの内容を入力します: コメント領域にコメントの内容を入力します。 4. 写真の送信を選択します。コメント内容を入力するインターフェースに「写真」ボタンまたは「+」ボタンが表示されます。
iPhone で写真をより鮮明にする 6 つの方法
Mar 04, 2024 pm 06:25 PM
Apple の最近の iPhone は、鮮明なディテール、彩度、明るさで思い出を捉えます。ただし、場合によっては、画像が鮮明に見えなくなる問題が発生することがあります。 iPhone カメラのオートフォーカスは大きく進歩し、写真をすばやく撮影できるようになりましたが、状況によってはカメラが誤って間違った被写体に焦点を合わせ、不要な領域で写真がぼやけてしまうことがあります。 iPhone 上の写真の焦点が合っていない場合、または全体的に鮮明さが欠けている場合は、次の投稿を参照して写真を鮮明にすることができます。 iPhone で写真を鮮明にする方法 [6 つの方法] ネイティブの写真アプリを使用して写真をクリーンアップしてみることができます。さらに多くの機能やオプションが必要な場合
PPT画像を1枚ずつ表示させる方法
Mar 25, 2024 pm 04:00 PM
PowerPoint では、画像を 1 枚ずつ表示するのが一般的な手法ですが、これはアニメーション効果を設定することで実現できます。このガイドでは、基本的なセットアップ、画像の挿入、アニメーションの追加、アニメーションの順序とタイミングの調整など、この手法を実装する手順について詳しく説明します。さらに、トリガーの使用、アニメーションの速度と順序の調整、アニメーション効果のプレビューなど、高度な設定と調整が提供されます。これらの手順とヒントに従うことで、ユーザーは PowerPoint で次々に表示される画像を簡単に設定できるため、プレゼンテーションの視覚的な効果が高まり、聴衆の注意を引くことができます。
Foxit PDF Reader で PDF ドキュメントを jpg 画像に変換する方法 - Foxit PDF Reader で PDF ドキュメントを jpg 画像に変換する方法
Mar 04, 2024 pm 05:49 PM
Foxit PDF Reader ソフトウェアも使用していますか? Foxit PDF Reader が PDF ドキュメントを jpg 画像に変換する方法をご存知ですか? 次の記事では、Foxit PDF Reader が PDF ドキュメントを jpg 画像に変換する方法について説明します。 jpg画像は以下からご覧ください。まずFoxit PDF Readerを起動し、上部のツールバーで「機能」を見つけ、「PDF to Others」機能を選択します。次に、「Foxit PDF Online Conversion」というWebページを開きます。ページ右上の「ログイン」ボタンをクリックしてログインし、「PDF to Image」機能をオンにしてください。次にアップロードボタンをクリックし、画像に変換したいPDFファイルを追加し、追加後「変換開始」をクリックします。
Web ページ上の画像を読み込めない場合はどうすればよいですか? 6つのソリューション
Mar 15, 2024 am 10:30 AM
一部のネチズンは、ブラウザの Web ページを開いたときに、Web ページ上の画像が長時間読み込めないことに気づきました。何が起こったのでしょうか?ネットワークは正常であることを確認しましたが、どこに問題があるのでしょうか?以下のエディタでは、Web ページの画像が読み込めない問題に対する 6 つの解決策を紹介します。 Web ページの画像を読み込めない: 1. インターネット速度の問題 Web ページに画像が表示されません。これは、コンピュータのインターネット速度が比較的遅く、コンピュータ上で開いているソフトウェアが多いためと考えられます。また、アクセスする画像が比較的大きいため、読み込みタイムアウトが原因である可能性があります。その結果、画像が表示されません。ネットワーク速度をより多く消費するソフトウェアをオフにすることができます。タスク マネージャーに移動して確認できます。 2. 訪問者が多すぎる Web ページに写真が表示されない場合は、訪問した Web ページが同時に訪問されたことが原因である可能性があります。
WPSドキュメントで2つの写真を並べて配置する方法
Mar 20, 2024 pm 04:00 PM
WPS オフィス ソフトウェアを使用すると、使用するフォームは 1 つだけではなく、テキストに表や写真を追加したり、表に写真を追加したりすることもできます。これらをすべて組み合わせて文書全体のコンテンツを作成することができます。文書に 2 つの画像を挿入し、それらを並べて配置する必要がある場合。次のコースでは、この問題を解決します。WPS ドキュメントに 2 つの写真を並べて配置する方法です。 1. まず、WPS ソフトウェアを開き、調整する画像を見つける必要があります。画像を左クリックするとメニューバーが表示されるので「ページレイアウト」を選択します。 2. 文字の折り返しで「タイト折り返し」を選択します。 3. 必要なすべての画像が「テキスト折り返し」に設定されていることを確認したら、画像を適切な位置にドラッグし、最初の画像をクリックします。
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
