您的位置：首页 > Web前端 > JavaScript

js实现遮罩层幻灯片轮播效果

2017-08-28 23:05 721 查看

效果如下：

代码（需要引入jquery）如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js实现遮罩层幻灯片轮播效果</title>
<style>
*{margin:0;padding:0;}
#banner{position:relative;width:1300px;height:500px;overflow: hidden;}
#banner .box li{display:none;}
#banner .box .active{display:block;}
#banner .box li img{height:500px;width:1300px;}
#banner .state{position:absolute;bottom:0;height:100px;width:1300px;background:#000;opacity:.8;}
#banner .state-img span{display:inline-block;margin-right:10px;margin-top:12px;}
#banner .state-img span img{width:200px;height:75px;opacity: .5;}
#banner .state-img{position:absolute;bottom:0;height:100px;width:1300px;text-align: center;}
#banner .state-img .active img{opacity:1;border:2px solid #FF6633;}
</style>
</head>
<body>
<div id="banner">
<div class="box">
<ul>
<li class="active">
<a href="#"><img src="img/banner01.png"></a>
</li>
<li>
<a href="#"><img src="img/banner02.jpg"></a>
</li>
<li>
<a href="#"><img src="img/banner03.jpg"></a>
</li>
<li>
<a href="#"><img src="img/banner04.jpg"></a>
</li>
</ul>
</div>
<div class="state"></div>
<div class="state-img">
<span class="active"><img src="img/banner01.png"></span>
<span><img src="img/banner02.jpg"></span>
<span><img src="img/banner03.jpg"></span>
<span><img src="img/banner04.jpg"></span>
</div>
</div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
var imgObj = $("#banner .box li");
var num = 0;
var count = imgObj.length;
var stateImg = $(".state-img span");

function autoPlay(){
if(num < count-1){
num++;
//切换显示图片
imgObj.eq(num).fadeIn(1000).siblings().hide();
//切换小图的激活状态
stateImg.eq(num).addClass("active").siblings().removeClass("active");
}else{
num = 0;
imgObj.eq(num).fadeIn(1000).siblings().hide();
stateImg.eq(num).addClass("active").siblings().removeClass("active");
}
}

var timerId = setInterval(autoPlay,3000);

//小图片移入移出事件
stateImg.hover(function(){
clearTimeout(timerId);  //移入清除时间定时器
var index = $(this).index();
num = index;   //重置当前激活的索引
$(this).addClass("active").siblings().removeClass("active");
imgObj.eq(index).fadeIn(1000).siblings().hide();
},function(){
//鼠标移出继续轮播
timerId = setInterval(autoPlay,3000);
});

</script>
</html>

以前在电影网站上经常会看到类似于这样的幻灯片，这种跟普通的幻灯片不一样的地方在于，用了小缩略图作为当前轮播状态，而且当前激活状态为高亮突出显示，其他的是暗淡，就给人突出的感觉，以前以为是用z-index层级属性实现，但是想了好想用opacity属性也可以实现，不兼容（PS:IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。呵呵，留着各位去兼容吧）！

今天七夕，上周买的书刚好到了,另一本是《无人生还》放在公司没拿回阿里，喜欢看书和摄影的我虽然还是单身，收到书后心里还是蛮开心的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航