您的位置：首页 > 其它

图片轮播插件

2012-06-29 17:24 288 查看

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ImgePlayerPlugin.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.fn.settings.menuId = "#play_text";
$('#play_list').imgPlay();
});
</script>
</head><body>
<div id="play_list">
<a href='http://catalog.vancl.com/shoes/fbxbyj20120521.html?source=manbufenglin'
target='_blank'>
<img src='http://i3.vanclimg.com/503/138/others/2012/6/6/byssy.jpg' alt='毕业季帆布鞋特辑59元起'
title='毕业季帆布鞋特辑59元起' /></a>
<a href='http://catalog.vancl.com/shoes/dcxmfbx20120621.html?source=manbufenglin'
target='_blank'><img src='http://i3.vanclimg.com/503/138/others/2012/6/21/ffssy.jpg'
alt='非凡熊猫帆布鞋抢购价79元起' title='非凡熊猫帆布鞋抢购价79元起' /></a></div>
<div id="play_text">
</div></body></html>

1、插件jquery.ImgePlayerPlugin.js 内容如下：

/// <reference path="jquery-1.4.1-vsdoc.js" />
/* @Title: 图片自动播放插件
* @Author: manbufneglin
*/
(function($){
//$(function () {
$.fn.extend({
imgPlay: function (options) {
var opts = $.extend({}, $.fn.settings, options || {});
var $this = $(this);
var elementCount = $("a", $this).length;
if (elementCount == 0) return;

var $menuHtml = $("<ul></ul>");
for (var i = 0; i < elementCount; i++) {
$menuHtml.append("<li>" + (i + 1).toString() + "</li>");
}
$menuHtml.appendTo(opts.menuId);//创建菜单项

var currMenuNum = 0;
$("a:gt(0)", $this).hide();
$(opts.menuId + " li").mouseover(function () {
currMenuNum = $(this).text() - 1;//当前菜单码值
$("a:visible", $this).fadeOut('fast', function () { $(this).parent().children().eq(currMenuNum).fadeIn(500); });
$(this).css(opts.currentMenuStyle).siblings().css(opts.otherMenuStyle);//设置当前菜单及同辈菜单样式
return false;
})
.eq(0).css(opts.currentMenuStyle);

//让图片自动播放
var autoID = setInterval(showAuto, opts.interval);
$this.hover(function () {
clearInterval(autoID);
}, function () {
autoID = setInterval(showAuto, opts.interval);
});
function showAuto() {
currMenuNum = currMenuNum >= (elementCount - 1) ? 0 : ++currMenuNum;
$(opts.menuId + " li").eq(currMenuNum).trigger('mouseover');
};
},
settings: {
interval: 5000,
menuId: "#play_text",
currentMenuStyle: { "background": "#7f0019", "color": "#fff", "font-weight": "bolder" },
otherMenuStyle: { "background": "#fff", "color": "#7f0019", "font-weight": "normal" }
}
});
//});
})(jQuery);

2、样式style.css文件内容如下：

body
{
font-size: 12px;
font-family: "宋体";
color: #333;
}
a:link, a:visited
{
color: #333;
text-decoration: none;
}
a:hover
{
color: #a10000;
text-decoration: none;
}

#play_text
{
margin-top: -10px;
width: 200px;
float: left;
}
#play_text UL
{
z-index: 3;
position: relative;
filter: Alpha(Opacity=80);
list-style-type: none;
margin-top: -17px;
width: 200px;
display: block;
padding-top: 1px;
left: 400px;
_padding-top: 0px;
opacity: 0.8;
}
#play_text UL LI
{
border-bottom: #cecece 1px solid;
text-align: center !important;
border-left: #cecece 1px solid;
background-color: #fff;
text-indent: 3px;
margin: 2px;
width: 15px;
display: block;
font-family: "Arial";
float: left;
height: 15px;
color: #7f0019;
font-size: 9px;
border-top: #cecece 1px solid;
cursor: pointer;
border-right: #cecece 1px solid;
padding-top: 3px;
}
#play_list A
{
display: block;
overflow: hidden;
}
#play_list IMG
{
vertical-align: top !important;
border: 1px solid #cccccc;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航