web实现左右切换功能

最新推荐文章于 2023-03-31 20:41:04 发布
最新推荐文章于 2023-03-31 20:41:04 发布
阅读量1.1k 收藏 4
点赞数 1
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Revival_Liang/article/details/56840163
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
		<style type="text/css">
		div,ul,li{
			margin: 0px;
			padding: 0px;
		}
			.box{
				border: 5px solid orange;
				overflow: hidden;
				width: 500px;
				height: 400px;
				display: inline-block;
				background: green;
				position: relative;
			}
			.box-ul-li1{
				float: left;
				background: orangered;
			}
			.box-ul-li2{
				float: left;
				background: orange;
			}
			.box-ul-li3{
				float: left;
				background: green;
			}
			.box-ul-li1,.box-ul-li2,.box-ul-li3{
				width: 500px;
				height: 400px;
				position: relative;
			}
			.box-ul{
				position: absolute;
				width: 99999px;
				height: 400px;
				list-style: none;
				background: red;
			}
			.button-box{
				top: 50%;
				position: relative;
				width: 500px;
				height: 45px;
				z-index: 1;
			}
			.left-button{
				color: white;
				left: 0px;
				position: absolute;
				font-size: 26px;
				border-style: none;
				width: 50px;
				height: 45px;
				background: rgba(0,0,0,0.4);
			}
			.right-button{
				color: white;
				position: absolute;
				right: 0px;
				font-size: 26px;
				border-style: none;
				width: 50px;
				height: 45px;
				background: rgba(0,0,0,0.4);
			}
			.box-ul-img{
				width: 500px;
				height: 400px;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				var value = 0;
				$(".box").mouseover(function(){
					$(".button-box").css("visibility","visible");
				});
				$(".box").mouseout(function(){
					$(".button-box").css("visibility","hidden");
				});
				//左边的按钮，把ul元素往右边移
				$(".left-button").click(function(){
					if(value >= -500){
					value-=500;
					$(".box-ul").animate({left:value},500);
					}
				});
				//右边的按钮，把ul元素往左边移
				$(".right-button").click(function(){
					if(value <= -500){
					value+=500;
					$(".box-ul").animate({left:value},500);
					}
				});
			});
		</script>
	</head>
	<body style="text-align: center;">
		<div class="box">
			<ul class="box-ul">
				<li class="box-ul-li1"><img class="box-ul-img" src="img/a.jpg"/></li>
				<li class="box-ul-li2"><img class="box-ul-img" src="img/b.jpg"/></li>
				<li class="box-ul-li3"><img class="box-ul-img" src="img/c.jpg"/></li>
			</ul>
			<div class="button-box">
			<button class="left-button"><</button>
			<button class="right-button">></button>
			</div>
		</div>
	</body>
</html>

效果图如下：


Revival_Liang
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html左右滑动切换页面实例6,HTML5带左右滑动切换动效的登录/注册表单页面模板...
weixin_39731456的博客
06-03 1226
CSS语言：CSSSCSS确定.body {background: #ff4931;transition: all .5s;padding: 1px;}.veen {width: 70%;margin: 100px auto;background: rgba(255, 255, 255, .5);min-height: 400px;display: table;position: relative...
pc端jquery左右按钮控制带缩略图的图片切换代码_Web开发实用的图片预览插件，简单零依赖——PhotoSwipe...
weixin_39720807的博客
01-18 358
介绍PhotoSwipe是一个JavaScript库，没有依赖项。要说唯一的依赖项那就是Vanilla.js(原生js),因此你可以在你的任何Web项目中使用，包括主流的Vue、React、Angular以及传统jQuery的项目。PhotoSwipe可以被用到各种大中小型项目当中，并且PC和移动端完美支持！Githubhttps://github.com/dimsemenov/photoswip...
滚动加载事件-scroll、offset、client家族
qq_54201133的博客
06-06 574
滚动加载事件-scroll、offset、client家族
css转换html,左右切换css，html
weixin_29865939的博客
06-02 373
【摘要】左右切换css，html考必过小编为大家整理了关于左右切换css，html的信息，希望可以帮助到大家！左右切换css，html标签：queryredflowtitleackclassoneorameta.shade {position: absolute;display: none;width: 100%;height: 100%;top: ...
网页上按钮更换图片
qq_44962061的博客
02-02 3567
准备好两张图片 media/1.png media/2.png 摆好图片布局和按钮 <input id="btn" type="button" value="修改" /><br/> <img id="pic" src="img/1.png"/> window.onload = function (): 表示浏览器把整个页面解析完了再去解析{}内部的代码。 var oBtn = document.getElementById("btn"); var oPic
js实现左右内容切换效果
我心独舞的博客
07-28 1868
如何能让左边文本框里的内容动态添加到右边文本框里呢？ 本人在学习阶段想到这样的一个方法，利用点击事件动态的添加内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
Web版左右切换功能
05-25
在Web开发中，实现左右切换功能是常见的交互设计，它能提供流畅的用户体验，尤其是在展示内容或者进行选项选择时。本项目使用HTML5、CSS3和JavaScript技术来创建这一功能，对于初学者来说是一个很好的实践案例，可以...
js实现手机web图片左右滑动效果
10-18
在本文中，我们将探讨如何使用JavaScript来实现手机Web上的图片左右滑动效果，这个功能常见于许多手机端的网页应用，尤其是图片展示类的应用。我们将主要关注以下几个方面： 1. **布局与结构**： - 图片通常被包含...
jquery实现左右轮播切换效果
10-18
实现左右轮播切换效果是Web前端开发中常见的需求之一，主要目的是为了在一个有限的页面空间内展示多张图片或者内容，并通过动画效果使用户可以左右滑动查看。jQuery作为一个轻量级的JavaScript库，它简化了HTML文档...
使用jQuery实现鼠标点击左右按钮滑动切换
10-19
在Web前端开发中，创建交互式的用户体验常常需要用到图片滑动切换特效。jQuery作为一个强大的JavaScript库，提供了丰富的API和便捷的语法，使得实现这种特效变得相对简单。本篇文章将详细介绍如何使用jQuery来实现...
网页切换效果，包括上下左右等多种切换，有65种
05-28
网页切换效果，包括上下左右等多种切换，可下载参考使用，也可以直接当做模板网页切换效果，包括上下左右等多种切换，可下载参考使用，也可以直接当做模板
web页面的左右互换
08-01
在网站操作web页面时 对于文本框 左右值的互换
网站前端——图片左右切换（轮播图）
09-15
可以在网页实现图片左右切换，即轮播图。使用bootstraps框架，不需要css、js文件。导入即可使用。图片的数量和样式可自由更改。
H5选项卡左右切换
07-14
H5选项卡左右切换，方便自己记录，以便下次使用，HTML5的选项卡切换代码下载
图文左右切换效果网页特效
11-16
图文左右切换效果网页特效
swiper倾斜图片左右切换特效
06-24
总的来说，“swiper倾斜图片左右切换特效”是一个结合了Swiper滑动效果、CSS3倾斜、鼠标悬停事件和点击预览的综合应用，展示了jQuery和现代Web技术在创建互动性、吸引力强的图片展示方案中的强大能力。通过学习和...
WEB前端学习——第六次作业（banner图片左右切换按钮）
Han_nashi的博客
03-31 665
banner图片左右切换按钮
65-前端利用js实现页面左右滑动切换页面
ystraw - Come on！！！
11-02 4217
主要利用js的鼠标按键按下和抬起两个监听函数即可实现，请看下面的例子。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #test{width: 300;...
jsp 左右箭头实现图片切换
最新发布
05-30
JSP 是一个用于开发动态Web应用程序的服务器端技术，它本身不直接提供实现图片切换的功能，但可以借助前端技术来实现。 以下是一个基础的 JSP 页面代码示例，实现了左右箭头控制图片切换的功能： ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片切换</title> <style> #slider { position: relative; width: 100%; height: 400px; overflow: hidden; } .slider-wrapper { position: absolute; top: 0; left: 0; width: 300%; height: 100%; display: flex; } .slider-item { width: 33.33%; height: 100%; display: flex; justify-content: center; align-items: center; } .slider-item img { max-width: 100%; max-height: 100%; } .slider-item.active { transform: translateX(0%); } .slider-item.prev { transform: translateX(-33.33%); } .slider-item.next { transform: translateX(33.33%); } .slider-controls { position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; width: 100%; z-index: 1; } .slider-control { background: rgba(255, 255, 255, 0.5); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .slider-control span { font-size: 24px; color: #333; } </style> </head> <body> <div id="slider"> <div class="slider-wrapper"> <div class="slider-item active"> <img src="image1.jpg"> </div> <div class="slider-item"> <img src="image2.jpg"> </div> <div class="slider-item"> <img src="image3.jpg"> </div> </div> <div class="slider-controls"> <div class="slider-control prev"> <span><</span> </div> <div class="slider-control next"> <span>></span> </div> </div> </div> <script> const slider = document.querySelector('#slider'); const sliderWrapper = slider.querySelector('.slider-wrapper'); const sliderItems = slider.querySelectorAll('.slider-item'); const prevControl = slider.querySelector('.slider-control.prev'); const nextControl = slider.querySelector('.slider-control.next'); let currentIndex = 0; // 初始化 sliderItems[currentIndex].classList.add('active'); // 左箭头点击事件 prevControl.addEventListener('click', () => { const prevIndex = currentIndex === 0 ? sliderItems.length - 1 : currentIndex - 1; sliderItems[prevIndex].classList.add('prev'); sliderWrapper.classList.add('prev'); setTimeout(() => { sliderItems[prevIndex].classList.add('active'); sliderItems[currentIndex].classList.remove('active'); sliderItems[currentIndex].classList.add('next'); sliderItems[prevIndex].classList.remove('prev'); sliderItems[currentIndex].classList.remove('next'); sliderWrapper.classList.remove('prev'); currentIndex = prevIndex; }, 500); }); // 右箭头点击事件 nextControl.addEventListener('click', () => { const nextIndex = currentIndex === sliderItems.length - 1 ? 0 : currentIndex + 1; sliderItems[nextIndex].classList.add('next'); sliderWrapper.classList.add('next'); setTimeout(() => { sliderItems[nextIndex].classList.add('active'); sliderItems[currentIndex].classList.remove('active'); sliderItems[currentIndex].classList.add('prev'); sliderItems[nextIndex].classList.remove('next'); sliderItems[currentIndex].classList.remove('prev'); sliderWrapper.classList.remove('next'); currentIndex = nextIndex; }, 500); }); </script> </body> </html> ``` 这个 JSP 页面代码中嵌入了 HTML、CSS、JavaScript 代码，实现了基础的图片切换效果。你可以根据自己的需求来修改样式和内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值