轮播，缩略图

最新推荐文章于 2024-02-01 00:49:55 发布
最新推荐文章于 2024-02-01 00:49:55 发布
阅读量610 收藏 1
点赞数
分类专栏： css3+javascript应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012841667/article/details/52728144
版权

实现效果，鼠标移动到下面横线，有缩略图

1、布局

先设置幻灯片图，有图片和标题部分，图片超出部分使用overflow:hidden;

再设置导航栏部分，使用text-alight:center;使得其居中，缩略图设置有倒影，缩略图设置大小，使用opcation设置显示与不显示

设置二者的激活状态

2、使用模板插入幻灯片和导航部分

repace(re,'')替换{{index}}与{{h2}}、{{h3}}，将组装的数据都放入数组out_main和数组out_ctrl中，然后out_main.join('')和out_ctrl.join('')插入到文档中


3、切换幻灯片

去掉和添加ctrl-i_active和main-i_active


4、去掉切换时产生的空白

多定义一个main_background，它和main-i_active一样，保留当前的main-i_active，切换时，相当于作为背景，这样就不会出现空白了。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>轮播</title>
	<style>
		*{margin:0;padding:0;}
		body{
<span style="white-space:pre">			width:1350px;</span>
<span style="white-space:pre">			</span>padding: 50px 0;
			background-color:#fff;
			font-size:14px;
			font-family:'Avenir Next';
			color:#555;
			-webkit-font-smoothing:antialiased;/*字体抗齿型*/
		}
		.slider,.slider .main,.slider .main .main-i,.slider .main .main-i  img{
			width:100%;
			height:400px;
			position:relative;
		}
		/* 幻灯片区域 */
		.slider .main{
			overflow:hidden;
		}
		/* 每一个幻灯片 */
		.slider .main .main-i{
			
		}
		.slider .main .main-i  img{
			position: absolute;
			top:50%;
			left:0;
			z-index:1;
			transition: all .8s;

		}
		.slider .main .main-i .caption{
			position: absolute;
			top:30%;
			left: 13%;
			z-index:9;

		}
		.slider .main .main-i .caption h2{
			font-size:40px;
			color:#b5b5b5;
			line-height:50px;
			text-align:right;
		}
		.slider .main .main-i .caption h3{
			font-size:60px;
			color:#000;
			line-height:60px;
			font-family:'Open Sans Condensed';
			text-align:right;
		}
		
		/* 控制区域 */
		.slider .ctrl{
			width: 100%;
			height:13px;
			line-height:13px;
			text-align:center;
			top:0;
			bottom:-13px;
		}
		.slider .ctrl .ctrl-i{
			width:150px;
			height:13px;
			display:inline-block;
			background-color:#666;
			box-shadow:0 1px 1px rgba(0,0,0,.3); 
			position: relative;
			margin-right:1px;
			
		}
		.slider .ctrl .ctrl-i img{
			width:100%;
			position: absolute;
			left:0;
			bottom:50px;
			z-index:2;
			-webkit-transition:all .2s;
			opacity: 0
		}
		.slider .ctrl .ctrl-i:hover{
			background-color:#f0f0f0;
		}
		.slider .ctrl .ctrl-i:hover img{
			bottom: 13px;
			-webkit-box-reflect: below 0px -webkit-gradient(
				linear,
				left top,
				left bottom,
				from( transparent ),
				color-stop( 50%, transparent),
				to( rgba(255,255,255,.3))
				);
			opacity: 1;
		}
		
		/* 控制按钮切换 */
		.slider .ctrl .ctrl-i_active,	.slider .ctrl .ctrl-i_active:hover{
			background-color:#000;
		}
		.slider .ctrl .ctrl-i_active:hover img{
			opacity: 0
		}
		/* 幻灯片切换 */
		.slider .main .main-i{
			opacity: 0;
			position: absolute;
			right: 50%;
			top:0;
			transition: all .5s;
			z-index:2;
		}
		.slider .main .main-i .caption h2{
			margin-right:45px;
		}
		.slider .main .main-i .caption h3{
			margin-right:-45px;
		}
		.slider .main .main-i .caption h2,.slider .main .main-i .caption h3{
			transition: all 1s 0.8s;
		}
		
		.slider .main .main-i_active{
			position: absolute;
			top:0;
			right:0;
			opacity: 1;
			
		}
		#main_background{
			z-index:1;
			position: absolute;
			top:0;
			right:0;
			opacity: 1;
		}
		.slider .main .main-i_active .caption h2{
			margin-right: 0;
		}
		.slider .main .main-i_active .caption h3{
				margin-right: 0;
		}
		
	</style>
</head>
<body>
<div class="slider">
	<div class="main" id="template_main"> 
		<div class="main-i" id="main_{{index}}">
			<div class="caption">
				<h2>{{h2}}</h2>
				<h3>{{h3}}</h3>
			</div>
			<img src="imgs/{{index}}.jpg" alt="img" class="pictrue" />
		</div>
		
	</div>
	<div class="ctrl" id="template_ctrl">
		<a class="ctrl-i" href="javascript:switchSlider({{index}});"  id="ctrl_{{index}}">
			<img src="imgs/{{index}}.jpg" alt="img" />
		</a>
	</div>
</div>

<script>
	var data = [
	{img:1,h2:'Creative',h3:'DUET'},
	{img:2,h2:'Friendly',h3:'DEVIL'},
	{img:3,h2:'Tranquilent',h3:'COMPATRIOT'},
	{img:4,h2:'Insecure',h3:'HUSSLER'},
	{img:5,h2:'Loving',h3:'REBEL'},
	{img:6,h2:'Passionate',h3:'SEEKER'},
	{img:7,h2:'Crazy',h3:'FRIEND'}];
	var g = function(id){
		if(id.substr(0,1)=="."){
			return document.getElementsByClassName(id.substr(1));
		}
		return document.getElementById(id);
	}
	//添加幻灯片
	function addSilders(){
		//获取模板
		var tpl_main = g('template_main').innerHTML
						.replace(/^\s*/,'')
						.replace(/\s*$/,'');
		var tpl_ctrl = g('template_ctrl').innerHTML
						.replace(/^\s*/,'')
						.replace(/\s*$/,'');
		//替换模板
		var out_main = [];
		var out_ctrl = [];
		for(var i in data){
			var _html_main = tpl_main.replace(/{{index}}/g,data[i].img).
			replace(/{{h2}}/g,data[i].h2).
			replace(/{{h3}}/g,data[i].h3);
			var _html_ctrl = tpl_ctrl.replace(/{{index}}/g,data[i].img);
			out_main.push(_html_main);
			out_ctrl.push(_html_ctrl);
		}
		//回写
		g('template_main').innerHTML = out_main.join('');
		g('template_ctrl').innerHTML = out_ctrl.join('');

		//不出现白底
		g('template_main').innerHTML +=tpl_main;
		g('main_{{index}}').id ='main_background';
	}
	//切换幻灯片
	function switchSlider(n){
		var main = g('main_'+n);
		var ctrl = g('ctrl_'+n);
		//清除所有的active
		var clear_main = g('.main-i');
		var clear_ctrl = g('.ctrl-i');
		for(var i=0;i<clear_ctrl.length;i++){
			clear_ctrl[i].className = clear_ctrl[i].className.replace(/ ctrl-i_active/g,'');
			clear_main[i].className = clear_main[i].className.replace(/ main-i_active/g,'');
		}

		main.className +=' main-i_active';
		ctrl.className +=' ctrl-i_active';
		//空白
		setTimeout(function(){
			g('main_background').innerHTML = main.innerHTML;
			console.log(g('main_background').innerHTML);
		},1000)
		

	}
	function movePictrue(){
		var pictrues = g('.pictrue');
		for(var i=0;i<pictrues.length;i++){
			pictrues[i].style.marginTop = (-1*pictrues[i].clientHeight/2)+'px';
		}
	}
	window.onload = function(){
		addSilders();
		switchSlider(2);
		setTimeout(function(){
			movePictrue();
		},100);
	}
</script>
</body>
</html>



qq小小布丁
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单的图片轮播带缩略图焦点图轮换效果
11-13
简单的图片轮播带缩略图焦点图轮换效果
轮播图 带有缩略图
seb_lin666的博客
02-25 2391
设计给了个图 要求轮播带有 缩略图 选样式还要放大 如下图 在网上找了下没有有相似的 但还是与设计图有些差距 无奈 找了原来的代码 以此为基础 改呗 主要的还是缩略图的点击 放大 缩小 以及大于5时选中第5个小图时 整体滚动就是个小的轮播 无论是点击上一个、下一个、还是缩略图 当选中的缩略图为 第一个或第五个时（下图选中放大的为第三个） 做判断 第一个：获取当前元素前面有几个兄弟元素 如果大于等于...
vue中使用swiper实现缩略图完整版
sun的博客
01-30 889
vue中使用swiper实现缩略图
图片轮播效果
chenzhibao7370的博客
12-21 108
<scriptsrc="jquery-1.11.2.min.js"></script> <script> //图片轮播 $(function(){ varnow=0; var$slider=...
vue-awesome-swiper 实现轮播图和缩略图联动
wxCSDN1997的博客
01-17 6525
最近有一个（VUE）需求实现如下： 可以通过左右箭头按钮实现轮播图，轮播图切换时，下方的缩略图也要对应显示，并且缩略图是可以滚动的（比方说一共有八张图片，但是缩略图展示时一次只能展示五张）。同时点击缩略图时，轮播图也要对应显示。 下面是已完成的效果图。 要完成此需求首先去查了很多插件。像elementui实现轮播图都很方便，但是不符合我这该死的需求。 索性找到了这个插件，还有一些大佬的文档，解决坑的文档。列在下面。 vue-awesome-swiper | Homepage | Surmon.
右侧缩略图jQuery轮播图效果.zip
07-04
右侧缩略图jQuery轮播图效果是一款SliderPro实现左右布局带缩略图jQuery轮播图效果。
jQuery垂直缩略图轮播展示
11-12
jQuery垂直缩略图轮播展示 jQuery垂直缩略图轮播展示 jQuery垂直缩略图轮播展示 jQuery垂直缩略图轮播展示 jQuery垂直缩略图轮播展示
缩略图轮播
05-23
单个图片缩略图轮播 1.获取id为sequence 2.要轮播的东西添加data-seq 3.前一张和后一张点击的按钮分别添加样式class="seq-prev"和class="seq-next" 4.轮播的样式可以修改css 5.轮播常用参数在已有的js有注释。 6....
带缩略图的轮播图
08-10
点击互动缩略图可以改变展示的轮播图片
小程序轮播图+缩略图展示（用两个swiper，通过相同的current来实现联动）
qq_26642611的博客
06-24 1798
展示形式： <view class="pswiper-box"> <view class="pictures-box"> <view class="photo" > <swiper class="swiper" bindchange="bindchange" current="{{currentIndex}}" indicator-dots="{{indicatorDots}}" previou
带缩略图轮播效果（全屏切换）
12-17
插件描述：点击缩略图或点击缩略图左右按钮进行切换. 参考示例：http://www.jq22.com/jquery-info5141
基于JavaScript实现带缩略图的轮播效果
10-20
主要为大家详细介绍了基于JavaScript实现带缩略图的轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 上下轮播，右边小图预览组件
07-12
组件封装好了，可以直接在项目中引用，图片大小根据自己的项目以及设计图改一下就可以了。对大家有帮助记得给好评
切换效果：thumbs 缩略轮播图
blog
02-26 2571
文章目录前言一、最终效果二、代码复现总结 前言 swiper轮播图效果扩展二 —— thumbs缩略图。 一、最终效果 先来看一下我们的最终效果： 二、代码复现 有一次一个小坑就是，用 swiper4.5.1 居然会没有 swiper-slide-thumb-active类的添加，用早一些版本的又可以正常切换。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <m
轮播图之缩略图API
lixiaoyan_star的博客
05-13 417
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="swiper.min.css"> <script src="swiper.min.js">...
android 图片轮播带缩略图,超酷响应式带缩略图的jQuery轮播图插件
weixin_35996612的博客
06-04 277
PgwSlideshow是一款非常实用的响应式、支持触摸屏的jQuery轮播图插件。该轮播图插件带有缩略图预览效果，可以根据容器的大小自适应图片的宽度。你也可以自定义轮播图的高度，图片宽度会根据高度等比例匹配。该轮播图插件的特点有：响应式设计支持桌面和移动手机设备轻量级，压缩后只有4kb可以通过CSS来自定义轮播图的样式使用方法该轮播图插件依赖于jQuery(1.0以上版本)或Zepto(1.0以...
vue实现带缩略图的轮播图（vue-awesome-swiper）
lllomh的博客
02-01 680
和vue-awesome-swiper插件。template:布局。
Vue框架使用swiper5实现带缩略图的轮播图
weixin_49600762的博客
12-20 4143
我这里用的是 "swiper": "5.4.5"和"vue-awesome-swiper": "^3.1.3"，很多人在这就会有疑问，这两版本不对应啊，不急，这就是我发这文章的意义，一是记录一下自己的坑，二是同道中人参考。我为啥不装对应的包呢，因为我这个项目前面写的人已经装了这个了，我不能改呀，改了别人的就会出错了。首先看效果图先，毕竟需求都是不一样的嘛，我发这个文章主要是看了一些网页上的好多都存在缩略图那里的高亮居中问题，所以本文章主要就是实现当前图片看到的一些效果。
html轮播带缩略图,基于JavaScript实现带缩略图的轮播效果
weixin_42508215的博客
06-20 665
先瞄一眼js轮播效果图代码：*{padding:0;margin:0;}#content {width:400px;height:500px;margin:10px auto;position:relative;border:1px solid #000;color:red;font-size:20px;}#title, #bottom{position:absolute;width:400px;...
swiper 轮播图加缩略图
最新发布
03-15
要实现轮播图加缩略图，可以按照以下步骤进行操作： 1. 引入Swiper插件：首先，在你的项目中引入Swiper插件的CSS和JavaScript文件。你可以从Swiper官方网站下载最新版本的插件文件，或者使用CDN链接。 2. 创建HTML...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值