Dieses Mal werde ich Ihnen zeigen, wie Sie das horizontale Scrollen der jQuery-Fokuskarte implementieren. Was sind die Vorsichtsmaßnahmen für das horizontale Scrollen der jQuery-Fokuskarte?
jQuery Focus Map ist ein Vollbild-Focus Map-Code, der nach links und rechts scrollt, über linke und rechte Schaltflächen verfügt, Miniaturansichten hat und automatisches Karussell unterstützt.
Operationsrendering:
Tipps: Wenn der Browser nicht normal läuft, können Sie versuchen, den Browsermodus zu wechseln.
Der mit Ihnen geteilte jQuery-Vollbild-Fokusbild-Spezialeffektcode für das Links- und Rechtsscrollen lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>住趣家居网满屏jQuery焦点图</title> <link href="css/home.css" rel="stylesheet" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/home.js" type="text/javascript"></script> </head> <body> <p class="zq_homeView" id="jobs_home_homeView"> <p class="zq_pictureBox" node-type="pictureBox"> <p class="zq_pictures" node-type="pictures"> <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="厨房收纳整理工具" src="images/5.jpg" /></a> <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="百搭落地灯" src="images/1.jpg" /></a> <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="百搭落地灯" src="images/2.jpg" /></a> <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="清新格子床品" src="images/3.jpg" /></a> <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="特色墙纸壁纸" src="images/4.jpg" /></a> <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="开放式简约现代一居室装修" src="images/5.jpg" /></a> <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="厨房收纳整理工具" src="images/1.jpg" /></a> </p> <p class='zq_mask zq_maskLeft' node-type="maskLeft"></p> <p class='zq_mask zq_maskRight' node-type="maskRight"></p> </p> <p class="zq_imgBox"> <p class="zq_imgs clearfix"> <a node-type="smallPic" target="_blank" data-index="1" href="http://www.jb51.net/jiaoben/" class="currentImg"><img alt="百搭落地灯" src="images/1.jpg" /></a> <a node-type="smallPic" target="_blank" data-index="2" href="http://www.jb51.net/jiaoben/"><img alt="清新格子床品" src="images/2.jpg" /></a> <a node-type="smallPic" target="_blank" data-index="3" href="http://www.jb51.net/jiaoben/"><img alt="特色墙纸壁纸" src="images/3.jpg" /></a> <a node-type="smallPic" target="_blank" data-index="4" href="http://www.jb51.net/jiaoben/"><img alt="开放式简约现代一居室装修" src="images/4.jpg" /></a> <a node-type="smallPic" target="_blank" data-index="5" href="http://www.jb51.net/jiaoben/"><img alt="厨房收纳整理工具" src="images/5.jpg" /></a> </p> <p class="zq_slides"> <a href="javascript:;" class="zq_slideLeft" action-type="prev"><em> </em></a> <a href="javascript:;" class="zq_slideRight" action-type="next"><em> </em></a> </p> </p> </p> <p style="text-align:center;clear:both"> </p> </body> </html>
Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie hier Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
jQuery erzeugt einen responsiven Bildkarusselleffekt
jquery-Schritte zum Implementieren einer Tabelle mit Kontrollkästchen Ausführliche Erklärung
jQuery-Implementierung der Sammlung von Textschaltflächen-Spezialeffekten in Formularen
Das obige ist der detaillierte Inhalt vonImplementierungsmethode für horizontales Scrollen der jQuery-Fokuskarte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
