页面如下:
附源码:
note2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>note2.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/note2.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: 415px;
width: 17px;
height: 54px;
left: 300px;
}
.spec-control2 {
display: block;
position: absolute;
top: 415px;
width: 17px;
height: 54px;
left: 15px;
}
.lh img {
border: "1px solid threedface";
margin-left: 2px;
}
#spec-forward {
background-image: url("../images/r.jpg");
background-repeat: no-repeat;
width: 20px;
height: 60px;
}
#spec-backward {
background-image: url("../images/l.jpg");
background-repeat: no-repeat;
width: 20px;
height: 60px;
}
</style>
</head>
<body>
<h3 align="left">三星GALAXY Note II</h3>
<div id="dt" style="width: 400px">
<img alt="" src="../images/big1.jpg" width="350" height="350" />
</div>
<div id="spec">
<a href="javascript:;" class="spec-control" id="spec-forward"></a>
<a href="javascript:;" class="spec-control2" id="spec-backward"></a>
<div class="spec-items" style="border: 1px solid grey; width: 350px;">
<ul class="lh" id="spec-img">
<li>
<img alt="" src="../images/small1.jpg" name="../images/big1.jpg">
</li>
<li>
<img alt="" src="../images/small2.jpg" name="../images/big2.jpg">
</li>
<li>
<img alt="" src="../images/small3.jpg" name="../images/big3.jpg">
</li>
<li>
<img alt="" src="../images/small4.jpg" name="../images/big4.jpg">
</li>
<li>
<img alt="" src="../images/small5.jpg" name="../images/big5.jpg">
</li>
<li>
<img alt="" src="../images/small6.jpg" name="../images/big6.jpg">
</li>
<li>
<img alt="" src="../images/small7.jpg" name="../images/big7.jpg">
</li>
</ul>
</div>
</div>
</body>
</html>
note2
$(document).ready(function(){
var count = 0;// 记录数
var size = 4; // 每页显示的图片个数
var $imgs = $("#spec-img img"); // 获取所有的img
var len = $imgs.length;// 得到img的个数
var ycount = -1; // 原有数据
// 给所有图片注册 鼠标移动事件
$imgs.mouseover(function(e) {
// 当鼠标移动到某个图片时,获取其图片的name属性值,把它设置到id=dt中得img中
$("#dt img").attr("src", this.name); // html中怎么扩展标签的属性
// 鼠标移上去时,修改样式 (添加红色边框)
$(this).css({
border : "1px solid red"
});
}).mouseout(function() {
// 鼠标移出时,修改边框为原有样式
$(this).css({
border : "1px solid threedface"
});
});
// 获取id="spec-img"中所有的li元素
var $lis = $("#spec-img li");
// 判断图片的个数 如果大于4就进行隐藏数据
if ($lis.length > size) {
$lis.each(function(i) {
if (i >= size) {
$(this).hide();
}
});
}
// 考虑左按钮处理
$("#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 { // 否则根据每页显示的个数 隐藏需要隐藏的数据
$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 <= 0) {
count = len;
}
});
$("#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 { // 否则根据每页显示的个数 隐藏需要隐藏的数据
// 算法 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;
}
});
});
.js
分享到:
相关推荐
jQuery--仿迅雷图片轮播切换效果jQuery--仿迅雷图片轮播切换效果jQuery--仿迅雷图片轮播切换效果jQuery--仿迅雷图片轮播切换效果
仿京东 鼠标放上去 图片左右移动jquery效果
jquery插件库-jquery仿京东商品详情页图片放大效果.zip
jquery--下拉框的实现jquery--下拉框的实现
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jQuery-Waterwheel-Carousel-图片左右滚动切换特效
jQuery实例-信息提示jQuery实现 jQuery实例-信息提示jQuery实现
最新jquery-ui-1.11.2日期控件,官网下载内涵图片和自己添加的中文辅助jquery-ui-timepicker-zh-CN.js,经过本人测试绝对可以用,不知道怎么用的百度上找个例子即可,需要导入的包 ${ctx}/plugins/jquery-ui-1.11.2/...
这是一款使用SuperSlide.js来制作的仿京东商城商品切换选项卡jquery特效。该选项卡特效兼容ie8浏览器,适合用于制作各种商品切换展示效果,非常实用。
jQuery仿京东的首页广告图片切换
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
主要介绍了jQuery简单实现仿京东商城的左侧菜单效果代码,通过简单的jQuery鼠标事件及元素动态变换实现样式动态切换功能,非常简单实用,需要的朋友可以参考下
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
jQuery-photoClip-master 图片商城剪切,jq,js web开发
jquery-1.11.0 + jquery-UI-1.10.4
jquery-ui-1.9.2.custom.min.js
jquery插件jquery-ui-1.8.2.custom.min.js
Jquery Jquery图片 Jquery手动 Jquery切换效果 Jquery图片切换效果
实现效果: jQuery tab仿京东商品切换选项卡效果,实现商品的切换,当鼠标放在标题上时,使内容发生变化,我们通常也称为“滑动门”的特效。非常适合在商城中使用。php中文网推荐下载!