防京东图片效果

来源：互联网发布：软件开发英语词汇编辑：程序博客网时间：2024/05/20 13:14

html页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>demo03.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./js/jingdong.js"></script>

<style type="text/css">
.lh li {
list-style-type: none;
/*float: left;*/
display: inline;
}

#dt img {
border: 1px solid threedface;
}

/*.spec-control {
display: block;
position: absolute;
top: 80px;
width: 17px;
height: 54px;
}*/
.lh img {
border: "1px solid threedface";
margin-left: 2px;
}

li img {
width: 60px;
height: 60px;
}

#spec-forward{
background-image:url("images/l.jpg");
background-repeat:no-repeat;
width: 20px;
height: 60px;
}
#spec-backward{
background-image:url("images/r.jpg");
background-repeat:no-repeat;
width: 20px;
height: 60px;
}
</style>
</head>

<body>
<div id="dt" style="width:400px;">

<img width="350" height="350" src="images/5507a.jpg">
</div>
<div id="spec">
<a href="javascript:;" class="spec-control" id="spec-forward"> </a>
<a href="javascript:;" class="spec-control" id="spec-backward"></a>

<div style="border: 1px solid red;">
<ul class="lh" id="spec-img">
<li>
<img alt="" src="images/01.jpg" name="images/05.jpg">
</li>
<li>
<img alt="" src="images/5507.jpg" name="images/a.jpg">
</li>
<li>
<img alt="" src="images/02.jpg" name="images/aa.jpg">
</li>
<li>
<img alt="" src="images/03.jpg" name="images/05.jpg">
</li>
<li>
<img alt="" src="images/06.jpg" name="images/aa.jpg">
</li>
<li>
<img alt="" src="images/08.jpg" name="images/05.jpg">
</li>
<li>
<img alt="" src="images/5507.jpg" name="images/aa.jpg">
</li>
</ul>
</div>

</div>
</body>

</html>

$(function(){

var count = 0;
var size = 4;//每页显示的图片个数
var $imgs=$("#spec-img img");
var len = $imgs.length;//得到img 的个数
var ycount = -1;//原有数据

$imgs.mouseover(function(e){
// 当鼠标移动到某个图片时，获取其图片的name属性值，把它设置到id=dt中得img中
$("#id img").attr("src",this,name);
$(this).css({
border : "1px solid red"
});

}).mouseout(function(){

$(this).css({
border : "1px solid threedface"
});
});



// 这个功能是把多余的图片进行隐藏
var $lis=$("#spec-img li");
if($lis.length>size){

/*// each() 以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素
（每次都是一个不同的匹配元素）。
而且，在每次执行函数时，
都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。
返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true'
跳至下一个循环(就像在普通的循环中使用'continue')。

*/

$lis.each(function(i){
// 判断图片的个数如果大于4就进行隐藏数据
if(i>size){
$(this).hide();
}
});

}














$("#spec-forward").bind("click",function(){
$($imgs[ycount]).css({
border : "1px solid threedface"
}).show();
$($imgs[count]).css({
border : "1px solid red"
}).show();

if(len<=size){
// 如果图片个数小于等于每页显示的数据

}else{// 否则根据每页显示的个数隐藏需要隐藏的数据
$lis.each(function(i){

var cs = count-size;
if(cs<=0){// 如果差值结果小于等于0 每页显示的个数
if(i>=size){
$(this).hide();
}else{
$(this).show();
}
} else{

if(i<cs || i>=count){// 隐藏前部分的数据为i<cs
$(this).hide();
}else{
$(this).show()
}
}
});
}

ycount = count;

count--;
if(count<=0){
count=len;
}

});








$("#spec-backward").bind("click", function() {

$($imgs[ycount]).css({
border : "1px solid threedface"
}).show();
$($imgs[count]).css({
border : "1px solid red"
}).show();

if (len <= size) { // 如果图片个数小于等于每页显示的数据
// 则什么都不处理
} else { // 否则根据每页显示的个数隐藏需要隐藏的数据
// 算法 len
$lis.each(function(i) {// 遍历每个图片
var cs = count - size; // 求出差值
if (cs <= 0) { // 如果差值结果小于等于0 每页显示的个数
// 为前4个其他隐藏
if (i >= size) {
$(this).hide();
} else {
$(this).show();
}
} else { // 否则前后都有隐藏的数据
if (i <= cs || i > count) { // 隐藏前部分的数据为i<=cs
// 隐藏后半部分的数据为i>count操作
$(this).hide();
} else {
$(this).show();
}
}
});
}
ycount = count;
count++;
if (count >= 7) {
count = 0;
}

});
});