HTML 页面:
<!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>
<title></title>
<style type="text/css">
/*/*/
#showEle {
width: 400px;
height: 400px;
clear: both;
margin: 10px auto;
border: 1px solid #666;
}
#EleList {
width: 400px;
white-space: nowrap;
border: 1px solid #666;
overflow:hidden;
margin: 0px auto;
}
#allEle img {
width: 100px;
height: 100px;
margin-right: 10px;
}
#prevEle, #nextEle {
z-index: 10;
width: 50%;
height: 100%;
position: relative;
}
#prevEle {
float: left;
cursor: url('images/ResizeRight.cur');
}
#nextEle {
float: right;
cursor: url('images/ResizeLeft.cur');
}
#divScroll {
width: 400px;
height: 20px;
background-color: Red;
margin: 5px auto;
margin-bottom: 100px;
}
#divScroll div {
background: #7cd2f8;
width: 20px;
height: 20px;
text-align: center;
position: relative;
z-index: 1;
cursor: pointer;
}
#allEle {
float:left;
}
/*/*/
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/testJs.js" type="text/javascript"></script>
</head>
<body>
<div id="showEle">
<div id="prevEle"> </div>
<div id="nextEle"> </div>
</div>
<div id="EleList">
<div id="allEle"> <img src="images/1.jpg" title="1" /><img src="images/2.jpg" title="2" /><img src="images/3.jpg"
title="3" /><img src="images/4.jpg" title="4" /><img src="images/5.jpg" title="5" /><img
src="images/6.jpg" title="6" /><img src="images/7.jpg" title="7" /><img src="images/8.jpg"
title="8" /> </div>
</div>
<div id="divScroll">
<div> </div>
</div>
<div id="print"></div>
</body>
</html>
JS代码:
<reference path="../Scripts/jquery-1.4.1.min.js" />
$(function () {
var eleIndex = 0;
var $eleList = $("#EleList"); //列表的可视区域
var $allEle = $("#allEle"); //列表
var $ele = $allEle.children(); //操作的元素
var $scrollbox = $("#divScroll"); //滚动条;
var $scroll = $scrollbox.children(); //滑动块
var $showEle = $("#showEle"); //
var $prev = $("#prevEle");
var $next = $("#nextEle");
var scrollBoxOffsetLeft = $scrollbox.offset().left; //滚动条的Left值;
var scrollBoxWidth = $scrollbox.width(); //滚动条的宽度;
var eleListMaxScrollLeft = $allEle.width() - $eleList.width(); //
var scrollWidth = Math.floor($eleList.width() * scrollBoxWidth / $allEle.width()); //滑动块的宽度;
var scrollMaxLeft = scrollBoxWidth - scrollWidth;
var eleLength = $ele.length;
$scroll.css("width", scrollWidth + "px"); //设置滑动块宽度;
$showEle.css("background", "url(" + $($ele[0]).attr("src") + ") no-repeat center center");
///滑动块事件开始
$scroll.mousedown(function (e) { //鼠标按下事件
var x = e.pageX; //在滑动块里按下鼠标时的X坐标;
$scroll.css("cursor", "pointer");
滚动条事件开始(事件冒泡)///
$scrollbox.mousemove(function (eb) {
var _x = eb.pageX - x; //鼠标移动的X轴距离;
var scrollLeft = $scroll.offset().left - scrollBoxOffsetLeft + _x; //滑动块的LEFT值;
$scroll.css("left", scrollLeft + "px"); //设置滑动块的LEFT;
x = eb.pageX;
if ($scroll.offset().left + scrollWidth > scrollBoxOffsetLeft + scrollBoxWidth) {//修正滚动块的LEFT值
$scroll.css("left", (scrollBoxWidth - scrollWidth) + "px");
}
if ($scroll.offset().left < scrollBoxOffsetLeft) {//修正滚动块的LEFT值
$scroll.css("left", "0px");
}
var eleListScrollLeft = ($scroll.offset().left - scrollBoxOffsetLeft) * (eleListMaxScrollLeft) / (scrollBoxWidth - scrollWidth);
$eleList.scrollLeft(eleListScrollLeft); //设置列表的可视区域的水平滚动条偏移量
// $("#print").html(eleListScrollLeft)
});
/滚动条事件结束(事件冒泡)/
}).mouseup(function () {//
$scrollbox.unbind("mousemove"); 解除滚动条的 mousemove 事件
});
滑动块事件结束
function showEleChange($this) {
// alert($this.attr("src"));
$showEle.css("background", "url(" + $this.attr("src") + ") no-repeat center center");
var allEleOffsetLeft = $allEle.offset().left; //当前列表的Left;
var thisOffsetLeft = $this.offset().left; //当前点击元素的LEFT;
var trueLeft = thisOffsetLeft - allEleOffsetLeft; //当前元素离列表的距离;;
var halfWidth = ($eleList.width() - $this.width()) / 2; //
var eleListScrollLeft = trueLeft - halfWidth; //可视框的水平滚动条偏移;
if (eleListScrollLeft <= 0) {//修正
eleListScrollLeft = 0;
}
if (eleListScrollLeft > eleListMaxScrollLeft) {
eleListScrollLeft = eleListMaxScrollLeft;
}
$eleList.scrollLeft(eleListScrollLeft); //设置可视区域的水平滚动条偏移量
var scrollLeft = Math.ceil(eleListScrollLeft * scrollMaxLeft / eleListMaxScrollLeft); //滚动条的LEFT;
$scroll.css("left", scrollLeft + "px");
}
响应键盘左右键开始
$(document).keydown(function (event) {
event = event || window.event;
if (event.keyCode == 37) {
prevEle();
};
if (event.keyCode == 39) {
nextEle();
};
});
响应键盘左右键结束
///上一元素开始//
function prevEle() {
eleIndex= eleIndex- 1;
if (eleIndex< 0) {
eleIndex= eleLength - 1;
}
var $this = $($ele[currIndex]);
showEleChange($this);
}
/上一元素结束
/下一元素开始/
function nextEle() {
eleIndex= eleIndex+ 1;
if (eleIndex>= eleLength) {
eleIndex= 0;
}
var $this = $($ele[currIndex]);
showEleChange($this);
}
//下一元素结束//
$ele.click(function () {//点击图片
eleIndex= $(this).index();
showEleChange($(this));
});
$prev.click(function () {
prevEle();
});
$next.click(function () {
nextEle();
});
/文档流事件开始///
$(document).mouseup(function () {
$scrollbox.unbind("mousemove"); ///解除滚动条的 mousemove 事件
});
/文档流事件结束/
});