This time I will bring you jquery's thumbnail-associated image switching function. What are the precautions for jquery's thumbnail-associated image switching function. Here is a practical case, let's take a look.
<!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");
}
});I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
jQuery implements tab sliding switching menu with slide effect
The above is the detailed content of jquery makes thumbnail associated picture switching function. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
