简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

Bildlaufeffekte

高洛峰
Freigeben： 2017-02-08 10:16:50
Original
2905 Leute haben es durchsucht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>SuperSlide - 图片滚动特效-左</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script>
<script type="text/javascript" src="../jquery.SuperSlide.2.1.1.js"></script>
</head>

<body>



		<style type="text/css">
		/* css 重置 */
		*{margin:0; padding:0; list-style:none; }
		body{ background:#fff; font:normal 12px/22px 宋体;  }
		img{ border:0;  }
		a{ text-decoration:none; color:#333;  }

		/* 本例子css */
		.picScroll-left{ width:450px;  overflow:hidden; position:relative;  border:1px solid #ccc;   }
		.picScroll-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
		.picScroll-left .hd .prev,.picScroll-left .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
			 cursor:pointer; background:url("images/arrow.png") no-repeat;}
		.picScroll-left .hd .next{ background-position:0 -50px;  }
		.picScroll-left .hd .prevStop{ background-position:-60px 0; }
		.picScroll-left .hd .nextStop{ background-position:-60px -50px; }
		.picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
		.picScroll-left .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
		.picScroll-left .hd ul li.on{ background-position:0 0; }
		.picScroll-left .bd{ padding:10px;   }
		.picScroll-left .bd ul{ overflow:hidden; zoom:1; }
		.picScroll-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
		.picScroll-left .bd ul li .pic{ text-align:center; }
		.picScroll-left .bd ul li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
		.picScroll-left .bd ul li .pic a:hover img{ border-color:#999;  }
		.picScroll-left .bd ul li .title{ line-height:24px;   }

		</style>

		<div class="picScroll-left">
			<div class="hd">
				<a class="next"></a>
				<a class="prev"></a>
			</div>
			<div class="bd">
				<ul class="picList">
					<li>
						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
					</li>
					<li>
						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
					</li>
					<li>
						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
					</li>
					<li>
						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
					</li>
					<li>
						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic5.jpg" /></a></div>
						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
					</li>
					<li>
						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic6.jpg" /></a></div>
						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
					</li>
				</ul>
			</div>
		</div>

		<script type="text/javascript">
		jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:3,trigger:"click"});
		</script>



</body>
</html>
Nach dem Login kopieren

Weitere Artikel zu Bildlaufeffekten finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten：
滚动 HTML
Quelle：php.cn
Vorheriger Artikel：Unterschiede zwischen dem -Tag und SVG und VML Nächster Artikel：html+css|Floating und Positionierung von Elementen
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich die Höhe eines äußeren Divs so einstellen, dass sie immer der Höhe eines bestimmten inneren Divs entspricht? Ich habe ein äußeres Div, das drei innere Divs enthält. Ich möchte, dass das ganz linke in...
Aus 2023-11-07 13:59:30
0
2
314
Wie kann verhindert werden, dass die Seite nach Routenänderungen in Nuxt scrollt? Ich habe ein Nuxt-Projekt. Wenn ich die Route von http://localhost:3000/catalog/postery zu...
Aus 2023-11-06 18:56:58
0
1
266
Erstellen Sie mit Vue.js benutzerdefinierte Schaltflächen für die Foliennavigation in Swiper Ich muss die Standardnavigation (nextEl, prevEl) entfernen und die Schaltfläche mit dem Te...
Aus 2023-11-02 14:42:51
0
1
174
Div erfasst das Scrollen mit der Maus Ich habe derzeit eine Seite der Form <divid="content"><divid="cont...
Aus 2023-11-01 18:57:05
0
2
268
Was ist die Standardbreite der „<body>'-Ränder? Was ist der Standardrand, den HTML für seine Tags festlegt? Mir ist aufgefallen, dass es e...
Aus 2023-10-19 21:54:40
0
2
200
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！