jQuery插件轻量图片轮换UISlide2

zoukankan html css js c++ java

jQuery插件轻量图片轮换UISlide2

UISlide 的不同效果展现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>UISlideDemo1.0</title> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  <script type="text/javascript" src="http://jquery-swip.googlecode.com/svn/trunk/jquery.easing.1.3.js"></script>  <style type="text/css"> *{ margin:0;padding:0;} body{font:12px/2 arial;background:#ccc;} a{color:#0029c4;text-decoration:none;} a:hover{color:#c00;} img{border:none 0;} .wrap{714px;margin:40px auto;border:2px solid #aaa;background:#fff;padding:5px 5px 0;} .slide_wrap{position:relative;710px;height:340px; margin-bottom:5px;border:2px solid #ccc;background:#fff;color:#666;overflow:hidden;} .slide_imglist{} /*.slide_imglist li{float:left;margin-right:3px;display:inline;}*/ .slide_imglist li{ float:left;margin-right:3px;display:inline;} .slide_imglist li img{710px;height:340px;display:block;} .slide_title{bottom:0;left:0;100%;height:45px;overflow:hidden;position:absolute;} .slide_title h3{position:absolute;top:0;left:0;height:45px;line-height:45px;overflow:hidden;padding:0 10px;z-index:2;display:block;} .slide_title h3 a{color:#efefef;font-weight:bold;font-size:16px;} .slide_title h3 a:hover{color:#ff0;} .slide_title em{position:absolute;left:0;display:block;top:0;100%;height:45px;opacity:0.45;filter:alpha(opacity=45);background:#000;z-index:1;} .slide_num{right:5px;z-index:3;top:0;position:absolute;} .slide_num dd{display:inline;margin:10px 4px 0 0;22px;height:22px;font-size:14px;text-align:center;line-height:22px;border:1px #eee solid;background:#d4d4d4;cursor:pointer;float:left;} .slide_num dd.active{color:#fff;border:1px #09f solid;background:#09f;} </style> </head> <body> <div class="wrap"> <div id="slide" class="slide_wrap"> <ul class="slide_imglist"> <li><a title="《画皮Ⅱ》正式版预告首发魔幻大作妖魅来袭" href="http://fanbuxie.vancl.com/" target="_blank"><img src="http://i4.vanclimg.com/users/26/20120318/focus_1_120318.jpg" alt="" /></a></li> <li><a title="《普罗米修斯》全新中文预告首发科幻大作终现全貌" href="http:////rihan.vancl.com/" target="_blank"><img src="http://i1.vanclimg.com/users/26/20120315/focus_6_3n_cs_120315.jpg" alt="" /></a></li> <li><a title="诡异华美缜密悬疑：12大日本推理名家改编宝典" href="http://children.vancl.com/search?navtype=08&attrid_category_attributes=7939" target="_blank"><img src="http://i2.vanclimg.com/users/26/20120321/focus_tz_120321_nn.jpg" alt="" /></a></li> </ul> <div class="slide_title"> <h3><a href="#" target="_blank">设计好脾气的Web页面</a></h3> <dl class="slide_num"></dl> <em></em> </div> </div>  <div id="slide2" class="slide_wrap"> <ul class="slide_imglist"> <li><a title="现代主妇vs职业女性：从 "广告狂人" 看60年代女性风尚" href="http://vt.vancl.com/" target="_blank"><img src="http://i5.vanclimg.com/users/26/20120316/foucs_2_4_vt_201203016n.jpg" alt="" /></a></li> <li><a title="诡异华美缜密悬疑：12大日本推理名家改编宝典" href="http://xiuxianku.vancl.com/" target="_blank"><img src="http://i3.vanclimg.com/users/26/20120318/focus_5_120318.jpg" alt="" /></a></li> <li><a title="2012佳片鉴赏录：25部奥斯卡种子影片超前瞻" href="http://nanxie.vancl.com/" target="_blank"><img src="http://i2.vanclimg.com/users/26/20120320/focus_6_n_120320.jpg" alt="" /></a></li> </ul> <div class="slide_title"> <h3><a href="#" target="_blank">设计好脾气的Web页面</a></h3> <dl class="slide_num"></dl> <em></em> </div> </div>  </div> <script type="text/javascript"> /** * Copyright (c) 2011 Jikeytang (http://jikey.cnblog.com/) * Version: 0.0.1 * Demo: http://jikey.cnblog.com/ */ ;(function($){ // 图片轮播插件 $.fn.UISlide = function(options){ var defaults = { playTime :3000, // 间隔时间 duration :800, // 延迟时间 direction :'left', // 方向 easing :'easeInOutQuad', // 自动播放时 easing 方式 clickEasing :'easeOutCubic', // 点击时 easing 方式 pattern :'scroll' }; var opts = $.extend({}, defaults, options); // 参数合并 var slide = { // 播放调用及一些变量的初始化 play: function(opts, me){ var that = this, isPlay; that.me = me; that.picList = me.find('ul'); // 图片列表 that.title = me.find('div').find('a'); // 图片标题 that.oNum = me.find('dl'); // 数字按钮 that.lis = that.picList.find('li'); // li that.size = that.lis.length; // 图片的数量 that.lisWidth = that.lis.width(); that.isPlay = isPlay; // 是否自动播放 for (var p in opts) { // opts 绑定到 slide that[p] = opts[p]; } that.setNums().setTitle(); if(that.pattern == 'fade'){ that.lis.css({position: 'absolute', top: 0, left: 0}); that.lis.css('z-index', 1); } // 如果图片数量大于则轮播 that.size > 1 && that.autoPlay().slideEvent(); }, // 设置按钮 setNums: function(){ var that = this, links, // 图片的链接 me = that.me, size = that.size, oNum = that.oNum, // 按钮对象 arrTemp = []; links = that.picList.find('a').first(); that.title.html(links[0].title).attr('href', links[0].href); // 把链接的 title 内容放到标题栏上显示 for(var i=1; i<=size; i++){ // 借鉴司徒正美兄： http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1530264.html 的写法 arrTemp.push('<dd>' + i + '</dd>'); } oNum.append(arrTemp.join('')); that.slideNum = oNum.find('dd'); that.numWidth = (that.slideNum.width() + parseInt(that.slideNum.css('margin-right')) + 2) * size + 1; // 数字按钮宽度 that.setTitle(); // 底部图片标题设置 return that; }, // 自动播放 autoPlay: function(){ var that = this, activePos, direction = that.direction, picList = that.picList, slideNum = that.slideNum, playTime = that.playTime; that.isPlay = setInterval(function (){ activePos = that.oNum.find('.active').index(); // 在数字按钮中找到当前活动标签的所在位置 // console.log('size', that.size); if(activePos < (that.size - 1)){ // direction = 'right'; activePos ++; } else if(activePos == (that.size - 1)){ activePos = 0; } else{ activePos --; } if(that.pattern == 'scroll'){ picList.stop().animate({'margin-left': 0 - activePos * (that.lisWidth + 3)}, {duration: that.duration, easing: that.easing}); } else { that.lis.stop().animate({opacity: 0}, {duration: that.duration, easing: that.easing}); that.lis.eq(activePos).stop().animate({opacity: 1}, {duration: that.duration, easing: that.easing}); } slideNum.removeClass('active').eq(activePos).addClass('active'); var links = picList.find('a').eq(activePos); that.title.html(links[0].title).attr('href', links[0].href); }, playTime); return that; }, // 设置标题 setTitle: function(){ var that = this; that.oNum.width(that.numWidth + 2); // 设置数字按钮宽度 that.picList.width((that.lisWidth + 3) * that.size); // 设置图片容器总宽度 that.slideNum.first().addClass('active'); return that; }, // 绑定数字按钮事件 slideEvent: function(){ var that = this, slideNum = that.slideNum; slideNum.click(function(){ var thisNum = $(this).index(); if(that.pattern == 'scroll'){ that.picList.stop().animate({"margin-left":0 - thisNum * (that.lisWidth + 3)}, {duration:that.duration, easing:that.clickEasing}); } else { that.lis.stop().animate({opacity: 0}, {duration: that.duration, easing: that.easing}); that.lis.eq(thisNum).stop().animate({opacity: 1}, {duration: that.duration, easing: that.easing}); } slideNum.removeClass('active').eq(thisNum).addClass('active'); var links = that.picList.find('a').eq(thisNum); that.title.html(links[0].title).attr('href', links[0].href); }); // 鼠标到画面中任意位置，停止播放 that.me.hover(function(){ clearInterval(that.isPlay); }, function(){ that.autoPlay(); }) return that; } }; return this.each(function(){ // $(a,b) 方式调用 slide.play(opts, $(this)); }); } })(jQuery); $('#slide2').UISlide(); $('#slide').UISlide({ playTime: 3000, duration: 1500, pattern: 'fade' }); </script> </body> </html>

查看全文

相关阅读:
【C++】《C++ Primer 》第二章
 【剑指Offer】链表的基本操作之创建、插入、删除
 【LeetCode】365.水壶问题
 【Flutter】事件处理与通知之原始指针事件处理
 【Flutter】功能型组件之对话框详解
 【Flutter】功能型组件之异步UI更新
 mongdb_基本操作
 startswith在项目中的应用
 subString在项目中的应用
 comtains在项目中的应用

原文地址：https://www.cnblogs.com/jikey/p/2419544.html