html+css实现图片滑移效果

最新推荐文章于 2023-12-01 12:58:10 发布
最新推荐文章于 2023-12-01 12:58:10 发布
阅读量1.2k 收藏 2
点赞数 1
分类专栏： html+css网页前台 文章标签： js css html5 javascript jquery
Wangqi
本文链接：https://blog.csdn.net/u012651389/article/details/43939523
版权 
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ChouTiZhanShi.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
		body{background:url("img/bg.jpg")no-repeat}
		*{margin:0px; padding:0px;}
		#imgs{width:1218px ; height:233px ;border-radius:9px;
			box-shadow:0px 0px 8px #000;margin:20px auto;}
		#imgs ul {list-style-type:none;padding:6px 0px;}		
		#imgs ul li{display:block;width:290px;height:200px;
			border:2px solid #FFF;overflow:hidden;border-radius:9px;
			margin:10px 5px;float:left;
			box-shadow:0px 0px 5px #000;position:relative;}
		#imgs ul li .tip h4{text-align:center;margin:3px;}
		#imgs ul li .tip p{text-align:center;margin:3px;font-family:"微软雅黑"}
		#imgs ul li img{border-radius:9px;}
		#imgs ul li .tip{width:300px;height:200px;background:#CDCDCD;
			position:absolute;top:0px;left:300px;border-radius:9px;}
		#imgs ul li.first{width:600px;}
		#imgs ul li.first img{width:290px;}
		#imgs ul li.first .tip h4{text-align:center;margin:3px;}
		#imgs ul li.first .tip p{text-align:center;margin:2px;font-family:"微软雅黑"}
		#imgs ul li {width:186px;}
		#imgs ul li img{width:186px;}
	</style>
  </head>
  
  <body>
    <div id="imgs">
    	<ul>
    		<li class="first">
    			<img src="img/1.jpg"width=290px height=200px/>
    			<div class="tip">
    				<h4>我的小跑车</h4>
    				<p>飞呀 看那红色蜻蜓飞在蓝色天空<br>
						游戏在风中不断追逐他的梦
						天空是永恒的<br>家大地就是他的王国
						飞翔是生活我们的童年也像追逐成长吹来的风<br>
						轻轻地吹着梦想 慢慢地升空<br>
						红色的蜻蜓是我小时侯的小小英雄<br>
						多希望有一天能和他一起飞<br>
    				</p>
    			</div>
    		</li>
    		<li>
    			<img src="img/2.jpg"width=290px height=200px/>
    			<div class="tip">
    				<h4>我的小跑车</h4>
    				<p>飞呀 看那红色蜻蜓飞在蓝色天空<br>
						游戏在风中不断追逐他的梦
						天空是永恒的<br>家大地就是他的王国
						飞翔是生活我们的童年也像追逐成长吹来的风<br>
						轻轻地吹着梦想 慢慢地升空<br>
						红色的蜻蜓是我小时侯的小小英雄<br>
						多希望有一天能和他一起飞<br>
    				</p>
    			</div>
    		</li>
    		<li>
    			<img src="img/3.jpg"width=290px height=200px/>
    			<div class="tip">
    				<h4>我的小跑车</h4>
    				<p>飞呀 看那红色蜻蜓飞在蓝色天空<br>
						游戏在风中不断追逐他的梦
						天空是永恒的<br>家大地就是他的王国
						飞翔是生活我们的童年也像追逐成长吹来的风<br>
						轻轻地吹着梦想 慢慢地升空<br>
						红色的蜻蜓是我小时侯的小小英雄<br>
						多希望有一天能和他一起飞<br>
    				</p>
    			</div>
    		</li>
    		<li>
    			<img src="img/4.jpg"width=290px height=200px/>
    			<div class="tip">
    				<h4>我的小跑车</h4>
    				<p>飞呀 看那红色蜻蜓飞在蓝色天空<br>
						游戏在风中不断追逐他的梦
						天空是永恒的<br>家大地就是他的王国
						飞翔是生活我们的童年也像追逐成长吹来的风<br>
						轻轻地吹着梦想 慢慢地升空<br>
						红色的蜻蜓是我小时侯的小小英雄<br>
						多希望有一天能和他一起飞<br>
    				</p>
    			</div>
    		</li>
    		<!-- <li><img src="img/5.jpg"width=290px height=200px/></li>
    		<li><img src="img/6.jpg"width=290px height=200px/></li>
    		<li><img src="img/7.jpg"width=290px height=200px/></li>
    		<li><img src="img/8.jpg"width=290px height=200px/></li> -->
    	</ul>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    	$("#imgs ul li").hover(function(){
    		//alert("wew");
    		$(this).stop(true,true).animate({width:"600px"},800).siblings().stop(true,true).animate({width:"186px"},800);
    		$(this).siblings().find("img").stop(true,true).animate({width:"186px"},800);
    		$(this).find("img").stop(true,true).animate({width:"290px"},800)
    	},function(){
    		$("#imgs ul li").stop(true,true).animate({width:"290px"},800);
    		$(this).siblings().find("img").stop(true,true).animate({width:"290px"},800);
    	});
    </script>
  </body>
</html>
</span></strong>

DRMIVET Stone
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定时函数和swiper插件
dhnnnna的博客
06-30 316
setTimeout(changeBackgroundColor,1000); 定时关闭 函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。 setInterval(changeBackgroundColor,1000); 重复执行 函数的用法与完全一致，区别仅仅在于指定某个任务每隔一段时间就执行一
HTML实现图片的定向移动
Boomoon的博客
01-04 1796
无标题文档 .l1{  overflow:hidden; } .l1>ul{ list-style:none;} .l1>ul>li{ overflow:hidden;width:300px; height:371px; float:left; } .l1 img{transition:0.5s;} .l1 img:hover{ margin-left:-10px;}
css图片自动移动效果
08-16
可以放在首页的自动移动图片样式，很漂亮。
php图片滑动的属性,使用css怎么实现图片的滑动效果？（示例）
weixin_29968283的博客
03-17 249
本篇文章主要给大家介绍关于css实现图片的滑动效果示例，希望大家阅读完本篇后对css滑动效果的相关知识有所了解。下面给大家举一个简单的css图片滑动效果示例(自下而上滑动)：css怎么实现图片滑动img{height: 200px;width: 200px;}.slider {overflow-y: hidden;max-height: 500px;/* 最大高度 */background: pi...
css实现图片（箭头）无缝滚动（向右）
10-25
css样式控制实现图片无缝滚动，移动的速度是匀速，并且速度可控。
css 实现 图片左右滑动查看的效果
热门推荐
业余前端的职业经历
01-21 1万+
其实除了除了轮播图的那种图片效果外，图片滑动查看的效果 在网站中引用也是很多的，特别是在移动端，pc端的也有 就是我们是通过鼠标点击滑动的效果 我们先来看下效果吧 这样的效果 其实没必要用到js 直接用纯css就能实现 思路大概是 父元素 包括一个子元素 然后 如果高度和子元素高度不一致的话 还得再竖向方向上设置一个 hidden 然后里面 子元素 要设置一个比较长的 宽度 父元素 设置 overflow-x : auto; 就可以了 我们看下代码实现吧 dom布局 ...
用css样式实现图片横向滑动
m0_69450653的博客
08-19 676
css样式实现图片横向滑动
用CSS做滑动效果的图片画廊
zgqtxwd的专栏
04-30 529
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
图片滑动特效
差不少的博客
07-07 716
图片滑动特效 使用 swiper.min.css swiper.min.js jquery-1.10.1.min.js <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&gt...
css+jquery实现图片滑动特效果animate动画+定位纯手写
go24k的博客
11-06 561
通过jquery框架动画函数animate，结合css的position 绝对定位，实现图片自动的轮播，轮播内容不限于图片，也可以是自定义的html模块。想当年做后端开发，对前端总是保持了“强烈的敬畏心”，尤其是对这些滑动的css特效，更是“不忍直视”，但是逼急之后，只能手撕它了！
html图片滑屏css,html+css实现图片滑移效果
weixin_35612315的博客
06-04 302
ChouTiZhanShi.htmlbody{background:url("img/bg.jpg")no-repeat}*{margin:0px; padding:0px;}#imgs{width:1218px ; height:233px ;border-radius:9px;box-shadow:0px 0px 8px #000;margin:20px auto;}#imgs ul {lis...
html图片从左往右滑动,js实现从左向右滑动式轮播图效果
weixin_36372146的博客
06-10 2795
轮播图就是让图片每隔几秒自动滑动，达到图片轮流播放的效果。轮播图从效果来说有滑动式的也有渐入式的，滑动式的轮播图就是图片从左向右滑入的效果，渐入式的轮播图就是图片根据透明度渐渐显示的效果，这里说的是实现第一种效果的方法。原理相同大小的图片并成一列，但只显示其中一张图片，其余的隐藏，通过修改left值来改变显示的图片。html部分nav为总容器，第一个ul列表#index为小圆点列表，鼠标覆盖哪个小...
自动滑动图片html5,html+css+js 实现自动滑动轮播图
weixin_29338361的博客
05-30 546
轮播图*{margin: 0 auto;padding: 0;list-style: none; //去圆点}.one {width: 1200px;height:350px;margin: 0 auto;overflow: hidden; //设定好的宽度多余的进行隐藏}.one ul{width: 3600px;position: relative;}.one ul li{float...
html实现各种好看的鼠标滑过图片特效模板
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
12-01 4736
html实现各种好看的鼠标滑过图片特效模板，html鼠标悬浮特效，html鼠标悬浮好看的动态效果，每种效果都非常好看，可以自己配置相对应的字体、颜色、背景、效果等动画效果，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
dw在php图片滑动切换效果,超简单的图片左右切换滑动
weixin_42496225的博客
03-27 3337
网上看过很多图片左右切换滑动的效果，不过大都是使用插件实现。插件虽方便，但是对于新手的学习并不是最好的。本文使用jquery这个由原生的JavaScript封装的库，用最简短的代码实现此功能效果预览如下图：代码部分(直接复制代码便可使用，注意对应的图片路径改成自己的图片路径，图片大小建议300*300)html>超简单的图片左右切换滑动varcot=0;//设置一个计数器，初始值为0；作用...
html的一个有趣的图层+图片滑动
baiyouyunxu的博客
08-31 853
首先图片是这样的 接着我拖动滑动条是这样的 最后再拖动是这样 发现没有上面三张截图图的第二张图片不随拖动滑动条而滑动，拖动滑动条，图片整体不懂，只有图层上下滑动。随着图层滑动，图片隐藏，显现。下面是代码        .style4{                          height:800px;                           widt
html实现自动图片轮播,图片轮播的实现（html__js）
weixin_30794755的博客
06-02 9591
1.简单实现1)实现思想：通过轮播次数来决定显示那一张首先，可以用简单的div 包含img的框架来实现，我们为他添加按钮，每个按钮对应不同的图片，那么，每点击一次，将要显示的图片的style.dispay属性设置为'block'将不显示的图片的display设置为none，可以实现简单的按钮点击实现轮播，再者，我们可以利用间歇调用setInterval()方法来实现自动轮播2)算法的实遇新是直朋能...
Html5+Css3实现图片的无缝滚动
起小点
01-10 5264
Html5+Css3实现图片的无缝滚动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画实现无缝滚动图片</title> <style> *{ marg...
html 图片悬停,CSS3 3种图片悬停时的内容滑出方式
weixin_39907131的博客
06-04 135
CSS语言：CSSSCSS确定@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300&subset=latin,cyrillic-ext);/* Vars */body * {box-sizing: border-box;}body {background: #282828;color: #fafafa...
html＋css实现图片自动轮播
最新发布
06-08
HTML和CSS可以结合使用，再加上JavaScript（如果需要动态效果）来实现图片轮播功能。以下是一个基本的步骤和示例代码： 1. **HTML结构**: ```html <div class="slideshow-container"> <div class="slide"> <img src="image1.jpg" alt="Image 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Image 2"> </div> <!-- 更多图片 --> </div> ``` 2. **CSS样式**: ```css .slideshow-container { position: relative; width: 100%; height: 400px; overflow: hidden; } .slide { position: absolute; display: none; } .slide.active { display: block; } ``` 3. **JavaScript (可选, CSS3动画实现轮播)**: 无JavaScript的情况下，可以通过CSS3的`transition`或`animation`实现简单的轮播效果。例如，使用关键帧动画： ```css .slide { transition: transform 2s ease-in-out; } .slide.active { transform: translateX(0); } .slide.next { transform: translateX(-100%); } /* 添加按钮切换事件 */ <button onclick="changeSlide(-1)">Prev</button> <button onclick="changeSlide(1)">Next</button> ``` 4. **JavaScript 动态切换图片**: ```javascript function changeSlide(direction) { var slides = document.querySelectorAll('.slide'); var currentSlide = slides[slides.length * direction]; // 根据方向获取当前显示的图片 // 切换显示状态 currentSlide.classList.remove('active'); currentSlide.classList.add('next'); // 获取下一张/上一张并切换 var nextSlide = slides[slides.length * direction + 1]; if (nextSlide) { nextSlide.classList.remove('next'); nextSlide.classList.add('active'); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值