點擊這裡查看效果(請使用支持HTML5的浏覽器打開)
更多圖片輪播效果
以下是代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>圖片輪播切換·</title><base href="http://" />
<link rel="stylesheet" href="/keleyi/phtml/image/18/styles.css">
<link rel="stylesheet" href="/keleyi/phtml/image/18/pygment_trac.css">
<link href="/keleyi/phtml/image/18/sliderControl.css" rel="stylesheet" type="text/css">
<link href="/keleyi/phtml/image/18/animate.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<!--
<script src="/keleyi/phtml/image/18/respond.js"></script>
-->
<!--[if lt IE 9]>
<script src="/keleyi/phtml/image/18/html5.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="/keleyi/phtml/image/18/ie.css">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style type="text/css">
div{margin:0;padding:0;}
a{color:#9A9A9A; text-decoration:none;outline:none}
a:hover,a:active{color:#FF0000;text-decoration:underline}
#mouseOverleft {
z-index: 200;
}
#mouseOverright{
z-index: 200;
}
#mouseOverleft:hover .pageLeft{
display: block;
}
#mouseOverleft .pageLeft{
display: none;
position:absolute;
left:0;
top:0;
width:100%;
cursor:pointer;
height: 100%;
z-index:201}
.pageLeft span{
float:left;
width:102px;
height:95px;
margin:0 0 0 24px;
display:inline;
background-image: url(/keleyi/phtml/image/18/right.png);
background-repeat: no-repeat;
}
.pageLeft span a{display:block;position:relative;width:102px;height:95px;}
.pageRight span a{display:block;position:relative;width:102px;height:95px;}
#mouseOverright:hover .pageRight{
display: block;
}
#mouseOverright .pageRight{
display: none;
position:absolute;
left:0;
top:0;
width:100%;
cursor:pointer;
height: 100%;
z-index:201
}
.pageRight span{
float:right;
width:102px;
height:95px;
margin:0 24px 0 0;
display:inline;
background-image: url(/keleyi/phtml/image/18/left.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="header">
<div id="title">
<h1>圖片輪播切換·</h1>
<span class="credits right"><a href="http:///a/bjac/exfvkb05.htm" style="color:White">原文</a> 請使用支持HTML5的浏覽器</span>
</div>
</div><!-- end header -->
<div class="wrapper">
<section>
<h2>圖片切換例子</h2>
<div class="checkbox domino">
<input tabindex="3" type="checkbox" id="switch_domino" checked='true'>
<label class="sprite30x30" for="switch_domino">多米諾效果</label>
</div>
<div class="checkbox autoplay">
<input tabindex="4" type="checkbox" id="switch_autoplay" checked='true'>
<label class="sprite30x30" for="switch_autoplay">自動播放</label>
</div>
<div id="main">
<div id="mouseOverleft" style="width:240px;position:absolute;left:0;height:400px;">
<div class="pageLeft" cmd="prev">
<span style="margin-top: 149px;"><a href="javascript:void(0);" cmd="prev" onfocus="this.blur()"></a></span>
</div>
<div class="pageLeft-bg" style="display:none"></div>
</div>
<div id="mouseOverright" style="width:240px;position:absolute;right:0px;height:400px;">
<div class="pageRight" cmd="next">
<span style="margin-top: 149px;"><a href="javascript:void(0);" cmd="next" onfocus="this.blur()"></a></span>
</div>
<div class="pageRight-bg" style="display:none"></div>
</div>
<div id="slide_contrainer">
<img src="http://images.cnblogs.com/cnblogs_com/jihua/541367/o_m1.jpg">
<!--
<img src="http://images.cnblogs.com/cnblogs_com/jihua/541367/o_m2.jpg">
<img src="http://images.cnblogs.com/cnblogs_com/jihua/541367/o_m3.jpg">
<img src="http://images.cnblogs.com/cnblogs_com/jihua/541367/o_m4.jpg">
<img src="http://images.cnblogs.com/cnblogs_com/jihua/541367/o_m5.jpg">
<img src="http://images.cnblogs.com/cnblogs_com/jihua/541367/o_m6.jpg">
<img src="http://images.cnblogs.com/cnblogs_com/jihua/541367/o_m7.jpg">
<img src="http://images.cnblogs.com/cnblogs_com/jihua/541367/o_m8.jpg">
-->
</div>
<div>
設置卡片的維度：
<span id="cardNumber" class="sliderControl"
slideroptions="values= 2 | 4 | 5 | 8 | 10 | 20;value=1;animateclick=false;setter=SetCardNumber">
</span>
</script>
</div>
</div>
<br>
</section>
</div>
<div class="footer">
<div class="copyright">
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
<script src="/keleyi/phtml/image/18/jx.all.js"></script>
<script src="/keleyi/phtml/image/18/jxanimate.js"></script>
<script src="/keleyi/phtml/image/18/jxanimate.effects.js"></script>
<script src="/keleyi/phtml/image/18/jxanimate.audio.js"></script>
<script src="/keleyi/phtml/image/18/slideshow.js"></script>
<script src="/keleyi/phtml/image/18/slideshow.effects.js"></script>
<script src="/keleyi/phtml/image/18/index.js"></script>
<script src="/keleyi/phtml/image/18/PointerDraw.js" type="text/javascript"></script>
<script src="/keleyi/phtml/image/18/sliderControl.js" type="text/javascript"></script>
</div>
</body>
</html>