jquery实现全屏自适应透明度轮播案例/兼容ie9以上支持移动端

<!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>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #scroll_wrap{
            width: 100vw;
            height: 400px;
            position: relative;
            
        }
        ul{
            position: absolute;
           
        }
        #scroll li{
            list-style: none;
            width: 100vw;
            height:400px;
            text-align: center;
            color: #fff;
            font-size: 32px;
            position: absolute;
            opacity: 0;
        }
       
        #scroll  li:nth-of-type(1){
            background: red;
        }
        #scroll  li:nth-of-type(2){
            background: green;
        }
        #scroll li:nth-of-type(3){
            background: blue;
        }
        #scroll li:nth-of-type(4){
            background: yellow;
        }
        #scroll li:nth-of-type(5){
            background: red;
        }
        .scrollbanner ul .select{
           background:blueviolet;
            
        }
        .scrollbanner ul{
            display: flex;
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        .scrollbanner ul li{
            float: left;
            list-style: none;
            width: 20px;
            height: 20px;
            margin-left:10px; 
            background: #fff;
            cursor: pointer;
           
        }
        .btn{
            position: absolute;
            width: 30px;
            height: 30px;
            color: aqua;
            font-size: 20px;
            line-height: 30px;
            text-align: center;
            background: #fff;
            cursor: pointer;
            display: none;
        }
        .pre{
            top: 50%;
            left: 10px;
        }
        .next{
            top: 50%;
            right: 10px;
        }
    </style>
</head>
<body>
    <div id="scroll_wrap">
        <ul id="scroll">
            <li style="opacity:1">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="btn pre">&lt;</div>
		<div class="btn next">&gt;</div>
 
			<div class="scrollbanner">
				<ul>
					<li class="select"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
    </div>
</body>
<script>
    var num = 0;
	var timer = null;
        // 定时器
	timer = setInterval(function () {
 
		foo();
	}, 2000);
 
	function foo() {
        //图片变化
		num++;
		if (num == 4) {
			num = 0;
		}
		if (num == -1) {
			num = 3;
		}
 
		$("#scroll li").eq(num).stop().animate({ "opacity":1 }, 400,function(){
            $("#scroll li").eq(num).siblings().stop().animate({ "opacity":0 }, 400)
        });
        // 小图标变化
		if (num == 4) {
			$(".scrollbanner li").eq(0).addClass("select").siblings().removeClass("select");
		} else {
			$(".scrollbanner li").eq(num).addClass("select").siblings().removeClass("select");
		}
	}
 
    // 滑入轮播图按钮出现，轮播图静止，离开开启
	$("#scroll_wrap").mouseover(function () {
		clearInterval(timer);
		$(".btn").show();
	});
	$("#scroll_wrap").mouseout(function () {
		$(".btn").hide();
		timer = setInterval(function () {
 
			foo();
		}, 2000);
	});
 
    //前进后退按钮
	$(".pre").click(function () {
		num -= 2;
		foo();
	});
	$(".next").click(function () {
		foo();
	});
    //点击小图标变化至图片
     $(".scrollbanner li").click(function(){
         var i=$(this).index();
         num =i-1;
         foo()
     })
</script>
</html>
jquery实现全屏自适应透明度轮播案例/兼容ie9以上支持移动端

猜你喜欢
