Heim > Artikel > Web-Frontend > Bildlaufeffekte
Bildlaufeffekte
- 高洛峰Original
- 2017-02-08 10:16:502975Durchsuche
<!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>
Weitere Artikel zu Bildlaufeffekten finden Sie auf der chinesischen PHP-Website!
Stellungnahme：
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
Vorheriger Artikel：Unterschiede zwischen dem Nächster Artikel：Unterschiede zwischen dem