JS轮播图

最新推荐文章于 2023-09-17 14:12:21 发布
最新推荐文章于 2023-09-17 14:12:21 发布
阅读量279 收藏 1
点赞数 1
分类专栏： 轮播图 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46601555/article/details/110880707
版权

JS轮播图
学习笔记（学校的课设），实现了左右切换，按指示点切换、按小图标切换和自动切换，但是还有某些功能没完善，如：切换到某张图片后，左右并没有切换到前后相应的图片。

先看实现效果：
在这里插入图片描述

代码仅供参考：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div0{
				height: 100px;
                width: 100%;
                background-color:black;
                opacity:0.75;
			}
			.div1{
				background-image: url(img/bg2.png);
                height: 400px;
                width: 100%;
                
			}
			.div2{
				height: 200px;
                width: 100%;
                background-color:black;
                opacity:0.75;
                position: absolute;
                
                
			}
			.spot{
				position: absolute;
				left: 10%;
			}
			.spot_list1{
				float: left;
				border:3px solid wheat;
                transform:rotate(-30deg);
                -ms-transform:rotate(-30deg);
                -moz-transform:rotate(-30deg);
                -webkit-transform:rotate(-30deg);
                -o-transform:rotate(-30deg);
                 opacity:0.5;
			}
			.spot_list2{
				float: left;
				border:3px solid wheat;
                transform:rotate(-15deg);
                -ms-transform:rotate(-15deg);
                -moz-transform:rotate(-15deg);
                -webkit-transform:rotate(-15deg);
                -o-transform:rotate(-15deg);
                opacity:0.5;
			}
			.spot_list3{
				float: left;
				border:3px solid wheat;
                transform:rotate(28deg);
                -ms-transform:rotate(28deg);
                -moz-transform:rotate(28deg);
                -webkit-transform:rotate(28deg);
                -o-transform:rotate(28deg);
                opacity:0.5;
			}
			.div1_1{
				border: 10px solid gainsboro;
				width: 830px;
				height: 300px;
				left: 10%;
				top: 10%;
				position: relative;
				overflow: hidden;
			}
			.btn {
            width: 100%;
            height: 80px;
            position: absolute;
            margin: 0 auto;
            top: 120px;
        }
        .box_big {
            position: absolute;
            height: 400px;
            vertical-align: middle

        }
        #imgList{
			list-style: none;
			position: absolute; 
		}
			
		#imgList li{
			float: left;
			margin: 0 10px;
			}
        .left_btn, .right_btn {
            width: 30px;
            height: 80px;
            background:gray;
            line-height: 90px;
            border-radius: 10px;

        }

        .left_btn {
            float: left;
        }

        .right_btn {
            float: right;
        }
        #navDiv{
		    position: absolute;
			left: 300px;	
			}
		#navDiv a{
			float: left;
			width: 15px;
			height: 15px;
			border-radius:50%;
			background-color: black;
			margin: 0 10px;
			opacity: 0.5;
			filter: alpha(opacity=50); 
			}

			#navDiv a:hover{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="div0"></div>
		<div class="div1">
			<div class="div1_1">
				<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
			<div class="box_big">			
				<ul id="imgList">
				<li><img src="img/1.jpg" id="1" ></li>
				<li><img src="img/2.jpg" id="2></li>
				<li><img src="img/3.jpg" id="3"/></li>
				<li><img src="img/4.jpg" id="4"/></li>
				<li><img src="img/5.jpg" id="5"/></li>
				<li><img src="img/6.jpg" id="6"/></li>
				</ul>
			</div>	
			
		<div class="btn">
        <div class="left_btn"><img src="img/prev.png"></div>
        <div class="right_btn"><img src="img/next.png"></div>
        </div>
			</div>
		</div>
		
		<!--小标图片-->
		<div class="div2" onmouseleave="m1()">
			<div class="spot">
			<img src="img/thumbs/1.jpg" class="spot_list1" id="spot_list1" onmouseover="mouseover(1)" onmouseout="mouseout(1)">
			<img src="img/thumbs/2.jpg" class="spot_list2" id="spot_list2" onmouseover="mouseover(2)" onmouseout="mouseout(2)">
			<img src="img/thumbs/3.jpg" class="spot_list3" id="spot_list3" onmouseover="mouseover(3)" onmouseout="mouseout(3)">
			<img src="img/thumbs/4.jpg" class="spot_list1" id="spot_list4" onmouseover="mouseover(4)" onmouseout="mouseout(4)">
			<img src="img/thumbs/5.jpg" class="spot_list2" id="spot_list5" onmouseover="mouseover(5)" onmouseout="mouseout(5)">
			<img src="img/thumbs/6.jpg" class="spot_list3" id="spot_list6" onmouseover="mouseover(6)" onmouseout="mouseout(6)">
		</div>
		</div>
	</body>
	<script>
		
		var box=document.getElementById("1");
		//var spot = document.getElementsByClassName("spot_list");
		var left_btn=document.getElementsByClassName("left_btn")[0];
		var right_btn=document.getElementsByClassName("right_btn")[0];
		var time = null;
        var count = 0;
		var ids=document.getElementsByTagName("a");
		ids[0].style.backgroundColor="red";
		var spot_list1=document.getElementById("spot_list1");
		spot_list1.setAttribute("class","spot_list3");
		spot_list1.style.opacity="0.98";
		
		//左按钮
		left_btn.onclick=function(){	
			count--;
			if(count<1){
				count=6
			}
			box.src="img/" + count + ".jpg";
			for(var i=0;i<ids.length;i++){
			 ids[i].style.backgroundColor="black";
		}
		ids[count - 1].style.backgroundColor="red";
		for(var i=1;i<=6;i++){
			var img=document.getElementById("spot_list"+i);
			if(img.id=="spot_list1" || img.id=="spot_list4"){
				img.setAttribute("class","spot_list1");
				img.style.opacity="0.5";
				
			}else if(img.id=="spot_list2" || img.id=="spot_list5"){
				img.setAttribute("class","spot_list2");
				img.style.opacity="0.5";
				
			}else if(img.id=="spot_list3" || img.id=="spot_list6"){
				img.setAttribute("class","spot_list3");
				img.style.opacity="0.5";
				
			}
		}
		
		var img=document.getElementById("spot_list"+count);
	    if(img.id=="spot_list1" || img.id=="spot_list4"){
				img.setAttribute("class","spot_list3");
				img.style.opacity="0.98";
			}else if(img.id=="spot_list2" || img.id=="spot_list5"){
				img.setAttribute("class","spot_list3");
				img.style.opacity="0.98";
			}else if(img.id=="spot_list3" || img.id=="spot_list6"){
				img.setAttribute("class","spot_list1");
				img.style.opacity="0.98";
			}
		}
		
		//右按钮
		right_btn.onclick=function(){
			changeImg();
		}
		//
		var x=1;
		var changeImg = function(){
		x++;
		if(x > 6){
			x = 1;
		}
		box.src = "img/" + x + ".jpg";
		for(var i=0;i<ids.length;i++){
			 ids[i].style.backgroundColor="black";
		}
		ids[x - 1].style.backgroundColor="red";
		for(var i=1;i<=6;i++){
			var img=document.getElementById("spot_list"+i);
			if(img.id=="spot_list1" || img.id=="spot_list4"){
				img.setAttribute("class","spot_list1");
				img.style.opacity="0.5";
				
			}else if(img.id=="spot_list2" || img.id=="spot_list5"){
				img.setAttribute("class","spot_list2");
				img.style.opacity="0.5";
				
			}else if(img.id=="spot_list3" || img.id=="spot_list6"){
				img.setAttribute("class","spot_list3");
				img.style.opacity="0.5";
				
			}
		}
		
		var img=document.getElementById("spot_list"+x);
	    if(img.id=="spot_list1" || img.id=="spot_list4"){
				img.setAttribute("class","spot_list3");
				img.style.opacity="0.98";
			}else if(img.id=="spot_list2" || img.id=="spot_list5"){
				img.setAttribute("class","spot_list3");
				img.style.opacity="0.98";
			}else if(img.id=="spot_list3" || img.id=="spot_list6"){
				img.setAttribute("class","spot_list1");
				img.style.opacity="0.98";
			}
	}
		
		//设置计时器
		var show;
		show=setInterval(changeImg, 3000);
		
		//图片切换
		function mouseover(n){
			clearInterval(show);
			var img=document.getElementById("spot_list"+n);
			if(img.id=="spot_list1" || img.id=="spot_list4"){
				img.setAttribute("class","spot_list3");
				img.style.opacity="0.98";
			}else if(img.id=="spot_list2" || img.id=="spot_list5"){
				img.setAttribute("class","spot_list3");
				img.style.opacity="0.98";
			}else if(img.id=="spot_list3" || img.id=="spot_list6"){
				img.setAttribute("class","spot_list1");
				img.style.opacity="0.98";
			}
			box.src="img/"+n+".jpg";
			for(var i=0;i<ids.length;i++){
			 ids[i].style.backgroundColor="black";
		}
			ids[n-1].style.backgroundColor="red";				
		}
		
		for(let i=0;i<ids.length;i++){
			ids[i].onclick=function(){
				clearInterval(show);
				for(var n=0;n<ids.length;n++){
			    ids[n].style.backgroundColor="black";
		    }
				box.src="img/"+(i+1)+".jpg";
				ids[i].style.backgroundColor="red";
			}
		}
		
		//离开小图标时
		function mouseout(n){
			
			var img=document.getElementById("spot_list"+n);
			ids[n-1].style.backgroundColor="black";	
			if(img.id=="spot_list1" || img.id=="spot_list4"){
				img.setAttribute("class","spot_list1");
				img.style.opacity="0.5";
				
			}else if(img.id=="spot_list2" || img.id=="spot_list5"){
				img.setAttribute("class","spot_list2");
				img.style.opacity="0.5";
				
			}else if(img.id=="spot_list3" || img.id=="spot_list6"){
				img.setAttribute("class","spot_list3");
				img.style.opacity="0.5";
				
			}
			
			}
		      
		function m1(){
        //启动计时器
	   show=setInterval(changeImg, 3000);	
		}
		
		

	</script>
</html>
努力学习中.....
关注
专栏目录
js轮播图动画
Likeyou113的博客
12-08 1011
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： 作者：黄瑞民 撰写时间：2021/11/28 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本次分享的案例是轮播图 <html lang="en"> <head> <meta chars...
纯js实现轮播图(3种轮播图).zip
12-28
在前端开发中，轮播图（Carousel）是一种常见的网页元素，用于展示一组可滑动切换的图片或内容。本资源包含纯JavaScript实现的三种不同类型的轮播图，这对于熟悉JavaScript和想要提升前端技能的开发者来说，是一份...
JS轮播图详解
weixin_75154342的博客
09-17 3869
JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示，配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换，并通过事件监听器实现对鼠标事件的响应。CSS样式：通过CSS样式对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式，使图片水平排列在一行。调整功能和样式：根据需求，可以进一步调整轮播图的功能和样式，例如添加左右切换按钮、指示器、淡入淡出效果等。HTML结构：首先，在HTML中创建一个包含轮播图的容器，通常使用。
js轮播图实现
qq_53843555的博客
05-29 5370
使用js实现轮播图
Js轮播图
weixin_51450341的博客
10-21 650
网页中的轮播图太常见了,几乎是每个首页必备,本篇博客记录的轮播图主要实现了如下功能:1.能够自动切换下一张图片,时间间隔为2秒钟2.能够单击按钮切换到相应的图片3.鼠标悬浮到图片上时,停止轮转4.鼠标离开,图片轮转继续5.1.设置上一张按钮,单击立刻切换到上一张图片,此按钮默认不显示,鼠标悬浮到图片上显示5.2.设置下一张按钮。
JS 轮播图 图片切换（定时器）
热门推荐
qq_38318589的博客
08-13 4万+
JS 轮播图 图片切换（定时器） 这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
js 轮播图（透明度）
哈哈绝的博客
10-24 2521
js 轮播图（透明度） 用透明度的方式来实现轮播图 先说下思路，我们首先应该考虑下页面的结构。 第一，我们在做网站的时候，不可能一个页面都是轮播图，所以我们首先需要一个大的盒子，来把轮播图包起来，这里我用的是div 第二，因为使用透明度做的，所以轮播图的切换方式也是透明度，也就是说一个隐藏，一个显示，那么也就意味着，这些用来做轮播图的图片是在同一个位置上，一个压着一个的。这个效果可以用pos...
js 轮播图
jinshan_的博客
01-20 522
js，jq轮播图
js轮播图注意事项
moanuan的博客
12-02 668
轮播图是我们初学者能写出的功能之一，笔者在这里说一下轮播图容易出现的问题 笔者第一次做轮播图的时候，是先让图片用setInterval函数轮播图片，再去实现下标切换，左右按钮图片切换，然而完成之后效果存在，但是左右按钮切换时会出现一些小bug，第一次点击时会点击两次才能实现切换，具体原因笔者认为时间函数执行过一次后就立马进入到下一次，而自己在函数里记录的变量值已经发生改变，所以会出现错误。 正确的...
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
js轮播图_javascript_
10-03
这个简单的JavaScript轮播图只是一个起点，开发者可以根据需求进行扩展和定制，例如添加触摸滑动支持、响应式设计等，以适应不同设备和屏幕尺寸。通过不断学习和实践，您可以创建出功能丰富、用户体验优秀的轮播图...
JavaScript案例-js轮播图
02-16
在这个"JavaScript案例-js轮播图"中，我们将深入探讨如何使用纯JavaScript实现一个功能完善的轮播图效果。 首先，轮播图是网页设计中常见的元素，它允许展示一组图片或内容，并在用户交互或定时自动切换之间进行...
JavaScript 轮播图.rar
04-08
JavaScript（可能在javascript文件夹中的script.js）是实现轮播图动态功能的关键。主要功能包括： 1. 初始化：获取DOM元素，如轮播图容器、图片列表、控制按钮等，并设置初始状态，比如第一张图片显示，其他隐藏。 ...
javaScript轮播图实现代码
07-07
JavaScript轮播图是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来呈现连续播放的效果。在给定的资源中，我们有`index.html`作为主页面，`images`目录则包含轮播图所需的图片。以下是...
基于java的校园美食交流系统设计与实现.docx
09-19
基于java的校园美食交流系统设计与实现.docx
#_ssm_126_mysql_实习支教中小学学校信息管理系统_.zip
09-19
均包含代码，文章，部分项目包含ppt
基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip
最新发布
09-19
基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip 个人大四的毕业设计、课程设计、作业、经导师指导并认可通过的高分设计项目，评审平均分达96.5分。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 [资源说明] 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设或者课设、作业，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96.5分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），供学习参考。
ASP.NET公交车管理系统的实现与设计(源代码+论文).zip
09-19
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 、4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、下载 4使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、 4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力学习中.....

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值