幻灯片JavaScript特效展示

最新推荐文章于 2023-12-04 15:37:14 发布

Richard_Jason

最新推荐文章于 2023-12-04 15:37:14 发布

阅读量699

点赞数 1

文章标签： html javascript

本文链接：https://blog.csdn.net/Richard_Jason/article/details/52945097

版权

图片地址：http://download.csdn.net/detail/richard_jason/9665575

效果图：

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>幻灯片js特效展示</title>
<style type="text/css">

</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/brand/carousel_min.js"></script>
<script type="text/javascript">
function apawnDone(o,cp){
if(o.className=='apawn'){
$('#mainshow>p:visible').fadeOut(200,function(){$('#mainshow>p').eq(cp-1).fadeIn(200);});
}
}
$(document).ready(function(){
//init #mainshow
$('#mainshow').html($('#gundong .slider').html());
$('#mainshow>p').css('display','none');
$('#mainshow>p:first').css('display','block');
var k=$('#gundong p').length-1;
for(var i=0;i<k;i++){
$('#gundong>div').eq(i).after($('#gundong>div').eq(i).clone(true));
$('#gundong>div').eq(i+1).find('p:first').clone().insertAfter($('#gundong>div').eq(i+1).find('p:last'));
$('#gundong>div').eq(i+1).find('p:first').remove();
}
//start carousel
var autoscroll=true;$('#gundong>.apawn').infiniteCarousel();
$('.huandeng').mouseover(function(){autoscroll=false;}).mouseout(function(){autoscroll=true;});
$('#container a.back').click(function(){$('#gundong>.apawn').trigger('prev');});
$('#container a.forward').click(function(){$('#gundong>.apawn').trigger('next');});
$('#gundong>div').find('img').click(function(){
var sExp="img[src*='"+$(this).attr('src')+"']";
$('#mainshow>p:visible').fadeOut(200,function(){$('#mainshow').find(sExp).parent().parent().fadeIn(200);});
});
window.setInterval(function(){if(autoscroll){$('#gundong>.apawn').trigger('next');}},5000);});</script>
</head>

<body>
<div class="huandeng">
<div id="mainshow"></div>
<div id="container">
<span class="arrows"><a class="arrow back" οnclick="this.blur()" href="#"><img src="images/brand/ax1.gif" /></a></span>

<div id="gundong">
<div class="apawn">
<div class="wrapper">
<div class="slider">
<p>
<a href="#"><img src="images/brand/tmpa.jpg" /></a>
</p>
<p>
<a href="#"><img src="images/brand/tmpb.jpg" /></a>
</p>
<p>
<a href="#"><img src="images/brand/tmpc.jpg" /></a>
</p>
<p>
<a href="#"><img src="images/brand/tmpd.jpg" /></a>
</p>
<p>
<a href="#"><img src="images/brand/tmpe.jpg" /></a>
</p>
<p>
<a href="#"><img src="images/brand/tmpf.jpg" /></a>
</p>
</div>
</div>
</div>
</div>
<span class="arrows arr_r"><a class="arrow forward" οnclick="this.blur()" href="#"><img src="images/brand/ax2.gif" /></a></span>
</div>
</div>
<p style="color:#666; font-size:14px; font-weight:bold; text-align:center;">幻灯片js特效展示</p>
</body>
</html>