So wechseln Sie Bilder automatisch oder manuell
Als ich JS lernte, sammelte ich viele interessante kleine Beispiele, aber es fiel mir schwer, einige gute Plattformen zu finden, um diese JS-Effekte zu zeigen, also konnte ich es kaum erwarten, sie mit Ihnen zu teilen. In diesem Artikel stellen wir hauptsächlich den automatischen oder manuellen Bildwechseleffekt von jQuery vor, der einen gewissen Referenzwert hat. Ich hoffe, er kann Ihnen helfen.
Beim Durchsuchen der Websites großer Einkaufszentren oder auf der Homepage einiger Websites werden einige Echtzeit-Umschaltbilder im Zusammenhang mit dieser Website angezeigt. In diesem Artikel wird ein Beispiel für die Verwendung von jQuery zur Realisierung der automatischen Umschaltung vorgestellt von Bildern.
Kerncode der Startseite (Default.aspx):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现图片切换</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/tupianqiehuan.js"></script>
<link rel="stylesheet" type="text/css" href="css/tupianqiehuan.css">
</head>
<body>
<p class="wrapper">
<h1>jquer实现图片切换</h1>
<p id="focus">
<ul>
<li><a href="#" target="_blank"><img src="images/01.jpg" alt="" /></a></li>
<li><a href="#" target="_blank"><img src="images/02.jpg" alt="" /></a></li>
<li><a href="#" target="_blank"><img src="images/03.jpg" alt="" /></a></li>
<li><a href="#" target="_blank"><img src="images/04.jpg" alt="" /></a></li><span style="white-space:pre"> </ul>
</p>
</p>
</body>
</html>CSS-Code (tupianqiehuan.css):
*{margin:0;padding:0;}
body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{zoom:1;}
ul,li{list-style:none;}
img{border:0;}
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;}
/* focus */
#focus{width:800px;height:280px;overflow:hidden;position:relative;}
#focus ul{height:380px;position:absolute;}
#focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}
#focus ul li p{position:absolute;overflow:hidden;}
#focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;}
#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}
#focus .btn span.on{background:#fff;}
#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(http://sandbox.runjs.cn/uploads/rs/475/xaqlrnnr/sprite.png) no-repeat 0 0;cursor:pointer;}
#focus .pre{left:0;}
#focus .next{right:0;background-position:right top;}JS-Code (tupianqiehuan.js):
$(function() {
var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
var len = $("#focus ul li").length; //获取焦点图个数
var index = 0;
var picTimer;
//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = "<p class='btnBg'></p><p class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
}
btn += "</p><p class='preNext pre'></p><p class='preNext next'></p>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);
//为小按钮添加鼠标滑入事件，以显示相应的内容
$("#focus .btn span").css("opacity",0.4).mouseover(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseover");
//上一页、下一页按钮透明度处理
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
//上一页按钮
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});
//下一页按钮
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});
//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$("#focus ul").css("width",sWidth * (len));
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000); //此4000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);//为当前的按钮切换到选中的效果
}
});Verwandte Empfehlungen :
JavaScript-Tutorial – Klicken Sie, um durch die Bilder zu blättern
Einzelbild-Pan-Switching-Implementierungscode
JavaScript implementiert die Bildumschaltung mit der Mausradsteuerung
Das obige ist der detaillierte Inhalt vonSo wechseln Sie Bilder automatisch oder manuell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1379
52
Wie wechsle ich beim Xiaomi 14Ultra zwischen 4g und 5g?
Feb 23, 2024 am 11:49 AM
Xiaomi 14Ultra ist eines der beliebtesten Xiaomi-Modelle in diesem Jahr. Xiaomi 14Ultra verbessert nicht nur den Prozessor und verschiedene Konfigurationen, sondern bringt den Benutzern auch viele neue funktionale Anwendungen beliebt, aber es gibt einige häufig verwendete Funktionen, die Sie vielleicht noch nicht kennen. Wie wechselt das Xiaomi 14Ultra zwischen 4g und 5g? Lassen Sie mich Ihnen unten den spezifischen Inhalt vorstellen! Wie wechsle ich beim Xiaomi 14Ultra zwischen 4g und 5g? 1. Öffnen Sie das Einstellungsmenü Ihres Telefons. 2. Suchen Sie im Einstellungsmenü nach den Optionen „Netzwerk“ und „Mobiles Netzwerk“ und wählen Sie sie aus. 3. In den Mobilfunknetzeinstellungen sehen Sie die Option „Bevorzugter Netztyp“. 4. Klicken oder wählen Sie diese Option und Sie werden sehen
Bedienungs-Tutorial für den Wechsel von der Win11-Home-Version zur Professional-Version_Bedienungs-Tutorial für den Wechsel von der Win11-Home-Version zur Professional-Version
Mar 20, 2024 pm 01:58 PM
Wie konvertiert man Win11 Home Edition in Win11 Professional Edition? Im Win11-System ist es in Home Edition, Professional Edition, Enterprise Edition usw. unterteilt, und auf den meisten Win11-Notebooks ist das Win11 Home Edition-System vorinstalliert. Heute zeigt Ihnen der Editor die Schritte zum Wechsel von der Win11-Home-Version zur Professional-Version 1. Klicken Sie zunächst mit der rechten Maustaste auf diesen Computer auf dem Win11-Desktop und den Eigenschaften. 2. Klicken Sie auf Produktschlüssel ändern oder Windows aktualisieren. 3. Klicken Sie dann nach der Eingabe auf Produktschlüssel ändern. 4. Geben Sie den Aktivierungsschlüssel ein: 8G7XN-V7YWC-W8RPC-V73KB-YWRDB und wählen Sie Weiter. 5. Dann wird der Erfolg angezeigt, sodass Sie die Win11-Home-Version auf die Win11-Professional-Version aktualisieren können.
So implementieren Sie die Dual-System-Umschaltung im Win10-System
Jan 03, 2024 pm 05:41 PM
Viele Freunde sind möglicherweise nicht an das Win-System gewöhnt, wenn sie zum ersten Mal damit in Berührung kommen. Es gibt duale Systeme im Computer. Schauen wir uns nun die detaillierten Schritte zum Wechseln an zwischen den beiden Systemen. So wechseln Sie zwischen zwei Systemen im Win10-System 1. Umschalten der Tastenkombination 1. Drücken Sie die Tasten „win“ + „R“, um „Ausführen“ zu öffnen. 2. Geben Sie „msconfig“ in das Feld „Ausführen“ ein und klicken Sie auf „OK“. 3. Im geöffneten Fenster „ „Systemkonfiguration“ Wählen Sie in der Benutzeroberfläche das gewünschte System aus und klicken Sie auf „Als Standard festlegen“. Nach Abschluss kann „Neustart“ den Wechsel abschließen. Methode 2. Schalter beim Booten auswählen 1. Wenn Sie über duale Systeme verfügen, steht Ihnen eine Auswahloperationsschnittstelle zur Verfügung wird beim Booten angezeigt. Sie können die Auf- und Ab-Tasten der Tastatur verwenden, um das System auszuwählen
Wechseln Sie den Dual-System-Startmodus des Apple-Computers
Feb 19, 2024 pm 06:50 PM
So wechseln Sie beim Start zwischen Apple-Dual-Systemen Als leistungsstarkes Gerät können Apple-Computer zusätzlich zu ihrem eigenen macOS-Betriebssystem auch andere Betriebssysteme wie Windows installieren, um einen Dual-System-Wechsel zu erreichen. Wie wechseln wir also beim Booten zwischen den beiden Systemen? In diesem Artikel erfahren Sie, wie Sie auf Apple-Computern zwischen Dual-Systemen wechseln. Bevor wir Dual-Systeme installieren, müssen wir zunächst bestätigen, ob unser Apple-Computer Dual-System-Switching unterstützt. Im Allgemeinen basieren Apple-Computer auf
Automatische Miniaturbildgenerierung mit JavaScript
Jun 16, 2023 pm 12:51 PM
Mit der Entwicklung des Internets sind Bilder zu einem unverzichtbaren Bestandteil von Webseiten geworden. Da jedoch die Anzahl der Bilder zunimmt, ist die Ladegeschwindigkeit von Bildern zu einem sehr wichtigen Thema geworden. Um dieses Problem zu lösen, verwenden viele Websites Miniaturansichten zum Anzeigen von Bildern. Um Miniaturansichten zu generieren, müssen wir jedoch professionelle Bildverarbeitungstools verwenden, was für einige Laien sehr problematisch ist. Dann ist die Verwendung von JavaScript zur automatischen Generierung von Miniaturansichten eine gute Wahl. So verwenden Sie JavaS
So verwenden Sie Tastenkombinationen zum Wechseln von Arbeitsmappen in Excel
Mar 20, 2024 pm 01:50 PM
Bei der Anwendung von Excel-Software sind wir es gewohnt, Tastenkombinationen zu verwenden, um einige Vorgänge einfacher und schneller zu machen. Wenn wir sie anzeigen, müssen wir ständig zwischen Aufgaben wechseln Durch die schnellere Umschaltmethode wird viel Zeit beim Umschalten eingespart, was erheblich zur Verbesserung der Arbeitseffizienz beiträgt. Um dieses Problem zu lösen, wird der Redakteur heute darüber sprechen : So verwenden Sie die Tastenkombinationen zum Wechseln von Arbeitsmappen in Excel. 1. Zuerst sehen Sie unten in der geöffneten Excel-Tabelle mehrere Arbeitsmappen. Sie müssen schnell zwischen verschiedenen Arbeitsmappen wechseln, wie in der Abbildung unten gezeigt. 2. Drücken Sie dann die Strg-Taste auf der Tastatur, ohne sie zu bewegen, und wählen Sie bei Bedarf den Job rechts aus
Automount-Laufwerke unter Linux
Mar 20, 2024 am 11:30 AM
Wenn Sie ein Linux-Betriebssystem verwenden und möchten, dass das System beim Booten automatisch ein Laufwerk einbindet, können Sie dies tun, indem Sie die eindeutige Kennung (UID) des Geräts und den Einhängepunktpfad zur fstab-Konfigurationsdatei hinzufügen. fstab ist eine Dateisystemtabellendatei, die sich im Verzeichnis /etc befindet. Sie enthält Informationen zu den Dateisystemen, die beim Systemstart gemountet werden müssen. Durch Bearbeiten der fstab-Datei können Sie sicherstellen, dass die erforderlichen Laufwerke bei jedem Systemstart korrekt geladen werden und so einen stabilen Betrieb des Systems gewährleisten. Die automatische Montage von Treibern kann in verschiedenen Situationen bequem eingesetzt werden. Ich habe beispielsweise vor, mein System auf einem externen Speichergerät zu sichern. Um eine Automatisierung zu erreichen, stellen Sie sicher, dass das Gerät auch beim Start mit dem System verbunden bleibt. Ebenso werden viele Anwendungen direkt
Linux-Tipps: Brechen Sie die automatische Einrückung beim Einfügen in vim ab
Mar 07, 2024 am 08:30 AM
Vorwort: vim ist ein leistungsstarkes Textbearbeitungstool, das unter Linux sehr beliebt ist. Kürzlich stieß ich bei der Verwendung von vim auf einem anderen Server auf ein seltsames Problem: Als ich ein lokal geschriebenes Skript kopierte und in eine leere Datei auf dem Server einfügte, kam es zu einer automatischen Einrückung. Um ein einfaches Beispiel zu verwenden: Das Skript, das ich lokal geschrieben habe, lautet wie folgt: aaabbbcccddd Wenn ich den obigen Inhalt kopiere und in eine leere Datei auf dem Server einfüge, erhalte ich Folgendes: aabbbcccddd uns. Einrückung formatieren. Allerdings ist diese Automatik etwas unintelligent. Tragen Sie hier die Lösung ein. Lösung: Legen Sie die .vimrc-Konfigurationsdatei in unserem Home-Verzeichnis fest, neu
