jQuery+css3向右旋转90度幻灯效果

2025-10-05 09:22:36

1、准备好需要用到的图标。

2、新建html文档。

jQuery+css3向右旋转90度幻灯效果

3、书写hmtl代码。

<ul>

<li><img src="images/photos/1.jpg

<li><img src="images/photos/2.jpg

<li><img src="images/photos/3.jpg

<li><img src="images/photos/4.jpg

</ul>

</div>

jQuery+css3向右旋转90度幻灯效果

4、书写css代码。

* { margin: 0; padding: 0; }

html { background: url('../images/page_bg_tile.jpg') #202027; }

body { color: #999; background-image: url('../images/contour.png'), url('../images/page_bg.jpg'); background-repeat: no-repeat, no-repeat; background-position: center 117px, center -200px; font: 15px Calibri, Arial, sans-serif; border: 1px solid transparent; }

#slideShowContainer { width: 510px; height: 510px; position: relative; margin: 20px auto 50px; }

#slideShow { position: absolute; height: 490px; width: 490px; background-color: #fff; margin: 10px 0 0 10px; z-index: 100; -moz-box-shadow: 0 0 10px #111; -box-shadow: 0 0 10px #111; box-shadow: 0 0 10px #111; }

#slideShow ul { position: absolute; top: 15px; right: 15px; bottom: 15px; left: 15px; list-style: none; overflow: hidden; }

#slideShow li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#slideShowContainer > a { border: none; text-decoration: none; text-indent: -99999px; overflow: hidden; width: 36px; height: 37px; background: url('../images/arrows.png') no-repeat; position: absolute; top: 50%; margin-top: -21px; }

#previousLink { left: -38px; }

#previousLink:hover { background-position: bottom left; }

a#nextLink { right: -38px; background-position: top right; }

#nextLink:hover { background-position: bottom right; }

.note { margin-bottom: 40px; text-align: center; }

.credit { font-size: 12px; }

.credit a { color: #bbb !important; }

a, a:visited { text-decoration: underline; outline: none; color: #97CAE6; }

a:hover { text-decoration: none; }

jQuery+css3向右旋转90度幻灯效果