js改变透明度实现轮播

最新推荐文章于 2022-02-19 14:09:45 发布

keep789

最新推荐文章于 2022-02-19 14:09:45 发布

阅读量1.3k

点赞数

分类专栏： js 文章标签：透明度轮播

本文链接：https://blog.csdn.net/keep789/article/details/82718386

版权

js 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

在项目中常见的就是轮播图，为开发快速方便，我们常用的就是UI框架提供的Swiper、Carousel、Slider等封装好的轮播插件。但是，用UI框架提供的轮播图的话，一个是如果需要实现的轮播功能效果比较少就显得有点大材小用了，而且会使项目比较大，不大好优化管理；另外一个就是没有透明度的变化的轮播，我找了好几个UI框架都没有找到，最后还是选择了用JS封装了一个，以便后续使用。

js实现透明度轮播
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.homebanner{
		  position: relative;
		  height: 600px;
		  max-width: 1920px;
		}
		.homebanner .homebannerlist{
		  position: relative;
		  width: 100%;
		  height: 600px;
		}
		.homebannerlist li{
		  position: absolute;
		  top: 0;
		  left: 0;
		  display: block;
		  float: left;
		  width: 100%;
		  height: 600px;
		}
		.homebanner_directionnav,.newbanner_directionnav {
		  position: relative;
		  z-index: 10;
		  width: 1140px;
		  margin: 0 auto;
		}
		.homebanner_directionnav{
		  width: auto;
		}
		.homebanner_directionnav .newbanner_next,.homebanner_directionnav .newbanner_prev {
		  position: absolute;
		  top: -390px;
		  width: 42px;
		  height: 113px;
		  cursor: pointer;
		  background:url("images/arrowhead.png") 0 -60px;
		}
		.homebanner_directionnav > .newbanner_prev{
		  left: 114px;
		}
		.homebanner_directionnav > .newbanner_next{
		  background-position: -42px -60px;
		  right: 114px;
		}
		.hide{
		  display: none;
		}
		.homebannernav{
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  z-index: 5;
		  width: 100%;
		  height: 30px;
		  text-align: center;
		}
		.homebannernav li{
		  display: inline-block;
		  zoom: 1;
		  width: 10px;
		  height: 10px;
		  margin: 5px 8px;
		  cursor: pointer;
		  overflow: hidden;
		  text-indent: 18px;
		  background: url("images/shopbanner_hover.png") no-repeat;
		}
		.homebannernav .active{
		  background: url("images/shopbanner_link.png") no-repeat;
		}
	</style>
	<body>
		<div class="homebanner">
		  <ul class="homebannerlist">
		    <li style="background:url('images/1.jpg') center center no-repeat;Zindex:0; opacity:1"></li>
		    <li style="background:url('images/2.jpg') center center no-repeat;Zindex:0; opacity:1"></li>
		  </ul>
		  <ul class="homebannernav">
		    <li class="">1</li>
		    <li class="">2</li>
		  </ul>
		  <div class="homebanner_directionnav">
		    <div id="leftBtn" class="newbanner_prev">&nbsp;</div>
		    <div id="rightBtn" class="newbanner_next">&nbsp;</div>
		  </div>
		</div>
	</body>
	<script type="text/javascript">
	function Broadcast() {
	    //小圆点点亮
		$(".homebannernav li").eq(0).addClass("active");
		var index = 0;
	    var timer = null;
	    $(".homebannernav li").hover(function() {
	        clearInterval(timer);
	        index = $(this).index();
	        $(this).addClass("active").siblings().removeClass("active");
	        $(".homebannerlist li").eq(index).css('opacity', 0).animate({'opacity': 1}, 500);
	        $(".homebannerlist li").eq(index).siblings().css('opacity', 1).animate({'opacity': 0}, 500);
	    }, function() {
	        auto();
	    });
	    
	    auto();
	    //图片自动轮播
		function auto() {
		    timer = setInterval(function() {
	            index++;
	            if (index > 1) {
	                index = 0;
	            }
	            $(".homebannernav li").eq(index).addClass("active").siblings().removeClass("active");
	            $(".homebannerlist li").eq(index).css('opacity', 0).animate({ 'opacity': 1},500);
	            $(".homebannerlist li").eq(index).siblings().css('opacity', 1).animate({ 'opacity': 0}, 500);
	        }, 5000);
	    }
	
		//鼠标移入移除事件
		$(".homebanner").mouseover(function(){
			$("#leftBtn").css("display","block");
			$("#rightBtn").css("display","block");
	        clearInterval(timer);
		});
		$(".homebanner").mouseleave(function(){
			$("#leftBtn").css("display","none");
			$("#rightBtn").css("display","none");
	        timer=setInterval(function() {
	            index++;
	            if (index > 1) {
	                index = 0;
	            }
	            $(".homebannernav li").eq(index).addClass("active").siblings().removeClass("active");
	            $(".homebannerlist li").eq(index).css('opacity', 0).animate({ 'opacity': 1},500);
	            $(".homebannerlist li").eq(index).siblings().css('opacity', 1).animate({ 'opacity': 0}, 500);
	        }, 5000);
		});
	    $("#leftBtn").click(function(){
	        index+=-1;
	        if (index < 0) {
	            index = 1;
	        }
	        $(".homebannernav li").eq(index).addClass("active").siblings().removeClass("active");
	        $(".homebannerlist li").eq(index).css('opacity', 0).animate({ 'opacity': 1},500);
	        $(".homebannerlist li").eq(index).siblings().css('opacity', 1).animate({ 'opacity': 0}, 500);
	    });
	    $("#rightBtn").click(function(){
	        index+=1;
	        if (index > 1) {
	            index = 0;
	        }
	        $(".homebannernav li").eq(index).addClass("active").siblings().removeClass("active");
	        $(".homebannerlist li").eq(index).css('opacity', 0).animate({ 'opacity': 1},500);
	        $(".homebannerlist li").eq(index).siblings().css('opacity', 1).animate({ 'opacity': 0}, 500);
	    })
		
	}
	Broadcast()
	</script>
</html>

keep789

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js改变透明度实现轮播

在项目中常见的就是轮播图，为开发快速方便，我们常用的就是UI框架提供的Swiper、Carousel、Slider等封装好的轮播插件。但是，用UI框架提供的轮播图的话，一个是如果需要实现的轮播功能效果比较少就显得有点大材小用了，而且会使项目比较大，不大好优化管理；另外一个就是没有透明度的变化的轮播，我找了好几个UI框架都没有找到，最后还是选择了用JS封装了一个，以便后续使用。js实现透明度轮...
复制链接

扫一扫

专栏目录