js焦点图片层叠轮播切换滚动
2024-05-01 20:57:26
拉门循环滚动展示图片的动画写得多了，今天来一个平时少写的，先上图：
功能描述：
自定义图片尺寸；
每隔一段时间自动滚动图片；
每次动画执行的时候改变图片的位置，宽高以及其它属性也要跟随着变化；
鼠标移上图片，显示当前图片的详细信息；
点击按钮向前向后滚动；
注意：
因为用的是seajs写的，所以稍微需要留意下文件的加载啦
详细代码:
html代码:
1 <!DOCTYPE html>
2 <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topic/xiuxuan.html -->
3 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4
5 <title></title>
6 <style type="text/css">
7 *{margin:0px; padding:0px;font-family:"Microsoft YaHei"}
8 ol,ul{list-style:none;}
9 cite,em,i{font-style:normal}
10 * html .clearfix { height: 1%; }
11 .clearfix { display: block; }
12 .myclearfix:after { clear:both; visibility:hidden;}
13 .myclearfix { display: block; _display:inline-block; overflow:hidden;}
14
15 #largerImages{position:relative;width:1000px;margin:0 auto;height:520px;overflow:hidden;}
16 #largerImages li{box-shadow:1px 1px 12px rgba(200, 200, 200, 1);width:368px;height:368px; position:absolute;top:10px;overflow:hidden;color:#fff;}
17 #largerImages li .cover{background-color:#333;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);height:100%;width:100%;display:block;position:absolute;top:0px;}
18 #largerImages img{border:0px;width:100%;height:100%;}
19 #largerImages .previous{left:13%;}
20 #largerImages .next{left:53%;}
21 #largerImages .previous,#largerImages .next{cursor:pointer; position:absolute;z-index:100; top:25%;height:60px;line-height:60px;width:30px;color:#fff;text-align:center;}
22 #largerImages .previous span,#largerImages .next span{position:absolute;top:0px;left:0px;height:100%;width:100%;display:block;background-color:#000;opacity:0.4;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);}
23 #largerImages .previous em,#largerImages .next em{height:100%;width:100%;display:block;position:absolute;top:0px;left:0px;font-size:26px; font-family: "宋体";}
24 #largerImages li span,#largerImages li em{position:absolute;left:0px;width:100%;height:30px;line-height:30px; bottom:0px;text-align:center;display:block;color:#fff;}
25 #largerImages li span{background-color:#000;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);font-size:12px;}
26
27 </style>
28 </head>
29 <body>
30
31 <ul id = "largerImages">
32 <p class="previous"><span> </span><em><</em></p>
33 <p class="next"><span> </span><em>></em></p>
34 <li><i class="cover"> </i>
35 <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/9/90/qq-srntbvlhcw_b_56.com_160106133546.jpg"></a>
36 <p class="tab_name"><span> </span><em>主播昵称</em></p>
37 </li>
38 <li><i class="cover"> </i>
39 <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/96/58/dc15170219625_b_56.com_151201150445.jpg"></a>
40 <p class="tab_name"><span> </span><em>主播昵称</em></p>
41 </li>
42 <li><i class="cover"> </i>
43 <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/9/90/qq-srntbvlhcw_b_56.com_160106133546.jpg"></a>
44 <p class="tab_name"><span> </span><em>主播昵称</em></p>
45 </li>
46 <li><i class="cover"> </i>
47 <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/96/58/dc15170219625_b_56.com_151201150445.jpg"></a>
48 <p class="tab_name"><span> </span><em>主播昵称</em></p>
49 </li>
50 <li><i class="cover"> </i>
51 <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/9/90/qq-srntbvlhcw_b_56.com_160106133546.jpg"></a>
52 <p class="tab_name"><span> </span><em>主播昵称</em></p>
53 </li>
54 </ul>
55
56 <script type="text/javascript" src="../../lib/seajs/sea.js"></script>
57 <script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script>
58 <script type="text/javascript">
59 seajs.use(['lib/jquery/1.11.x/index.js','_example/rotateBox/index.js'],function($,carousel) {
60 carousel.init({
61 wapper: $('#largerImages'),
62
63 //所有图片以此来按比例定义宽高
64 imgWidth: 450,
65 imgHeight: 300,
66
67 spacing: {
68 left: 60, //每张图片左边距离相差多少
69 top: 30, //每张图片顶部距离相差多少
70 width: 60, //每张图片宽度相差多少
71 height: 60 //每张图片高度相差多少
72 }
73 });
74 });
75 </script>
76 </body>
77 </html>View Code
js 代码:
1 define(function(require, exports, module) {
2 'use strict';
3 var $ = require('lib/jquery/1.11.x/index.js');
4
5 var carousel = {
6
7 _initData:false, //判断动画是否执行完毕
8
9 init: function(options) {
10 var t = this;
11 t._wapper = options.wapper;
12 t._grids = t._wapper.find('li');
13 t._gridsWidth = options.imgWidth;
14 t._gridsHeight = options.imgHeight;
15 t._spacing = options.spacing;
16
17 //取居中图片
18 t._middle = t._grids.length % 2 == 0 ? t._grids.length / 2 : parseInt(t._grids.length / 2);
19
20 //存放各图片参数
21 t._arr = {
22 left: [],
23 top: [],
24 zIndex: [],
25 width: [],
26 height: []
27 }
28
29 if ( !t._initData ) {
30 var interval;
31 interval = setInterval(function(){
32 $('.previous').click();
33 },10000);
34 }
35
36 t._largerImages();
37 t._reposition();
38 t._mouseEnter(t._grids) //鼠标移动上去显示主播昵称
39 },
40 //初始化定位：
41 _largerImages: function() {
42 var t = this;
43
44 var front = t._middle;
45 var avtive = t._middle;
46 var last = t._grids.length;
47
48 t._grids.each( function(i, img) {
49
50 if (i == t._middle) {
51
52 t._grids.eq(i).css({
53 zIndex: 99,
54 top: 0,
55 left: t._spacing.left * i,
56 height: t._gridsHeight,
57 width: t._gridsWidth
58 });
59
60 } else if ( i < t._middle ) {
61
62 t._grids.eq(i).css({
63 zIndex: i,
64 top: t._spacing.top * front,
65 left: t._spacing.left * i,
66 height: t._gridsHeight - t._spacing.height * front,
67 width: t._gridsWidth - t._spacing.width * front
68 });
69
70 front--;
71
72 } else {
73
74 last --;
75
76 t._grids.eq(last).css({
77 zIndex: i,
78 top: t._spacing.top * avtive,
79
80 left: t._spacing.left * last + t._spacing.width * avtive,
81 height: t._gridsHeight - t._spacing.height * avtive,
82 width: t._gridsWidth - t._spacing.width * avtive
83 });
84
85 avtive --;
86 };
87 });
88 },
89 //翻页动画
90 _reposition: function() {
91 var t = this;
92
93 //把各属性值传到数组里面
94 t._grids.each( function(i,img) {
95 t._arr.left.push(t._grids.eq(i).position().left);
96 t._arr.top.push(t._grids.eq(i).position().top);
97 t._arr.width.push(t._grids.eq(i).width());
98 t._arr.height.push(t._grids.eq(i).height());
99 t._arr.zIndex.push(t._grids.eq(i).css('z-index'));
100 });
101
102 //向前翻页
103 $('.previous').bind('click',function() {
104 if ( !t._initData && t._arr.left.length != 0) {
105
106 t._initData = true;
107
108 //重新获取选择器
109 var grids = t._wapper.find('li');
110
111 for (var i = 1; i < grids.length ; i ++) {
112
113 grids.eq(i).animate({
114 zIndex: t._arr.zIndex[i - 1],
115 left: t._arr.left[i - 1],
116 top: t._arr.top[i - 1],
117 width: t._arr.width[i - 1],
118 height: t._arr.height[i - 1],
119 },200,
120 function() {
121 t._initData = false;
122 grids.find('i').addClass('cover');
123 grids.eq(t._middle + 1).find('i').removeClass('cover');
124 });
125 };
126
127 grids.eq(0).animate({
128 left: t._arr.left[ grids.length - 1],
129 top: t._arr.top[ grids.length - 1],
130 width: t._arr.width[ grids.length - 1],
131 height: t._arr.height[ grids.length - 1],
132 zIndex: t._arr.zIndex[ grids.length - 1]
133 },200,
134 function(){
135 $(this).appendTo(t._wapper);
136 });
137
138 }
139 });
140 //向后翻页
141 $('.next').bind('click',function() {
142 if ( !t._initData && t._arr.left.length != 0) {
143
144 t._initData = true;
145
146 //重新获取选择器
147 var grids = t._wapper.find('li');
148
149 for (var i = 0; i < grids.length - 1; i ++) {
150 grids.eq(i).animate({
151 left: t._arr.left[i + 1],
152 top: t._arr.top[i + 1],
153 width: t._arr.width[i + 1],
154 height: t._arr.height[i + 1],
155 zIndex: t._arr.zIndex[i + 1]
156 },200,function() {
157 t._initData = false;
158 });
159 };
160 grids.eq(grids.length - 1).animate({
161 left: t._arr.left[0],
162 top: t._arr.top[0],
163 width: t._arr.width[0],
164 height: t._arr.height[0],
165 zIndex: t._arr.zIndex[0]
166 },200,
167 function(){
168 $(this).prependTo(t._wapper);
169 grids.find('i').addClass('cover');
170 grids.eq(t._middle - 1).find('i').removeClass('cover');
171 });
172
173 }
174 });
175 },
176 //鼠标进入图片效果
177 _mouseEnter: function(grids) {
178 grids.each(function(i){
179 $(this).mouseenter(function() {
180 $(this).find('.tab_name').animate({
181 bottom:0,opacity: 'show'
182 },200);
183 });
184 $(this).mouseleave(function() {
185 $(this).find('.tab_name').animate({
186 bottom:-50,opacity: 'hide'
187 },200);
188 });
189 });
190 },
191 };
192
193 return carousel;
194 });View Code
转载于:https://www.cnblogs.com/Travel/p/4463726.html
js焦点图片层叠轮播切换滚动相关推荐
- js实现图片3D轮播效果（收藏）
3D的图片轮播效果很炫,写到这里只是为了不丢代码,不为别的. 效果预览: html代码: <head> <meta http-equiv="Content-Type&quo ...
- html图片自动左右轮播,原生JS实现图片左右轮播
本效果使用js实现,当图片移动到200像素后回到0像素再向右移动200像素一直左右移动,不需要marquee标签. 完整的HTML代码如下,保存到HTML文档打开可以查看效果: JS使图片左右移动_何 ...
- HTML+CSS+JS实现 ❤️HTML5图片幻灯片轮播切换❤️
效果演示: 文末获取源码 代码目录: 主要代码实现: HTML代码 : <!DOCTYPE html> <html><head><meta charset= ...
- html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
- JS图片轮播切换效果实现
效果演示地址:http://6689.one/WebEffects/pictureplay.html 实现代码如下: </pre> <pre name="code" ...
- js 图片打碎_html5 tweenmax.js打碎玻璃图片轮播切换特效
特效描述:html5 tweenmax.js 打碎玻璃图片 轮播切换特效.html5碎玻璃图片切换特效,tweenmax.js实列 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 co ...
- 15款jQuery带缩略图的图片轮播切换特效代码
JQuery宽屏电影大图幻灯片轮播切换代码 jquery带文字缩略图的图片轮播切换代码 jQuery OwlCarousel图片滚动插件世界杯图片轮播滚动代码 jQuery仿中国建设银行带缩略图控制滚 ...
- 十个jQuery的幻灯片图片轮播切换插件[转]
1.Simple Controls Gallery 是基于jQuery的一个幻灯插件,非常不错,详细演示及下载请点击下面的链接 http://www.dynamicdrive.com/dynamici ...
- Jquery 广告图片轮播切换
要点: 1.鼠标移至图片上出现左右箭头,鼠标移出图片时,左右箭头消失 2.单击左右箭头时,显示上一个/下一个图片,当前数字背景为橙色,其他数字背景为#333333,第一个/最后一个图片显示时,单击箭 ...
最新文章
- 第四章 数据库和SQL 4-3 数据的更新（UPDATE语句的使用方法）
- mediumtext和string转换_数据类型 - 字符串类型 - 《TiDB v3.0 用户文档》 - 书栈网 · BookStack...
- linux-basic(6)linux的文件权限与目录配置
- 10个在线Web设计开发工具介绍
- android中设置菜单栏,android – 菜单项没有显示在操作栏
- 邮票的孔怎么做出来的_金银花茶是怎么做出来的呢
- 企业微信加密消息体_微信公众平台开发者中心安全模式消息体加解密实现
- linux文件系统管理知识导图,Linux磁盘和文件系统管理基础知识自测
- 智能优化算法：JAYA优化算法 -附代码
- windows下python访问ipv6报错
- linux系统下JDK的下载安装和配置教程
- DTU和RTU的区别
- Openstack版本查看
- [CGAL] CGAL的世界-Kernel内核、Traits特征类
- 使用List和Map遇到得空指针异常
- 4/17 腾讯广州微信客户端开发一面
- Pboot插件-包含所有Pboot插件功能
- 短视频app源码开发，短视频录制的实现
- 只需这篇文章java线程池原理便懂了！♥♥
- 项目开发过程中的管理规范