原生js实现图片层叠轮播切换效果
更新时间：2016年2月5日 14:41 点击：2069
本文实例介绍了js焦点图片层叠轮播切换滚动效果，分享给大家供大家参考，具体内容如下
效果图：
功能描述：
- 自定义图片尺寸；
- 每隔一段时间自动滚动图片；
- 每次动画执行的时候改变图片的位置，宽高以及其它属性也要跟随着变化；
- 鼠标移上图片，显示当前图片的详细信息；
- 点击按钮向前向后滚动；
详细代码:
html代码:
<!DOCTYPE html>
<!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topic/xiuxuan.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
*{margin:0px; padding:0px;font-family:"Microsoft YaHei"}
ol,ul{list-style:none;}
cite,em,i{font-style:normal}
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.myclearfix:after { clear:both; visibility:hidden;}
.myclearfix { display: block; _display:inline-block; overflow:hidden;}
#largerImages{position:relative;width:1000px;margin:0 auto;height:520px;overflow:hidden;}
#largerImages li{box-shadow:1px 1px 12px rgba(200, 200, 200, 1);width:368px;height:368px; position:absolute;top:10px;overflow:hidden;color:#fff;}
#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;}
#largerImages img{border:0px;width:100%;height:100%;}
#largerImages .previous{left:13%;}
#largerImages .next{left:53%;}
#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;}
#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);}
#largerImages .previous em,#largerImages .next em{height:100%;width:100%;display:block;position:absolute;top:0px;left:0px;font-size:26px; font-family: "宋体";}
#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;}
#largerImages li span{background-color:#000;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);font-size:12px;}
</style>
</head>
<body>
<ul id = "largerImages">
<p class="previous"><span> </span><em><</em></p>
<p class="next"><span> </span><em>></em></p>
<li><i class="cover"> </i>
<a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/9/90/qq-srntbvlhcw_b_56.com_160106133546.jpg"></a>
<p class="tab_name"><span> </span><em>主播昵称</em></p>
</li>
<li><i class="cover"> </i>
<a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/96/58/dc15170219625_b_56.com_151201150445.jpg"></a>
<p class="tab_name"><span> </span><em>主播昵称</em></p>
</li>
<li><i class="cover"> </i>
<a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/9/90/qq-srntbvlhcw_b_56.com_160106133546.jpg"></a>
<p class="tab_name"><span> </span><em>主播昵称</em></p>
</li>
<li><i class="cover"> </i>
<a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/96/58/dc15170219625_b_56.com_151201150445.jpg"></a>
<p class="tab_name"><span> </span><em>主播昵称</em></p>
</li>
<li><i class="cover"> </i>
<a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/9/90/qq-srntbvlhcw_b_56.com_160106133546.jpg"></a>
<p class="tab_name"><span> </span><em>主播昵称</em></p>
</li>
</ul>
<script type="text/javascript" src="../../lib/seajs/sea.js"></script>
<script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script>
<script type="text/javascript">
seajs.use(['lib/jquery/1.11.x/index.js','_example/rotateBox/index.js'],function($,carousel) {
carousel.init({
wapper: $('#largerImages'),
//所有图片以此来按比例定义宽高
imgWidth: 450,
imgHeight: 300,
spacing: {
left: 60, //每张图片左边距离相差多少
top: 30, //每张图片顶部距离相差多少
width: 60, //每张图片宽度相差多少
height: 60 //每张图片高度相差多少
}
});
});
</script>
</body>
</html>
js 代码:
define(function(require, exports, module) {
'use strict';
var $ = require('lib/jquery/1.11.x/index.js');
var carousel = {
_initData:false, //判断动画是否执行完毕
init: function(options) {
var t = this;
t._wapper = options.wapper;
t._grids = t._wapper.find('li');
t._gridsWidth = options.imgWidth;
t._gridsHeight = options.imgHeight;
t._spacing = options.spacing;
//取居中图片
t._middle = t._grids.length % 2 == 0 ? t._grids.length / 2 : parseInt(t._grids.length / 2);
//存放各图片参数
t._arr = {
left: [],
top: [],
zIndex: [],
width: [],
height: []
}
if ( !t._initData ) {
var interval;
interval = setInterval(function(){
$('.previous').click();
},10000);
}
t._largerImages();
t._reposition();
t._mouseEnter(t._grids) //鼠标移动上去显示主播昵称
},
//初始化定位：
_largerImages: function() {
var t = this;
var front = t._middle;
var avtive = t._middle;
var last = t._grids.length;
t._grids.each( function(i, img) {
if (i == t._middle) {
t._grids.eq(i).css({
zIndex: 99,
top: 0,
left: t._spacing.left * i,
height: t._gridsHeight,
width: t._gridsWidth
});
} else if ( i < t._middle ) {
t._grids.eq(i).css({
zIndex: i,
top: t._spacing.top * front,
left: t._spacing.left * i,
height: t._gridsHeight - t._spacing.height * front,
width: t._gridsWidth - t._spacing.width * front
});
front--;
} else {
last --;
t._grids.eq(last).css({
zIndex: i,
top: t._spacing.top * avtive,
left: t._spacing.left * last + t._spacing.width * avtive,
height: t._gridsHeight - t._spacing.height * avtive,
width: t._gridsWidth - t._spacing.width * avtive
});
avtive --;
};
});
},
//翻页动画
_reposition: function() {
var t = this;
//把各属性值传到数组里面
t._grids.each( function(i,img) {
t._arr.left.push(t._grids.eq(i).position().left);
t._arr.top.push(t._grids.eq(i).position().top);
t._arr.width.push(t._grids.eq(i).width());
t._arr.height.push(t._grids.eq(i).height());
t._arr.zIndex.push(t._grids.eq(i).css('z-index'));
});
//向前翻页
$('.previous').bind('click',function() {
if ( !t._initData && t._arr.left.length != 0) {
t._initData = true;
//重新获取选择器
var grids = t._wapper.find('li');
for (var i = 1; i < grids.length ; i ++) {
grids.eq(i).animate({
zIndex: t._arr.zIndex[i - 1],
left: t._arr.left[i - 1],
top: t._arr.top[i - 1],
width: t._arr.width[i - 1],
height: t._arr.height[i - 1],
},200,
function() {
t._initData = false;
grids.find('i').addClass('cover');
grids.eq(t._middle + 1).find('i').removeClass('cover');
});
};
grids.eq(0).animate({
left: t._arr.left[ grids.length - 1],
top: t._arr.top[ grids.length - 1],
width: t._arr.width[ grids.length - 1],
height: t._arr.height[ grids.length - 1],
zIndex: t._arr.zIndex[ grids.length - 1]
},200,
function(){
$(this).appendTo(t._wapper);
});
}
});
//向后翻页
$('.next').bind('click',function() {
if ( !t._initData && t._arr.left.length != 0) {
t._initData = true;
//重新获取选择器
var grids = t._wapper.find('li');
for (var i = 0; i < grids.length - 1; i ++) {
grids.eq(i).animate({
left: t._arr.left[i + 1],
top: t._arr.top[i + 1],
width: t._arr.width[i + 1],
height: t._arr.height[i + 1],
zIndex: t._arr.zIndex[i + 1]
},200,function() {
t._initData = false;
});
};
grids.eq(grids.length - 1).animate({
left: t._arr.left[0],
top: t._arr.top[0],
width: t._arr.width[0],
height: t._arr.height[0],
zIndex: t._arr.zIndex[0]
},200,
function(){
$(this).prependTo(t._wapper);
grids.find('i').addClass('cover');
grids.eq(t._middle - 1).find('i').removeClass('cover');
});
}
});
},
//鼠标进入图片效果
_mouseEnter: function(grids) {
grids.each(function(i){
$(this).mouseenter(function() {
$(this).find('.tab_name').animate({
bottom:0,opacity: 'show'
},200);
});
$(this).mouseleave(function() {
$(this).find('.tab_name').animate({
bottom:-50,opacity: 'hide'
},200);
});
});
},
};
return carousel;
});
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06
- 作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办，不知道具体解决办法的下面跟小编一起来看看。 因项目需要，需要Node.js与PHP做接口调用，发现nod...2017-07-06
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
- 使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式，可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash（哈希），hmac（密钥哈希），cipher...2014-06-07
- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要介绍了Nodejs回调加超时限制两种实现方法的相关资料,需要的朋友可以参考下...2017-06-15
- 1.什么是异步编程？ 异步编程是指由于异步I/O等因素，无法同步获得执行结果时， 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数、ajax请求等等。示例： for (var i = 1; i <= 3; i++) {setTimeout(functi...2015-10-23
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记，内容很详细，感兴趣的小伙伴们可以参考一下...2016-05-20