jQuery插件-輕量圖片輪換-UISlide

本文轉載自查看原文 2012-03-21 15:57 6374 Jquery

jQuery插件-輕量圖片輪換-UISlide

特點：

1. 帶標題內容的圖片切換。預覽圖

2. 接口簡單，因為簡單所以修改方便。

修改第1行或第4行寬高即可。

1 .slide_wrap{ position: relative; width: 710px; height: 340px; margin-bottom: 5px; border: 2px solid #ccc; background: #fff; color: #666; overflow: hidden;}
2 .slide_imglist{}
3 .slide_imglist li{ float: left; margin-right: 3px; display: inline;}
4 .slide_imglist li img{ width: 710px; height: 340px; display: block;}

調用參數：

playTime    :2000,             // 間隔時間
duration    :800,              // 延遲時間
direction   :'left',           // 方向
easing      :'easeInOutQuad', // 自動播放時 easing 方式
clickEasing :'easeOutCubic'    // 點擊時 easing 方式

3. 多個輪換交易方便調用。

$('#slide').UISlide();
$('#slide2').UISlide();

IE刷新之后才能出載入jquery文件。

<!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{width:714px;margin:40px auto;border:2px solid #aaa;background:#fff;padding:5px 5px 0;}
.slide_wrap{position:relative;width: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 img{width:710px;height:340px;display:block;}
.slide_title{bottom:0;left:0;width: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;width: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;width: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職業女性：從 &quot;廣告狂人&quot; 看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 :2000, // 間隔時間
duration :800, // 延遲時間
direction :'left', // 方向
easing :'easeInOutQuad', // 自動播放時 easing 方式
clickEasing :'easeOutCubic' // 點擊時 easing 方式
};
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.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++){
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();
if(direction == 'left'){
if(activePos == (that.size - 1)){
direction = 'right';
activePos --;
} else {
activePos ++;
}
} else {
if(activePos == 0){
direction = 'left';
activePos ++;
} else {
activePos --;
}
}
picList.stop().animate({'margin-left': 0 - activePos * (that.lisWidth + 3)}, {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();
that.picList.stop().animate({"margin-left":0 - thisNum * (that.lisWidth + 3)}, {duration:that.duration, easing:that.clickEasing});
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);
</script>
<script type="text/javascript">
$('#slide').UISlide();
$('#slide2').UISlide();
</script>
</body>
</html>

另外的方式：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery插件-輕量彈出層-UIDialog Unslider – 輕量的響應式 jQuery 內容滑塊插件 Skippr – 輕量、快速的 jQuery 幻燈片插件 Unslider – 輕量的響應式 jQuery 內容輪播插件 jQuery Unveil – 另一款非常輕量的延遲加載插件自己東手寫個jquery圖片輪換效果 pf4j 輕量強大的java 插件框架 2017年最新20個輕量的 JavaScript 庫和插件輕量的、可自定義 CSS 的 Lightbox 相冊插件 SqlSugar輕量ORM