Jquery幻灯片
JavaScript 2015年4月14日
根据上次编写的简单图片切换扩展而成了一个完整的Jquery幻灯片,还是很简陋,不过该有的功能都有了,在 IE11 和 Firefox 上测试没问题。发布出来供有需要的同学使用,如发现问题请及时反馈。
HTML:
<div class="box">
<div class="picture">
<span class="cur pf"><img src="img_1.jpg"/></span>
<span><img src="img_2.jpg" /></span>
<span><img src="img_3.jpg" /></span>
<span><img src="img_4.jpg" /></span>
</div>
<div class="button">
<div class="bt bf"></div>
<div class="bt"></div>
<div class="bt"></div>
<div class="bt"></div>
</div>
</div>
CSS:
.box{
width: 980px;
height: 475px;
}
.picture{
float: left;
position: absolute;
}
.picture span{
display: none;
float: left;
position: absolute;
}
.picture .pf{
display: block;
}
.button{
float: left;
position: absolute;
margin: 390px 0 0 434px;
}
.button .bf{
opacity: 0.8;
}
.bt{
width: 16px;
height: 16px;
float: left;
border-radius: 8px;
background: #000000;
cursor: pointer;
margin: 0 6px;
opacity: 0.3;
}
JS:
$(document).ready(function(){
var f = setInterval(great, 8000);
function great(){
var i = $('.cur').next().index();
if(i < 0){
$('.button div').css({'opacity':'0.3'});
$('.button div').first().css({'opacity':'0.8'});
$('.picture').find('.cur').removeClass('cur').fadeOut(900);
$('.picture span').first().addClass('cur').fadeIn(900);
}else{
$('.button').children('div').css({'opacity':'0.3'});
$('.button').children('div').eq(i).css({'opacity':'0.8'});
$('.picture').find('.cur').fadeOut().next().fadeIn(900);
$('.picture').find('.cur').removeClass('cur').next(900).addClass('cur');
}
}
$('.bt').click(function(){
var i = $(this).index();
$(this).css({'opacity':'0.8'}).siblings().css({'opacity':'0.3'});
$('.picture').children('span').removeClass('cur').fadeOut(900);
$('.picture').children('span').eq(i).addClass('cur').fadeIn(900);
clearInterval(f);
f = setInterval(great, 8000);
});
});