Cet article présente l'exemple de l'effet de défilement de commutation de carrousel en cascade d'images js focus et le partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant
.Rendu :
Description de la fonction :
Code détaillé :
Code 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>
code 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; });
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.