轮播图的几种实现方式

最新推荐文章于 2024-06-17 15:29:34 发布

Londing...

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量3.4k

点赞数 9

分类专栏：前端学习

本文链接：https://blog.csdn.net/grand_brol/article/details/108354853

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、z-index透明度轮播

原理：将所有img元素重叠在一起，为想要展示的图片的z-index属性，设置为最大值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            position: relative;
            width: 500px;
            height: 300px;
            z-index: 10000;
        }
        
        div img {
            position: absolute;
            z-index: 10;
            opacity: 0;
            transition: all 0.5s ease;
        }
        
        div button {
            width: 50px;
            position: absolute;
            z-index: 1000;
            top: 150px;
            cursor: pointer
        }
        
        #btnLeft {
            left: 0;
        }
        
        #btnRignt {
            right: 0;
        }
        
        .active {
            z-index: 1000;
            opacity: 1;
        }
        
        ul {
            position: absolute;
            padding: 0;
            list-style: none;
            z-index: 1000;
            right: 20px;
            bottom: 20px;
            cursor: pointer;
        }
        
        li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 100%;
            margin-right: 10px;
            border: 2px solid black;
        }
        
        .liwhite {
            background-color: white
        }
    </style>
</head>

<body>
    <div id="div">
        <img src="./img/1.jpg" alt="" class="item active">
        <img src="./img/2.jpg" alt="" class="item">
        <img src="./img/3.jpg" alt="" class="item">
        <img src="./img/4.jpg" alt="" class="item">
        <img src="./img/5.jpg" alt="" class="item">
        <button id="btnLeft"><</button>
        <button id="btnRignt">></button>
        <ul>
            <li class="liwhite" data-index="0"></li>
            <li data-index="1"></li>
            <li data-index="2"></li>
            <li data-index="3"></li>
            <li data-index="4"></li>
        </ul>
    </div>
    <script>
        var btnLeft = document.getElementById('btnLeft')
        var btnRignt = document.getElementById('btnRignt')
        var item = document.getElementsByClassName('item')
        var li = document.getElementsByTagName('li')
        var div = document.getElementById('div')
        var index = 0

        //移除所有的active项
        function removeClassActive() {
            for (var i = 0; i < item.length; i++) {
                item[i].className = 'item'
                li[i].className = ''
            }
        }
        btnLeft.onclick = function() {
            if (index <= 0) {
                index = 5
            }
            index--
            goindex()
        }

        function goindex() {
            removeClassActive()
            item[index].className = 'item active'
            li[index].className = 'liwhite'
        }
        btnRignt.onclick = function() {
            if (index >= 4) {
                index = -1
            }
            index++
            // console.log(li)
            goindex()
        }

        function goindex1() {
            if (index >= 4) {
                index = -1
            } else if (index < 0) {
                index = 4
            }
            index++
            goindex()
        }

        //给每一个li挂上一个点击事件

        for (var i = 0; i < li.length; i++) {
            li[i].addEventListener('click', function() {
                // console.log(this.li.indexOf())
                var point = this.getAttribute('data-index')
                index = point
                goindex()
            })
        }
        // console.log(div)
        var timer = setInterval(function() {
            goindex1()
                // 进入
            div.onmouseenter = function() {
                clearInterval(timer);
            }
        }, 1000);

        // 移除
        div.onmouseleave = function() {
            clearInterval(timer);
            timer = setInterval(function() {
                goindex1()
            }, 1000);
        }
    </script>
</body>

</html>

在这里插入图片描述

二、水平轮播
原理：将所有img元素放在一行，通过位移进行切换,通过overflow: hidden; 清除溢出部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		
		div.content{
			position: relative;			
		 overflow: hidden; 
			width: 700px;
			height: 400px;
			border:1px solid beige;
			background-color: aqua;
		}
		ul{
			position: absolute;
			list-style: none;
		}
		ul.top>li{
			float: left;
			width: 700px;
			height: 400px;
		}
		img{
			width: 100%;
			height: 100%;
		}
		button.perv{
			position: absolute;
			top: 191px;
			left:0;
		}
	    button.next{
          
			position: absolute;
			top: 191px;
			right:0;
		}
		ul.bottom{
	
			position: absolute;
			top: 336px;
			left: 20px;
		}
		ul.bottom>li{
			float: left;
			width: 25px;
			height: 25px;
			margin-left:15px;
			border: 1px solid #00FFFF;
			text-align: center;
			line-height: 25px;
			cursor: pointer;
		}
		.red{
			background-color: red;
		}
	</style>
	<script>
		function $(n){
			return document.querySelector(n);
		}
		window.onload=function(){
			var liIndex=1;
			var liWidth,liLenth,lilen,timer,timer2;
			go();
			function go(){
				//复制前后li
				var copy_li1=$(".top>li:first-of-type").cloneNode(true);
				$(".top").appendChild(copy_li1);
				var copy_lilast=$(".top>li:nth-of-type(5)").cloneNode(true);
				$(".top").insertBefore(copy_lilast,$(".top>li:first-of-type"));
				//给ul宽度
				 liWidth=$(".top>li").clientWidth;
			     lilen=document.querySelectorAll(".top>li").length;
				 $(".top").style.width=lilen*liWidth+"px";
                 $(".top").style.left=-liWidth+"px";
				 //左右点击
				$(".perv").onclick=function(){
					prev(liIndex);
				}
				$(".next").onclick=function(){
					next(liIndex);
				}
				//点击子弹
				var bullets=document.querySelectorAll(".bottom>li");
				for(var i=0;i<bullets.length;i++){
					bullets[i].index=i;
					bullets[i].onclick=function(){
						liIndex=this.index+1;
						into(liIndex);
					}
				}
				$(".content").onmouseenter=function(){
					
					  stop();
				}
				$(".content").onmouseleave=function(){
					 auto();
				}
				auto();
			}
			function prev(){
				liIndex--;
				into(liIndex);
			}
			function next(){
				liIndex++;
				into(liIndex);
			}
			function auto(){
				clearInterval(timer2);
				timer2=setInterval(function(){
					next();
				},2000);
			}
			function stop(){		
				clearInterval(timer2);
			}
			function into(index){
				if(index==lilen){
					liIndex=index=2;
					$(".top").style.left=-liWidth+"px";
				}
				if(index==-1){
					liIndex=index=lilen-3;
					$(".top").style.left=-liWidth*(lilen-2)+"px";
				}
				//
				// 焦点映射
				var foucindex;
				var buttle=document.querySelectorAll(".bottom>li");
				if(index==0){
					foucindex=lilen-3;
				}else if(index==lilen-1){
					foucindex=0;
				}else{
					foucindex=index-1;
				}
				
				$(".red").className="";
				buttle[foucindex].className="red";
				//作动画
				var left=-index*liWidth;
				clearInterval(timer);
				timer=setInterval(function(){
					var new_left=parseInt(getComputedStyle($(".top")).left);
					var speed=(left-new_left)/30;
					speed=speed>0?Math.ceil(speed):Math.floor(speed);
					$(".top").style.left=new_left+speed+"px";				
				},10);
				console.log(liIndex);
			}
		}
	</script>
	<body>
		<div class="content">
			<ul class="top">
				<li><img src="img/1.jpg" alt=""></li>
				<li><img src="img/2.jpg" alt=""></li>
				<li><img src="img/3.jpg" alt=""></li>
				<li><img src="img/4.jpg" alt=""></li>
				<li><img src="img/5.jpg" alt=""></li>
			</ul>
			<button class="perv" type="button">perv</button>
			<button class="next" type="button">next</button>
			<ul class="bottom">
				<li class="red">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
	</body>
</html>

Londing...

关注

9
点赞
踩
45

收藏

觉得还不错? 一键收藏
2
评论
轮播图的几种实现方式

一、z-index原理：将所有img元素重叠在一起，为想要展示的图片的z-index属性，设置为最大值。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
复制链接

扫一扫

专栏目录