完整轮播图代码

最新推荐文章于 2024-01-27 01:20:09 发布
最新推荐文章于 2024-01-27 01:20:09 发布
阅读量7.1w 收藏 93
点赞数 27
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiweichenji/article/details/79243635
版权 
<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        *{ padding:0; margin:0; list-style:none; border:0;}
        .all{
            width:500px;
            height:200px;
            padding:7px;
            border:1px solid #ccc;
            margin:100px auto;
            position:relative;
        }
        .screen{
            width:500px;
            height:200px;
            overflow:hidden;
            position:relative;
        }
        .screen li{ width:500px; height:200px; overflow:hidden; float:left;}
        .screen ul{ position:absolute; left:0; top:0px; width:3000px;}
        .all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}
        .all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}
        .all ol li.current{ background:yellow;}

        #arr {display: none;}
        #arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;}
        #arr #right{right:5px; left:auto;}
    </style>

    <script>
        window.onload = function () {
            //需求：无缝滚动。
            //思路：赋值第一张图片放到ul的最后，然后当图片切换到第五张的时候
            //     直接切换第六章，再次从第一张切换到第二张的时候先瞬间切换到
            //     第一张图片，然后滑动到第二张
            //步骤：
            //1.获取事件源及相关元素。（老三步）
            //2.复制第一张图片所在的li,添加到ul的最后面。
            //3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。
            //4.鼠标放到ol的li上切换图片
            //5.添加定时器
            //6.左右切换图片（鼠标放上去隐藏，移开显示）
            var screen = document.getElementById("screen");
            var ul = screen.children[0];
            var ol = screen.children[1];
            var div = screen.children[2];
            var imgWidth = screen.offsetWidth;

            //2
            var tempLi = ul.children[0].cloneNode(true);
            ul.appendChild(tempLi);
            //3
            for(var i = 0; i < ul.children.length - 1; i++) {
                var newOlLi = document.createElement("li");
                newOlLi.innerHTML = i + 1;
                ol.appendChild(newOlLi);
            }
            var olLiArr = ol.children;
            olLiArr[0].className = "current";
            //4
            for(var i = 0, len = olLiArr.length; i < len; i++) {
                olLiArr[i].index = i;
                olLiArr[i].onmouseover = function (ev) {
                    for(var j = 0; j < len; j++) {
                        olLiArr[j].className = "";
                    }
                    this.className = "current";
                    key = square = this.index;
                    animate(ul, -this.index * imgWidth);
                }
            }
            //5
            var key = 0;
            var square = 0;
            var timer = setInterval(autoPlay, 1000);
            screen.onmouseover = function (ev) {
                clearInterval(timer);
                div.style.display = "block";
            }
            screen.onmouseout = function (ev) {
                timer = setInterval(autoPlay, 1000);
                div.style.display = "none";
            }
            //6
            var divArr = div.children;
            divArr[0].onclick = function (ev) {
                key--;
                if(key < 0) {
                    ul.style.left = -(ul.children.length-1) * imgWidth + "px";
                    key = 4;
                }
                animate(ul, -key * imgWidth);
                square--;
                if(square < 0) {
                    square = 4;
                }
                for(var k = 0; k < len; k++) {
                    olLiArr[k].className = "";
                }
                olLiArr[square].className = "current";
            }
            divArr[1].onclick = autoPlay;
            function autoPlay() {
                key++;
                //当不满足下面的条件是时候，轮播图到了最后一个孩子，进入条件中后，瞬移到
                //第一张，继续滚动。
                if(key > ul.children.length - 1) {
                    ul.style.left = 0;
                    key = 1;
                }
                animate(ul, -key * imgWidth);
                square++;
                if(square > 4) {
                    square = 0;
                }
                for(var k = 0; k < len; k++) {
                    olLiArr[k].className = "";
                }
                olLiArr[square].className = "current";
            }
            function animate(ele,target){
                    clearInterval(ele.timer);
                    var speed = target>ele.offsetLeft?10:-10;
                    ele.timer = setInterval(function () {
                        var val = target - ele.offsetLeft;
                        ele.style.left = ele.offsetLeft + speed + "px";
                        if(Math.abs(val)<Math.abs(speed)){
                            ele.style.left = target + "px";
                            clearInterval(ele.timer);
                        }
                    },10)  
            }

        }
    </script>
</head>

<body>
<div class="all" id='all'>
    <div class="screen" id="screen">
        <ul id="ul">
            <li><img src="images/1.jpg" width="500" height="200" /></li>
            <li><img src="images/2.jpg" width="500" height="200" /></li>
            <li><img src="images/3.jpg" width="500" height="200" /></li>
            <li><img src="images/4.jpg" width="500" height="200" /></li>
            <li><img src="images/5.jpg" width="500" height="200" /></li>
        </ul>
        <ol>

        </ol>
        <div id="arr">
            <span id="left"><</span>
            <span id="right">></span>
        </div>
    </div>
</div>
</body>
</html>
平移代码
function animate(ele,target){
    clearInterval(ele.timer);
    var speed = target>ele.offsetLeft?10:-10;
    ele.timer = setInterval(function () {
        var val = target - ele.offsetLeft;
        ele.style.left = ele.offsetLeft + speed + "px";
        if(Math.abs(val)<Math.abs(speed)){
            ele.style.left = target + "px";
            clearInterval(ele.timer);
        }
    },10)
}
function animateY(ele, target) {
    //bug2 能够返回
    clearInterval(ele.timer);
    var speed = target > ele.offsetTop ? 10 : -10;

    ele.timer = setInterval(function () {
        var val = target - ele.offsetTop;
        ele.style.top = ele.offsetTop + speed + "px";
        if(Math.abs(val) <= 10) {
            ele.style.top = target + "px";
            clearInterval(timer);
        }
    }, 20)
}








                

        

        

    




    

      

        

            

              
                
                  已为陈迹
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    27
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    93
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  24
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
html背景轮播js代码

				
			

			

				

					12-14
				

			

		

		

			
				
html页面插入的js代码，一看就懂。保证能用。页面背景轮播图。嵌在网页代码最后面就可以。

			
		

	



                

              
                



	

		

			

				
					
HTML+CSS +JS实现轮播图的四种方法

					
热门推荐

				
			

			

				

					偷只猫来养的博客
				

				

					06-18
					
					3万+
					
				

			

		

		

			
				
HTML+CSS +JS实现轮播图
轮播图能够自动播放，当点击左右箭头时可以手动切换图片；当鼠标移入圆点时，自动播放停止，显示当前图片；当鼠标移出圆点时，图片又从当前图片开始自动播放；当鼠标点击圆点时，可以手动切换图片；图片的播放是循环的。
1、布局——HTML + CSS
首先，在页面放一个整体的大盒子，在大盒子中装几个小盒子，分别用于放图片、左右点击箭头、底部切换的圆点。
<div id="box">
    <!-- 放图片-->
	<div id="lunboimg"&

			
		

	



                


  
              

                


	

		

			

				
					
【html+css+js】实现图片轮播效果

					
最新发布

				
			

			

				

					Qianmoer的博客
				

				

					01-27
					
					743
					
				

			

		

		

			
				
简单实现
<html>
	<head>
	<style type="text/css">
		*{background-color:green;}
	
		#lunbo{ width:600px; height:600px;position:relative;left:100px;top:50px;} //定义轮播图片所显示的位置
		ul{width:100%; height:100%; position:relative;left:0px;top:0px}//为ul标

			
		

	





	

		

			

				
					
JS实现轮播图的三种简单方法

				
			

			

				

					我是一只蘑菇17的博客
				

				

					12-22
					
					1639
					
				

			

		

		

			
				
Js实现轮播图01 
实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果  
<...

			
		

	



		

			
		



	

		

			

				
					
js案例：简单的图片轮播（代码逐行讲解，建议先看完整代码）

				
			

			

				

					qq_52799985的博客
				

				

					08-09
					
					5312
					
				

			

		

		

			
				
做一个简单的js图片轮播效果并不需要特别多的知识点，代码逐行讲解，小白必看。

			
		

	





	

		

			

				
					
轮播图 原生代码（HTML+CSS+JQuery）

				
			

			

				

					qq_69635978的博客
				

				

					03-29
					
					4601
					
				

			

		

		

			
				
【代码】轮播图 原生代码（HTML+CSS+JQuery）

			
		

	





	

		

			

				
					
轮播图详解（完整代码在最后）

				
			

			

				

					m0_48639378的博客
				

				

					07-06
					
					6264
					
				

			

		

		

			
				
轮播图

			
		

	





	

		

			

				
					
【学习笔记56】轮播图的分析

				
			

			

				

					yizhiyang
				

				

					11-29
					
					284
					
				

			

		

		

			
				
轮播图的分析

			
		

	





	

		

			

				
					
JS实战轮播图详细代码

				
			

			

				

					一步一个脚印，踏实努力，向着目标前进
				

				

					06-12
					
					3699
					
				

			

		

		

			
				
这个例子实现了一个简单的轮播图，通过CSS设置轮播图的样式、布局，通过JS实现轮播图的切换、导航等功能。可以根据实际需求进行修改和扩展。

			
		

	





	

		

			

				
					
轮播图完整代码详细解析，css+js+html完整代码，可直接复制粘贴使用，仅需改图片即可

				
			

			

				

					bsf000000___的博客
				

				

					08-12
					
					2308
					
				

			

		

		

			
				
这是一段使用HTML、CSS和JavaScript编写的图片轮播组件。它通过定时器实现自动播放图片，同时提供向左和向右的箭头按钮以手动切换图片。还包括一个圆圈导航，用于显示当前图片的索引，并且可以点击圆圈导航进行图片切换。具体实现步骤如下：以上就是该轮播组件的实现步骤。你可以根据需要进行修改和扩展，例如调整样式、更换图片等。
效果图

			
		

	





	

		

			

				
					
轮播图（含全部代码：html、css、javascript）

				
			

			

				

					Cap07博客
				

				

					07-31
					
					5187
					
				

			

		

		

			
				
代码】轮播图（含全部代码html、css、javascript）

			
		

	





	

		

			

				
					
原生js图片轮播切换代码

				
			

			

				

					06-24
				

			

		

		

			
				
原生js图片轮播切换代码是一款带标题和索引左右按钮控制图片滚动轮播效果。

			
		

	





	

		

			

				
					
jQuery响应式无限轮播图片代码

				
			

			

				

					04-07
				

			

		

		

			
				
jQuery响应式无限轮播图片代码是一款可以自动将图片居中对齐，组成首尾相接的一组图片，通过导航按钮或移动触摸滑动来前后切换图片。

			
		

	





	

		

			

				
					
jQuery焦点图片轮播切换代码

				
			

			

				

					04-09
				

			

		

		

			
				
jQuery焦点图片轮播切换代码，带左右箭头按钮控制，jquery slider图片插件。

			
		

	





	

		

			

				
					
jQuery图片视差轮播切换代码

				
			

			

				

					06-24
				

			

		

		

			
				
jQuery图片视差轮播切换代码是一款基于swiper.js制作带标签的图片视差滚动特效。

			
		

	





	

		

			

				
					
jQuery图片相册轮播切换代码

				
			

			

				

					04-07
				

			

		

		

			
				
jQuery图片相册轮播切换代码，功能强大，兼容性好，支持全屏轮播效果。

			
		

	





	

		

			

				
					
【面试题】this 指向

				
			

			

				

					yiweichenji的博客
				

				

					04-25
					
					440
					
				

			

		

		

			
				
一道有意思的面试题，考查 this 指向，如下。
var out = 25
var inner = {
  out: 20,
  func: function () {
    var out = 30
    return this.out
  }
};
console.log((inner.func, inner.func)())
console.log(inner.func())
console.log((inner.func)())
console.log((inner.func = inner.f

			
		

	





	

		

			

				
					
200行手写 promise

				
			

			

				

					yiweichenji的博客
				

				

					12-24
					
					92
					
				

			

		

		

			
				
promise 简化版
promise 关键是状态管理，对应三个状态，等待、成功、失败。
实例化 promise 示例时传入一个函数，这个函数会直接在主线程中执行，该函数会提供两个参数：resolve、reject，也是函数，作用是改变实例化的这个 promise 的状态，resolve 把状态改变成成功，reject 改变成失败。
当存在异步情况时，可以通过这两个函数改变状态，后续的 then 方法会根据 promise 的状态来执行。两个函数都可以传入一个参数，分别作为成功结果和失败原因。
于是有下边代

			
		

	





	

		

			

				
					
简单html图片轮播完整代码

				
			

			

				

					08-30
				

			

		

		

			
				
### 回答1：
以下是一个简单的HTML图片轮播的完整代码示例：

```html
<!DOCTYPE html>
<html>
<head>
	<title>图片轮播</title>
	<style>
		#slider {
			width: 500px;
			height: 300px;
			overflow: hidden;
			position: relative;
		}
		#slider img {
			width: 500px;
			height: 300px;
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
		#slider img:first-child {
			display: block;
		}
		#slider nav {
			position: absolute;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
		}
		#slider nav button {
			background: none;
			border: none;
			cursor: pointer;
			font-size: 16px;
			color: #fff;
			margin: 0 10px;
		}
		#slider nav button.active {
			color: #ff0000;
		}
	</style>
</head>
<body>
	<div id="slider">
		<img src="https://via.placeholder.com/500x300?text=Slide%201" alt="Slide 1">
		<img src="https://via.placeholder.com/500x300?text=Slide%202" alt="Slide 2">
		<img src="https://via.placeholder.com/500x300?text=Slide%203" alt="Slide 3">
		<nav>
			<button class="active">1</button>
			<button>2</button>
			<button>3</button>
		</nav>
	</div>

	<script>
		const slider = document.getElementById("slider");
		const navButtons = slider.querySelectorAll("nav button");
		let currentSlide = 0;

		function showSlide(n) {
			const slides = slider.querySelectorAll("img");
			const activeButton = slider.querySelector("nav button.active");

			slides[currentSlide].style.display = "none";
			activeButton.classList.remove("active");

			currentSlide = (n + slides.length) % slides.length;

			slides[currentSlide].style.display = "block";
			navButtons[currentSlide].classList.add("active");
		}

		showSlide(currentSlide);

		navButtons.forEach((button, index) => {
			button.addEventListener("click", () => {
				showSlide(index);
			});
		});
	</script>
</body>
</html>
```

此代码包含一个包含三张图片的简单轮播，通过左右箭头或圆形按钮来切换图片。CSS中定义了图片容器和导航按钮的样式，JavaScript定义了showSlide函数，该函数用于显示下一张或上一张幻灯片，并更新导航按钮的活动状态。此代码仅用于演示，可以自由进行修改以适应您的需求。  

### 回答2：
<html>
  <head>
    <title>简单图片轮播</title>
    <style>
      #slideshow {
        width: 300px;
        height: 200px;
        overflow: hidden;
        margin: 0 auto;
      }

      #slideshow img {
        width: 100%;
        height: 100%;
        display: none;
      }
    </style>
    <script>
      window.onload = function () {
        var slideIndex = 0;
        showSlides();

        function showSlides() {
          var i;
          var slides = document.getElementById("slideshow").querySelectorAll("img");

          for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
          }

          slideIndex++;
          if (slideIndex > slides.length) {
            slideIndex = 1;
          }

          slides[slideIndex - 1].style.display = "block";

          setTimeout(showSlides, 2000); // 每2秒切换一次图片
        }
      }
    </script>
  </head>
  <body>
    <div id="slideshow">
      <img src="image1.jpg" alt="图片1">
      <img src="image2.jpg" alt="图片2">
      <img src="image3.jpg" alt="图片3">
    </div>
  </body>
</html>

上面是一个简单的HTML图片轮播的完整代码。首先使用CSS设置了轮播容器(#slideshow)的宽度、高度、溢出隐藏和居中对齐等样式。

然后使用JavaScript实现轮播功能。通过window.onload事件确保页面加载完后执行函数。在函数中，使用变量slideIndex跟踪当前显示图片的索引。定义showSlides函数，该函数首先使用querySelectorAll方法获取所有图片元素，然后将它们的display样式设置为"none"，以隐藏所有图片。然后对slideIndex进行递增操作，并通过判断确保索引值不超过图片总数。接着将当前图片的display样式设置为"block"，以显示该图片。最后使用setTimeout方法设置定时器，每隔2秒调用一次showSlides函数，实现自动轮播。

在body标签中，将图片放置在id为"slideshow"的容器中，每张图片使用img标签，并设置对应的src和alt属性，代表图片的路径和描述信息。

注意，以上代码中的图片路径需要根据实际情况进行修改，确保图片文件存在在对应路径。  

### 回答3：
以下是一个简单的 HTML 图片轮播的完整代码：

```html
<!DOCTYPE html>
<html>
<head>
  <title>图片轮播</title>
  <style>
    #slideshow {
      width: 500px;
      height: 300px;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
    }
    #slideshow img {
      width: 100%;
      height: 100%;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="slideshow">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>

  <script>
    var images = document.querySelectorAll('#slideshow img');
    var currentIndex = 0;

    function showImage(index) {
      for (var i = 0; i < images.length; i++) {
        images[i].style.display = 'none';
      }

      images[index].style.display = 'block';
    }

    function nextImage() {
      currentIndex++;
      if (currentIndex >= images.length) {
        currentIndex = 0;
      }
      showImage(currentIndex);
    }

    setInterval(nextImage, 3000); // 每3秒切换一张图片
  </script>
</body>
</html>
```

这段代码创建了一个大小为500x300像素的容器，内部包含了三张图片。通过设置`overflow:hidden`属性，只显示容器内的一张图片。通过JavaScript控制`showImage`函数展示当前索引的图片，并通过`setInterval`函数每3秒调用`nextImage`函数将当前索引加1，并切换到下一张图片。这样就实现了一个简单的图片轮播效果。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 24

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值