您的位置:首页 - HTML5
美女图片轮播切换

点击这里查看效果(请使用支持HTML5的浏览器打开)

更多图片轮播效果

以下是代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>图片轮播切换·柯乐义</title><base href="http://keleyi.com" />
<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.com/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://keleyi.com/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">
柯乐义 keleyi.com
</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>
本站导航
相关文章
柯乐义 Copyright© keleyi.com