基于 jquery ImageScroll 实现图片切换效果

 代码如下 复制代码

(function($){
$.fn.ImageScroll = function(options) {
var defaults = {
delay: 2000,
maskOpacity: 0.6,
numOpacity: 0.6,
maskBgColor: "#000",
textColor: "#fff",
numColor: "#fff",
numBgColor: "#000",
alterColor: "#fff",
alterBgColor: "#999"
};
options = $.extend(defaults, options);
var _this = $(this).css("display", "none");
var _links = [], _texts = [], _urls = [];
var _list = _this.find("a");
var _timer;
var _index = 0;
_list.each(function(index){
var temp = $(this).find("img:eq(0)");
_links.push($(this).attr("href"));
_texts.push(temp.attr("alt"));
_urls.push(temp.attr("src"));
});
if(_list.length <= 0) {
return;
}
else {
_this.html("");
}
var _width = _this.width();
var _height = _this.height();
var _numCount = _list.length;
var _numColumn = Math.ceil(_numCount / 2);
var _img = $("<a/>").css({"display":"block", "position":"absolute","top":"0px","left":"0px", "z-index":"2", "width":_width+"px", "height":_height+"px", "background":"url("+_urls[0]+")"}).appendTo(_this);
var _mask = $("<div/>").attr("style","opacity:"+options.maskOpacity)
.css({"position":"absolute", "left":"0px", "bottom":"0px", "z-index":"3", "width":_width+"px", "height":"46px", "opacity":options.maskOpacity, "background-color":options.maskBgColor}).appendTo(_this);
var _num = $("<div/>").attr("style","opacity:"+options.numOpacity)
.css({"position":"absolute", "right":"0px", "bottom":"0px", "z-index":"5", "width":_numColumn*22, "opacity":options.numOpacity, "height":"44px"}).appendTo(_this);
var _text = $("<div/>").css({"position":"absolute", "left":"0px", "bottom":"0px", "z-index":"4", "padding-left":"10px", "height":"44px", "line-height":"44px", "color":options.textColor}).html(_texts[0]).appendTo(_this);
for(var i = 0; i < _numCount; i++)
{
$("<a/>").html(i+1)
.css({"float":"left", "width":"20px", "height":"20px", "text-align":"center", "background-color":options.numBgColor, "margin":"0px 2px 2px 0px", "cursor":"pointer", "line-height":"20px", "color":options.numColor})
.mouseover(function() {
if(_timer) {
clearInterval(_timer);
}
}).mouseout(function() {
_timer = setInterval(alter, options.delay);
}).click(function(){
numClick($(this));
}).appendTo(_num);
}
var _tempList = _num.find("a");
function alter() {
if(_index > _numCount-1) {
_index = 0;
}
_tempList.eq(_index).click();
}
function numClick(obj) {
var i = _tempList.index(obj);
_tempList.css({"background-color":options.numBgColor, "color":options.numColor});
obj.css({"background-color":options.alterBgColor, "color":options.alterColor});
_img.attr({"href":_links[i], "target":"_blank"})
.css({"opacity":"0", "background":"url("+_urls[i]+")"})
.animate({"opacity":"1"}, 500);
_text.html(_texts[i]);
_index = i + 1;
}
setTimeout(alter, 10);
_timer = setInterval(alter, options.delay);
_this.css("display", "block");
};
})(jQuery);

调用代码

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.ImageScroll.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#scroll { position:relative; width:450px; height:300px; }
-->
</style>
<div id="scroll">
<a href="http://www.baidu.com"><img src="images/1.jpg" alt="漂亮的风景图片一" /></a>
<a href="http://www.111cn.net"><img src="images/2.jpg" alt="漂亮的风景图片二" /></a>
<a href="http://www.codeplex.com"><img src="images/3.jpg" alt="漂亮的风景图片三" /></a>
<a href="http://www.codeproject.com"><img src="images/4.jpg" alt="漂亮的风景图片四" /></a>
<a href="http://sc.111cn.net"><img src="images/5.jpg" alt="漂亮的风景图片五" /></a>
<a href="http://s.111cn.net"><img src="images/3.jpg" alt="漂亮的风景图片六" /></a>
</div>
<script>
$("#scroll").ImageScroll();
</script>
时间： 2024-09-16 10:36:14

基于 jquery ImageScroll 实现图片切换效果的相关文章

jquery的幻灯片图片切换效果代码分享_jquery

本文实例讲述了jquery的幻灯片图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于jquery的幻灯片图片切换效果代码,有缩略图和标题,可以自定义标题. 运行效果图:     -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <LINK rel=stylesheet type=text/css href="css/lrtk.css&quo

基于jquery的手风琴图片展示效果实现方法_jquery

本文实例讲述了基于jquery的手风琴图片展示效果实现方法.分享给大家供大家参考.具体实现方法如下: 代码运行效果如下图所示: index.html页面代码如下: 复制代码 代码如下: <!DOCTYPE html> <html class=''> <head>     <title>一款基于jquery的手风琴图片展示效果demo</title>     <style class="cp-pen-styles">

jquery简单实现图片切换效果的方法_jquery

本文实例讲述了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">

基于jQuery实现的图片切换焦点图整理_jquery

1.js实现的七屏百叶窗焦点图动态特效 可以实现可以同时显示很多找竖行百叶窗效果的缩略图,代码,鼠标悬浮在一张缩略图上时,该图片就在原位置变亮并慢慢展开,同时两边的缩略图就往两边缩小靠近,需要此种焦点图效果的朋友们可以前来下载使用. 在线演示 源码下载 2.jQuery+CSS3实现的多种图片切换方式简易焦点图 今天要来分享一款简易的jQuery+CSS3焦点图应用,这款焦点图应用的图片切换方式非常丰富,而且焦点图的切换按钮比较小,图片篇幅占据比较大,因此总体比较大气. 在线演示 源码下载 3.

基于jQuery实现的菜单切换效果_jquery

这是一个非常流畅的菜单展示效果,应用在亚马逊上,当你上下移动鼠标的时候,二级菜单会非常轻快的切换,没有任何延时,给用户如滑丝般的感觉.这种效果借助于一款jQuery插件menu-aim,本文将结合实例讲解如何实现速度超快的菜单效果. HTML 首先建立主菜单,我们借用电商网站常见的商品分类.其html结构代码如下,其中我们用到了html5的data-submenu-id属性设置,这在插件调用时非常有用. <div class="active"> <ul class=&

基于jquery hwSlider-内容滑动切换效果

本次教程分三个部分:1.使用jQuery开发基本的内容滑动切换效果,2.支持移动端触控自适应的内容滑动切换效果,3.封装内容滑动切换效果jQuery插件.本文讲解第一部分,后面两部分会在接下来的文章中陆续发布,敬请关注. 本文将结合实例实现内容滑动切换的基本效果,包括: 左右箭头切换 无限无缝滚动 圆点按钮切换 动画效果 自动切换 HTML 首先准备HTML结构,整个滑动区域用#hwslider包裹,包括滑块内容,滑块使用ul li组织内容,滑块内容可以是图片.文字等任意HTML内容.#dots

基于jquery实现鼠标滚轮驱动的图片切换效果_jquery

jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个基于鼠标滚轮驱动的图片切换效果. 本例实现的效果:鼠标滚轮滚动时图片进行切换. 支持键盘方向键实现图片切换效果. 支持点击图片切换,支持点击当前图片链接. 进度条滑块展示图片图片数量进度.XHTML <div class="demo"> <div id="imageflow"> <div id="loading"><

基于jquery实现左右按钮点击的图片切换效果_jquery

jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个左右按钮点击的图片切换效果. 一.最终效果 二.功能分析1.需求分析点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示.2.html结构分析 <div class="activity" id="activity-slide"> <a href=&q

jQuery实例教程:jQuery网页图片切换效果

文章简介:假设你有一组作品,你想不用转跳到另外一个页面就可以显示多个图片,你可以将JPG图片载入到目标元素中去.下面是jQuery图片切换效果示例. 假设你有一组作品,你想不用转跳到另外一个页面就可以显示多个图片,你可以将JPG图片载入到目标元素中去.下面是jQuery图片切换效果示例: 该示例的核心jQuery代码: $(document).ready(function() { $("h2").append("<em></em>") $(&