原生js轮播图--点击左右轮播几张图片

最新推荐文章于 2022-08-21 16:40:26 发布

婷酱酱

最新推荐文章于 2022-08-21 16:40:26 发布

阅读量544

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43221240/article/details/103671892

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

自己尝试用原生js写，但是比较麻烦，自己封装了my$方法，最后还是用了jquery

想法：
1.外面的盒子有一个可视区域，里面的盒子大，点击移动(运用了定位，每次点击left改变)
2.当到达一定条件时，点击事件不可用
3.给ul加过渡属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style type="text/css">
        *{ margin: 0; padding: 0; }
        ul{ list-style: none; }
        a{ text-decoration: none; }
        #warpper{ width: 800px; height: 600px; margin: 20px auto;}
        .container{ width: 100%; height: 100%; overflow: hidden; position: relative; overflow-x: scroll; }
        .imgList{ width: 4000px; position: absolute; z-index: 5; left:0;transition: left 0.5s ease}
        .imgList>li{ float: left; width: 200px; height: 600px; padding-right:100px;}
        .imgList>li>img{ width: 100%; height: 100%; }

        .pre,.next{ position: absolute; top: 275px; background: rgba(220,220,220,0.7); padding: 10px 0; z-index: 100; opacity: 0.6; filter: alpha(opacity=60); }
        .pre:hover,.next:hover{ cursor: pointer; opacity: 1; filter: alpha(opacity=100); }
        .pre{ left: 10px; }
        .next{ right: 10px; }

        .dollList{ width:180px;  position: absolute; z-index: 10; bottom: 20px; left: 310px ; }
        .dollList li{ float: left; margin-right: 10px; }
        .dollList li.sec a{ background: orange; }
        .dollList li a{ width: 15px; height: 15px; background: rgba(230,230,230,0.6); border-radius: 50%; display: inline-block;  }
        .noneClick{
            cursor: not-allowed;pointer-events:none
        }
    </style>
</head>
<body>
    <div id="warpper">
        <div class="container">
            <!-- 图片区域 -->
            <ul class="imgList">
                <li><img src="./images/img1.jpg" alt=""></li>
                <li><img src="./images/img2.jpg" alt=""></li>
                <li><img src="./images/img3.jpg" alt=""></li>
                <li><img src="./images/img4.jpg" alt=""></li>
                <li><img src="./images/img5.jpg" alt=""></li>
            </ul>
            <!-- 左右切换图标 -->
            <img src="./images/img5.jpg" width="40px" height="60px" class="pre">
            <img src="./images/img5.jpg" width="40px" height="60px" class="next">
            <!-- 下方控制图片按钮 -->       
            <ul class="dollList">
                <li class="sec"><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div> 
    </div>
</body>
<script type="text/javascript">
	function my$(str){
		return document.getElementsByClassName(str)[0];
	}
	//左点击事件
	my$("pre").addEventListener('click',function(){
		var num = 0;
        var left = parseInt($(".imgList").css("left"))
		//点击往上走一张图片
		if(left>=0){
			num=0;
		}else{
			num = left+300
		}	
		var str = num+'px'
		$(".imgList").css("left",str);
        addclass(str);
	})
	//右点击事件
	my$("next").addEventListener('click',function(event){
		var num = 0;
		var left = parseInt($(".imgList").css("left"))
        console.log(left);
		//点击往右走一张图片
		if(left<=-600){
            num = -600;
		}else{
			num = left-300
		}		
		var str = num+'px'
		$(".imgList").css("left",str);
        addclass(str);
	})
    function addclass(left){
        if(left>=0){
            $(".pre").addClass("noneClick");
            $(".next").removeClass("noneClick");
    }else if(left<=-600){
        $(".pre").removeClass("noneClick");
            $(".next").addClass("noneClick");
        }else{
            $(".next").removeClass("noneClick");
            $(".pre").removeClass("noneClick");
        }
    }
</script>
</html>