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://www.cnblogs.com/jquery-1.4.4.min.js"></script>--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!--<script type="text/javascript" src="js/jquery.easing.js"></script>--> <script type="text/javascript" src="http://jquery-swip.googlecode.com/svn/trunk/jquery.easing.1.3.js"></script> <!--<script type="text/javascript" src="js/jquery.UISlide2.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> <!--/slide--> <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> <!--/slide--> </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>
运行代码
查看全文
相关阅读:
车牌号验证正则验证
人民币转大写
Base64 格式图片上传至服务器
郭博分析modbus主机模式
解决小BUG的罗列
写flash时为什么需要先擦除?
C语言的很吊的printf-----来自一个C语言竞赛题目
( # #@ ## 在define中的应用)或( 连接两个字符串或者两个数字、强制转化成单引号、强制转化成双引号 )附加字符串强制转化成数字
IAR无法goto的解决办法
link list
原文地址:https://www.cnblogs.com/jikey/p/2419544.html
最新文章
CentOS 7 安装 Percona XtraDB Cluster 5.7(亲测试2020.8.20)
Centos7安装部署zabbix4.0监控服务(2020.8.19亲测)
VM在线扩展磁盘空间(亲测2020.8.19)
基础K8S搭建(20208.18亲测成功)
linux日常2020
linux日常整理
MYSQL安装
通过nginx日志利用shell统计日pv和uv
LNMP环境配置
LNMP环境搭建与配置
热门文章
LNMP环境的安装配置(简单版)
php以编译方式安装,编译参数详解析!
Apache Prefork、Worker和Event三种MPM分析
LAMP环境搭建与配置
Redis 集群的部署及原理
redis cluster集群部署方案
三维数组转二维数组
php 将多个一维数组合拼成二维数组
php 获取时间节点
php zip包上传
Copyright © 2011-2022 走看看