首页 > 文章 > web前端 > jquery做出缩略图关联图片切换功能

jquery做出缩略图关联图片切换功能

php中世界最好的语言原创: 2018-04-26 17:21:131532浏览

这次给大家带来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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>手动滚动图片</title> 
<style type="text/css"> 
ul,li{margin:0;padding:0} 
img{border:0px;} 
#container{padding:40px;} 
#showArea img{width:700px;} 
a{text-decoration:none;border:0px;} 
#scrollp{border:#ccc 1px solid;} 
#scrollp li{background:#A83;} 
</style> 
<script src="../jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="manualScroll-0.1.4.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$.manualScroll({ 
objId:"scrollp", 
showArea:"showArea", 
showTitle: true, 
height:105, 
width:140, 
line:5, 
speed:1000 
}); 
}); 
</script> 
</head> 
<body> 
<p id="container"> 
<p id="showArea"></p> 
<p id="scrollp"> 
<ul> 
<li><a href="#"><img src="images/1.jpg" alt="images/1.jpg" width="140"/></a></li> 
<li><a href="#"><img src="images/2.jpg" alt="images/2.jpg" width="140"/></a></li> 
<li><a href="#"><img src="images/3.jpg" alt="images/3.jpg" width="140"/></a></li> 
<li><a href="#"><img src="images/4.jpg" alt="images/4.jpg" width="140"/></a></li> 
<li><a href="#"><img src="images/5.jpg" alt="images/5.jpg" width="140"/></a></li> 
<li><a href="#"><img src="images/6.jpg" alt="images/6.jpg" width="140"/></a></li> 
</ul> 
</p> 
</p> 
</body> 
</html>

manualScroll-0.1.4.js/**

* 手动滚动图片 
* 
**/ 
$.extend({ 
manualScroll:function(opt,callback){ 
//alert("suc"); 
this.defaults = { 
objId:"", // 滚动区域id 
showArea:"", // 大图显示区域id，如果没有就不显示 
showWidth:700, // 大图宽度 
showHeight:525, // 大图高度 
showTitle: false, // 是否在大图下方显示标题 
width:300, // 每行的宽度 
height:100, // p的高度 
line:2, // 每次滚动的行数 
autoLine:1, // 自动滚动的行数 
speed:0, // 动作时间 
interval:3000, // 滚动间隔 
imgPath:"", // 图片根目录 
directBtn:"img/direct_btn02.png", // 指向图片 
picTimer:0, // 间隔句柄，不需要设置，只是作为标识使用 
opacity:0.3 // 按钮透明度 
}; 
//参数初始化 
var opts = $.extend(this.defaults,opt); 
// 定义外层元素样式 
$("#"+opts.objId).css({ 
"position":"relative", 
"overflow":"hidden", 
"width":(opts.line * opts.width) + "px" 
}); 
// 定义ul样式 
$("#"+opts.objId + " ul").css({ 
"width":opts.width * $("#"+opts.objId + " ul").find("li").size() + "px", 
"height":opts.height + "px" 
}); 
// 定义li样式 
$("#"+opts.objId + " ul li").css({ 
"display":"block", 
"float":"left", 
"width":opts.width + "px", 
"height":opts.height + "px" 
}); 
// 添加向左滚动按钮 
$("#"+opts.objId).append("<p id=\"button_left\"></p>"); 
// 定义向左按钮的位置 
$("#button_left").css({ 
"width":"40px", 
"height":"40px", 
"background":"url(" + opts.imgPath + opts.directBtn + ")", 
"background-position":"0px 0px", 
"position":"absolute", 
"left":"0px", 
"top":(opts.height/2 - 20) + "px" 
}); 
// 添加向右滚动按钮 
$("#"+opts.objId).append("<p id=\"button_right\"></p>"); 
// 定义向右按钮的位置 
$("#button_right").css({ 
"width":"40px", 
"height":"40px", 
"background":"url(" + opts.imgPath + opts.directBtn + ")", 
"background-position":"-40px 0px", 
"position":"absolute", 
"left":(opts.line * opts.width - 40) + "px", 
"top":(opts.height/2 - 20) + "px" 
}); 
// 向左按钮添加动作 
$("#button_left").click(function(){ 
var scrollWidth = 0 - opts.line * opts.width - (0 - $("#"+opts.objId).find("ul:first").css("margin-left").replace("px","")); 
// 无间断滚动 
$("#"+opts.objId).find("ul:first").animate({ 
marginLeft:scrollWidth 
},opts.speed,function(){ 
for(i=1;i<=opts.line;i++){ 
$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); 
} 
$("#"+opts.objId).find("ul:first").css({marginLeft:0}); 
showArea(); 
}); 
}); 
// 向右按钮添加动作 
$("#button_right").click(function(){ 
var scrollWidth = (0 - opts.line*opts.width + (0 - $("#"+opts.objId).find("ul:first").css("margin-left").replace("px",""))); 
// 无间断滚动 
$("#"+opts.objId).find("ul:first").animate({ 
marginLeft:scrollWidth 
},0,function(){ 
for(i=1;i<=opts.line;i++){ 
$("#"+opts.objId).find("li:last").prependTo($("#"+opts.objId).find("ul:first")); 
} 
$("#"+opts.objId).find("ul:first").animate({ 
marginLeft:0 
},opts.speed,function(){ 
$("#"+opts.objId).find("ul:first").css({marginLeft:0}); 
showArea(); 
}); 
}); 
}); 
/** 
* 自动横向滚动 
*/ 
function scrollLeft(){ 
var scrollWidth = 0 - opts.autoLine * opts.width - (0 - $("#"+opts.objId).find("ul:first").css("margin-left").replace("px","")); 
$("#"+opts.objId).find("ul:first").animate({ 
marginLeft:scrollWidth 
},opts.speed,function(){ 
for(i=1;i<=opts.autoLine;i++){ 
$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); 
} 
$("#"+opts.objId).find("ul:first").css({marginLeft:0}); 
showArea(); 
}); 
}; 
/** 
* 大图下方显示标题 
*/ 
if(opts.showTitle && $("#"+opts.showArea).size() > 0){ 
$("#"+opts.showArea).css({ 
"width":opts.showWidth + "px", 
"position":"relative", 
"height":opts.showHeight + "px" 
}); 
$("#"+opts.showArea).html("<img />"); 
$("#"+opts.showArea).append("<p id=\"manualScroll_banner\" ></p>"); 
$("#manualScroll_banner").css({ 
"width":opts.showWidth + "px", 
"height":"20px", 
"background":"#333", 
"position":"absolute", 
opacity:0.7, 
"text-align":"center", 
"color":"#FFF", 
"left":"0px", 
"top":(opts.showHeight - 20) + "px" 
}); 
} 
/** 
* 在指定区域显示大图 
*/ 
function showArea(){ 
if($("#"+opts.showArea).size() > 0){ 
// 显示主图的位置 
var index = Math.floor((opts.line - 1) / 2); 
showIndexArea(index); 
// 鼠标划上后显示大图 
$("#"+opts.objId + " ul li").each(function(index){ 
$(this).mouseover(function(){ 
showIndexArea(index); 
}); 
}); 
} 
} 
/** 
* 显示指定元素的大图 
*/ 
function showIndexArea(index){ 
var imgSrc = $("#"+opts.objId + " ul li:eq(" + index + ") img:first").attr("src"); 
var imgAlt = $("#"+opts.objId + " ul li:eq(" + index + ") img:first").attr("alt"); 
// 淡化显示其余图片 
$("#"+opts.objId + " ul li:lt(" + index + ")").css({ 
opacity:0.5 
}); 
$("#"+opts.objId + " ul li:gt(" + index + ")").css({ 
opacity:0.5 
}); 
$("#"+opts.objId + " ul li:eq(" + index + ")").css({ 
opacity:1 
}); 
// 显示大图 
$("#"+opts.showArea + " img:first").attr("src", imgSrc); 
// 显示标题 
if(opts.showTitle){ 
$("#manualScroll_banner").text(imgAlt); 
} 
} 
/** 
* 鼠标滑上后显示按钮 
*/ 
$("#"+opts.objId).hover(function() { 
$("#button_left").css({ 
opacity:1 
}); 
$("#button_right").css({ 
opacity:1 
}); 
},function() { 
$("#button_left").css({ 
opacity:opts.opacity 
}); 
$("#button_right").css({ 
opacity:opts.opacity 
}); 
}).trigger("mouseleave"); 
/** 
* 最先执行的函数 
* 鼠标滑上焦点图时停止自动播放，滑出时开始自动播放 
*/ 
// 初始化大图 
showArea(); 
$("#"+opts.objId).hover(function() { 
clearInterval(opts.picTimer); 
},function() { 
opts.picTimer = setInterval(function() { 
scrollLeft(); 
},opts.interval); // 自动播放的间隔，单位：毫秒 
}).trigger("mouseleave"); 
} 
});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！