多图片左右切换功能前端实现

最新推荐文章于 2023-03-20 10:47:50 发布
置顶 最新推荐文章于 2023-03-20 10:47:50 发布
阅读量6.9k 收藏 9
点赞数
分类专栏： web前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libin_1/article/details/52108219
版权


下载地址：http://download.csdn.net/detail/cometwo/9594633


可以试试这个：http://www.sucaihuo.com/js/655.html


原文地址：http://www.cnblogs.com/starof/p/5732097.html

 

 

 



<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css" />
		<!--页面初始化CSS和页面公用头部的css-->
		<style type="text/css">
			@charset "utf-8";
			html,
			body {
				background-color: #f6f5f5;
			}
			
			.vg-body {
				width: 1390px;
				margin: 0 auto;
			}
			/*任务成长值*/
			
			.vg_title {
				font-size: 24px;
				line-height: 24px;
				padding: 20px 0;
				color: #464646;
			}
			
			.vg_task {
				background-color: #fff;
				position: relative;
			}
			
			.vg_task .arrowbtn-left,
			.vg_task .arrowbtn-right {
				position: absolute;
				top: 70px;
				width: 16px;
				height: 20px;
				cursor: pointer;
			}
			
			.vg_task .arrowbtn-left {
				left: 40px;
				border: 1px solid red;
				background: url(../images/arrow-left.png) no-repeat;
				;
			}
			
			.vg_task .arrowbtn-right {
				right: 40px;border: 1px solid red;
				background: url(../images/arrow-right.png) no-repeat;
				;
			}
			
			.vg_tasklist {
				width: 1200px;
				overflow: hidden;
				margin: 0 auto;
			}
			
			.vg_tasklist ul {
				width: 999%;
			}
			
			.vg_tasklist li {
				width: 258px;
				height: 130px;
				float: left;
				border: 1px solid #c8c8c8;
				margin: 15px 53px 15px 0;
				position: relative;
			}
			
			.vg_tasklist li .task_hover {
				position: absolute;
				left: -1px;
				top: -1px;
				width: 212px;
				padding: 20px 25px 20px 23px;
				height: 90px;
				border-bottom: 2px solid #e65a5a;
				overflow: hidden;
				background-color: #f0f0f0;
				display: none;
			}
			
			.vg_tasklist li:hover .task_hover {
				display: block;
			}
			
			.task_hover .task_desc {
				font-size: 16px;
				line-height: 20px;
				color: #646464;
			}
			
			.task_hover .task_limittimes {
				font-size: 14px;
				color: #787878;
				float: left;
				padding-top: 12px;
			}
			
			.vg_tasklist li img {
				float: left;
				margin: 22px 8px 20px 20px;
			}
			
			.vg_tasklist li .rightinfo {
				width: 136px;
				float: left;
				text-align: center;
			}
			
			.rightinfo h3 {
				font-size: 16px;
				color
最低0.47元/天 解锁文章
最骚的就是你
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery图片堆叠左右切换插件
06-24
本篇文章将详细讲解基于jQuery实现的“图片堆叠左右切换插件”的相关知识点。 首先，我们需要理解这个插件的核心功能：它能够将多张图片并排堆叠在一起，用户可以通过点击左右导航按钮来切换展示的图片，从而达到一...
通过CSS写提示工具栏的上下左右箭头
baogeprh的博客
03-07 821
背景：现在很多提示工具栏都是组件库自带的，但是有些项目是通过原生js+jquery写的。这种项目就需要自己去写样式了 话不多说直接上代码： 1，剪头向下的 <!DOCTYPE html> <html> <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibil
HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头
weixin_53748496的博客
12-08 3983
HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头
如何实现轮播CSS伪类鼠标移入显示左右切换按钮
qq_34138155的博客
07-06 850
转载：https://blog.csdn.net/weixin_44541162/article/details/86517458 1.要实现这一效果，首先要分析清楚你要让鼠标移动到哪一个元素上触发伪类事件，这里是要让鼠标移入到container这个元素上显示左右切换按钮的这样一个效果，那么清晰的思路有了，你才能找到下手的切入点，才能更好地进行下一步操作。 图1 2.其次，为了实现显示效果...
纯DIV+CSS简单实现Tab选项卡左右切换效果
weixin_33709590的博客
01-22 3130
转载自: 纯DIV+CSS简单实现Tab选项卡左右切换效果 | 赣南剑客，稍微有点修改。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h...
通过css div 制作手机端 卡片左右滑动效果
chenrui310的博客
03-20 2249
【代码】通过css div 制作手机端 卡片左右滑动效果。
jquery多图片左右切换
11-13
这样，在其他项目中只需要引入这个插件，就可以轻松实现多图片左右切换的功能。 总结来说，“jquery多图片左右切换”是一项常见的前端开发任务，通过jQuery的高效API和丰富的插件支持，我们可以轻松地构建出交互性...
ES6实现图片切换特效代码
10-15
在本文中，我们将深入探讨如何使用ES6语法来实现一个图片切换特效。这个特效通过创建一个动态展示的图片列表，使用户能够轻松地浏览和切换不同的图片。代码示例展示了如何利用JavaScript和CSS来实现这一功能，使得...
swiper倾斜图片左右切换特效
06-24
在本文中，我们将深入探讨如何实现“swiper倾斜图片左右切换特效”，这是一款基于jQuery的交互式图片展示解决方案，它提供了独特的视觉体验。该特效利用了图片的倾斜布局，当鼠标悬停在图片上时，图片会翻转，而点击...
图片轮播素材 左右按钮切换 图片叠加
11-12
在网页设计和开发中，图片轮播是一种常见的交互元素，用于展示一组图片或内容，而“图片轮播素材 左右按钮切换 图片叠加”这一主题涵盖了几个关键知识点，包括图片轮播的设计、左右按钮的交互功能以及图片叠加效果。...
网站前端——图片左右切换（轮播图）
09-15
可以在网页实现图片左右切换，即轮播图。使用bootstraps框架，不需要css、js文件。导入即可使用。图片的数量和样式可自由更改。
jquery 多图片左右滑动效果
09-25
jquery 多图片左右滑动效果 兼容多浏览器器
Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
11-17
Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
Web版左右切换功能
05-25
利用html5+css3，js实现的WEB版左右切换功能，适合新手学习WEB前端使用，能够学到前后端交互，Ajax轮询通信，模板渲染等技术。
css移动端动态菜单左右滑动
LiXiao_Lan的博客
01-10 861
如果在pc端，隐藏了横向滚动条，那就没有任何效果，不用隐藏滚动条，可以在::-webkit-scrollbar { width: 0; }里面设置宽度0，把滚动条样式调好看一点
css 左右切换滑动效果
热门推荐
PrimaryColor
01-27 1万+
效果图： 简单讲讲实现逻辑，先实现简单的布局，带有颜色的滑块通过伪类并定位来实现，同时设置好active的效果，也就是滑块移动到了右边花朵上面。切换效果实现后，就可以通过transition来转换变换属性的一个过渡效果。 本项目使用的jquery，预览时请自行引入jquery。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n
纯css : 实现图片左右切换效果（animation 属性、@keyframes 规则）
weixin_44216884的博客
02-13 6395
实现效果： 几张图片依次轮流切换（不会放动图。。。。） 思路： 先设定一个播放的盒子A，要求盒子的宽和高与图片的大小一致； 在设定一个容纳几张图片的盒子B,要求盒子的宽与所有图片的总宽一致，高度与图片一致； 将图片横向排放在盒子B中，用float属性做定位； 利用 animation 属性、@keyframes 规则 设置动画效果，实现切换的目的。 具体代码： <div id="fra...
纯css3的上下左右提示框几种方法
weixin_30613343的博客
12-31 97
经常用到三角形提示框，用图片吧，大小框不定，所以，css自己写了，可设置宽高比，就可自适应了。 图形例子如下： css代码如下 <style type="text/css"> /* 基本样式 */ .tipleft { background:#fff; border: 1p...
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、付费专栏及课程。

余额充值