仿京东的slide
帮同学写的，欢迎交流
1、纯js+html（直接在后台生成html标记）
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<title>tab demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
color: #666;
}
.top {
width: 550px;
margin: 0 auto;
}
.top-wrap {
position: relative;
border-bottom: 1px solid #666;
height: auto;
}
.top-title {
float: left;
margin-top: 10px;
width: 110px;
text-align: center;
border-bottom: 2px solid #AAA;
}
.top-title .smt {
cursor: default;
margin-bottom: 10px;
}
.tab-arrow {
position: absolute;
z-index: 1;
top: 42px;
left: 0;
background-color: #E4393C;
width: 110px;
height: 2px;
text-align: center;
}
html.lt-ie8 .tab-arrow {
top: 41px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.tab-arrow {
top: 43px;
}
}
.plist {
width: 550px;
position: absolute;
left: 0px;
}
.plist .list-wrap {
width: 110px;
float: left;
margin-top: 10px;
}
.plist .list-wrap .img-wrap {
width: 100px;
height: 100px;
}
.plist .list-wrap .font {
text-align: center;
font-size: small;
margin-top: 30px;
height: 30px;
}
.plist .list-wrap .price {
color: Red;
padding: 5px;
}
.top-title .active {
color: #E4393C;
}
div.tab-arrow b {
border-style: dashed dashed solid;
border-color: transparent transparent #E4393C;
border-width: 8px;
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
z-index: 2;
position: absolute;
top: -16px;
left:51px;
}
#loding {
position: absolute;
left: 220px;
top: 210px;
}
</style>
</head>
<body>
<div class="top">
<div class="top-wrap">
<div id="loding" style="display: none">
<img src="/Images/loading.gif" alt="加载中......" />
</div>
<div class="tab-arrow"><b></b></div>
<div class="top-title">
<div class="smt active" data-index="0">
<h3>特价商品</h3>
</div>
</div>
<div class="top-title">
<div class="smt" data-index="1">
<h3>大家电</h3>
</div>
</div>
<div class="top-title">
<div class="smt" data-index="2">
<h3>小家电</h3>
</div>
</div>
<div class="top-title">
<div class="smt" data-index="3">
<h3>手机通讯</h3>
</div>
</div>
<div class="top-title">
<div class="smt" data-index="4">
<h3>汽车五金</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.easing.min.js"></script>
<!--jquery animate特效-->
<script type="text/javascript" src="Scripts/jquery.lazyload.js"></script>
<!--图片懒加载-->
<script type="text/javascript">
$(function () {
var loaded = []; //记录记载过的goods
$.ajax({
type: 'post',
url: "http://localhost:51355/GoodsWebService.asmx/GetGoodsListByCategory",
data: "{'index':'0'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$('#loding').show();
},
xhrFields: {
onprogress: function (e) {//html5标准
if (e.lengthComputable) {
console.log("Loaded " + Number((e.loaded / e.total * 100)) + "%");
}
else {
console.log("Length not computable.");
}
}
},
success: function (data) {
$('#loding').hide();
var data = data.d;
if (data != null) {
$('div.active').after(data);
$("img.lazy").lazyload({ effect: "fadeIn" });
loaded.push(0);
var oldtabindex = 0;
var newtabindex = 0;
var $tabarrow = $('div.tab-arrow');
var delay;
var isdelayed = false;
$(".smt").bind('mouseenter', function () {
var $this = $(this);
delay = setTimeout(function () {
newtabindex = parseInt($this.attr("data-index"));
if (oldtabindex != newtabindex) {
var $to = $('.top-title').eq(oldtabindex); //top-titleold
var $po = $to.children('.plist'); //plistold
var $tn = $(".top-title").eq(newtabindex); //old-titleold
var $pn = $tn.children('.plist'); //plistnew
var flag = true;
for (var k = 0; k < loaded.length; k++) {
if (loaded[k] == newtabindex) { //判断对应<div class="smt" data-index="newtabindex"></div>是否加载过goods
flag = false;
break;
}
}
if (flag) {
$.ajax({
type: 'post',
url: "http://localhost:51355/GoodsWebService.asmx/GetGoodsListByCategory",
data: "{'index':'" + newtabindex + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$('#loding').show();
},
success: function (data) {
$('#loding').hide();
var data = data.d;
if (data != null) {
$to.children('.smt').removeClass('active');
$po.hide();
$this.after(data);
$this.next().find('img.lazy').lazyload({ effect: "fadeIn" });
$tn.children('.smt').addClass('active');
$pn.show();
loaded.push(newtabindex);
$tabarrow.stop();
$tabarrow.animate({ left: newtabindex * $tabarrow.width() }, 500, "easeInOutQuint");
}
}
})
} else {
$to.children('.smt').removeClass('active');
$po.hide();
$tn.children('.smt').addClass('active');
$pn.show();
$tabarrow.stop();
$tabarrow.animate({ left: newtabindex * $tabarrow.width() }, 500, "easeInOutQuint");
}
isdelayed = true;
}
}, 200);
}).bind('mouseleave', function () {
clearTimeout(delay);
if (isdelayed) { oldtabindex = parseInt($(this).attr("data-index")); }
isdelayed = false;
});
}
}
})
})
</script>
</body>
</html>
webservice:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Services;
namespace Demo
{
/// <summary>
/// GoodsWebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。
[System.Web.Script.Services.ScriptService]
public class GoodsWebService : System.Web.Services.WebService
{
private GoodsEntities db=null;
public GoodsWebService()
{
db = new GoodsEntities();
}
[WebMethod(CacheDuration=1800)] //缓存30分钟（30*60）
public string GetGoodsListByCategory(int index)
{
var s = db.tGoods.OrderBy(n => n.Id).Skip(index * 10).Take(10);
if (s.Count() != 0)
{
StringBuilder goods = new StringBuilder();
foreach (tGoods g in s) {
goods.Append(string.Format("<div class=\"list-wrap\"><div class=\"img-wrap\"><img class=\"lazy\" data-original=\"goods/{0}\"/></div><div class=\"font\">{1}</div><div class=\"price\">{2}</div></div>", g.fImageUrl, g.fGoodsName, g.fPrice));
}
return "<div class=\"plist\">" + goods.ToString() + "</div>";
}
else
{
return "未找到数据！";
}
}
[WebMethod(CacheDuration = 1800)] //缓存30分钟（30*60）
public List<tGoods> GetGoodsListByCategory1(int index)
{
var s = db.tGoods.OrderBy(n => n.Id).Skip(index * 10).Take(10);
if (s.Count() != 0)
{
return s.ToList();
}
else
{
return null;
}
}
}
}
2、纯js+html（ajax请求service返回数据通过jquery template拼接）
<!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>tab demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
color: #666;
}
.top {
width: 550px;
margin: 0 auto;
}
.top-wrap {
position: relative;
border-bottom: 1px solid #666;
height: auto;
}
.top-title {
float: left;
margin-top: 10px;
width: 110px;
text-align: center;
border-bottom: 2px solid #AAA;
}
.top-title .smt {
cursor: default;
margin-bottom: 10px;
}
.tab-arrow {
position: absolute;
z-index: 1;
top: 43px;
left: 0;
background-color: #E4393C;
width: 110px;
height: 2px;
text-align: center;
}
.plist {
width: 550px;
position: absolute;
left: 0px;
}
.plist .list-wrap {
width: 110px;
float: left;
margin-top: 10px;
}
.plist .list-wrap .img-wrap {
width: 100px;
height: 100px;
}
.plist .list-wrap .font {
text-align: center;
font-size: small;
margin-top: 30px;
height: 30px;
}
.plist .list-wrap .price {
color: Red;
padding: 5px;
}
.top-title .active {
color: #E4393C;
}
div.tab-arrow b {
border-style: dashed dashed solid;
border-color: transparent transparent #E4393C;
border-width: 10px;
width: 0;
height: 0;
display: inline-block;
margin-top: -20px;
overflow: hidden;
z-index: 2;
}
#loding {
position: absolute;
left: 220px;
top: 210px;
}
</style>
</head>
<body>
<div class="top">
<div class="top-wrap">
<div id="loding" style="display: none">
<img src="/Images/loading.gif" alt="加载中......" />
</div>
<div class="tab-arrow" style="left: 0px;"><b></b></div>
<div class="top-title">
<div class="smt active" data-index="0">
<h3>特价商品</h3>
</div>
</div>
<div class="top-title">
<div class="smt" data-index="1">
<h3>大家电</h3>
</div>
</div>
<div class="top-title">
<div class="smt" data-index="2">
<h3>小家电</h3>
</div>
</div>
<div class="top-title">
<div class="smt" data-index="3">
<h3>手机通讯</h3>
</div>
</div>
<div class="top-title">
<div class="smt" data-index="4">
<h3>汽车五金</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<!--jquery animate特效-->
<script type="text/javascript" src="Scripts/jquery.easing.min.js"></script>
<!--jquery animate特效-->
<!--图片懒加载-->
<script type="text/javascript" src="Scripts/jquery.lazyload.js"></script>
<!--图片懒加载-->
<script type="text/javascript" src="Scripts/jquery.tmpl.min.js"></script>
<script type="text/javascript">
$(function () {
var loaded = []; //记录记载过的goods
$.ajax({
type: 'post',
url: "http://localhost:51355/GoodsWebService.asmx/GetGoodsListByCategory1",
data: "{'index':'0'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$('#loding').show();
},
success: function (data) {
$('#loding').hide();
var data = data.d;
if (data != null) {
$plist = $("<div class='plist'></div>");
$("<div><div class=\"list-wrap\"><div class=\"img-wrap\"><img class=\"lazy\" data-original=\"goods/${fImageUrl}\"/></div><div class=\"font\">${fGoodsName}</div><div class=\"price\">${fPrice}</div></div></div>")
.tmpl(data).appendTo($plist);
$('div.active').after($plist);
$("img.lazy").lazyload({ effect: "fadeIn" });
loaded.push(0);
var oldtabindex = 0;
var newtabindex = 0;
var $tabarrow = $('div.tab-arrow');
var delay;
var isdelayed = false;
$(".smt").bind('mouseenter', function () {
var $this = $(this);
delay = setTimeout(function () {
newtabindex = parseInt($this.attr("data-index"));
if (oldtabindex != newtabindex) {
var $to = $('.top-title').eq(oldtabindex); //top-titleold
var $po = $to.children('.plist'); //plistold
var $tn = $(".top-title").eq(newtabindex); //old-titleold
var $pn = $tn.children('.plist'); //plistnew
var flag = true;
for (var k = 0; k < loaded.length; k++) {
if (loaded[k] == newtabindex) { //判断对应<div class="smt" data-index="newtabindex"></div>是否加载过goods
flag = false;
break;
}
}
if (flag) {
$.ajax({
type: 'post',
url: "http://localhost:51355/GoodsWebService.asmx/GetGoodsListByCategory1",
data: "{'index':'" + newtabindex + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$('#loding').show();
},
success: function (data) {
$('#loding').hide();
var data = data.d;
if (data != null) {
$plist = $("<div class='plist'></div>");
//外层需多加一个div
$("<div><div class=\"list-wrap\"><div class=\"img-wrap\"><img class=\"lazy\" data-original=\"goods/${fImageUrl}\"/></div><div class=\"font\">${fGoodsName}</div><div class=\"price\">${fPrice}</div></div></div>")
.tmpl(data).appendTo($plist);
$to.children('.smt').removeClass('active');
$po.hide();
$this.after($plist);
$this.next().find('img.lazy').lazyload({ effect: "fadeIn" });
$tn.children('.smt').addClass('active');
$pn.show();
loaded.push(newtabindex);
$tabarrow.stop();
$tabarrow.animate({ left: newtabindex * $tabarrow.width() }, 500, "easeInOutQuint");
}
}
})
} else {
$to.children('.smt').removeClass('active');
$po.hide();
$tn.children('.smt').addClass('active');
$pn.show();
$tabarrow.stop();
$tabarrow.animate({ left: newtabindex * $tabarrow.width() }, 500, "easeInOutQuint");
}
isdelayed = true;
}
}, 200);
}).bind('mouseleave', function () {
clearTimeout(delay);
if (isdelayed) { oldtabindex = parseInt($(this).attr("data-index")); }
isdelayed = false;
});
}
}
})
})
</script>
</body>
</html>
3、第一个slide由服务器生成，其他项通过ajax加载（直接在后台生成html标记）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Demo.Index" %>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title>tab demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
color: #666;
}
.top {
width: 550px;
margin: 0 auto;
}
.top-wrap {
position: relative;
border-bottom: 1px solid #666;
height: auto;
}
.top-title {
float: left;
margin-top: 10px;
width: 110px;
text-align: center;
border-bottom: 2px solid #AAA;
}
.top-title .smt {
cursor: default;
margin-bottom: 10px;
}
.tab-arrow {
position: absolute;
z-index: 1;
top: 42px;
left: 0;
background-color: #E4393C;
width: 110px;
height: 2px;
text-align: center;
}
html.lt-ie8 .tab-arrow {
top: 41px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.tab-arrow {
top: 43px;
}
}
.plist {
width: 550px;
position: absolute;
left: 0px;
}
.plist .list-wrap {
width: 110px;
float: left;
margin-top: 10px;
}
.plist .list-wrap .img-wrap {
width: 100px;
height: 100px;
}
.plist .list-wrap .font {
text-align: center;
font-size: small;
margin-top: 30px;
height: 30px;
}
.plist .list-wrap .price {
color: Red;
padding: 5px;
}
.top-title .active {
color: #E4393C;
}
div.tab-arrow b {
border-style: dashed dashed solid;
border-color: transparent transparent #E4393C;
border-width: 8px;
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
z-index: 2;
position: absolute;
top: -16px;
left: 51px;
}
#loding {
position: absolute;
left: 220px;
top: 210px;
}
</style>
</head>
<body>
<script type="text/javascript" src="Test.aspx"></script>
<a href="Test2.aspx?exit=1">退出此页并跳到index.html </a>
<p>代码：<a href="Test2.aspx?exit=1"></a></p>
<a href="Test2.aspx?exit=2">这个不跳转</a>
<p>代码：<a href="Test2.aspx?exit=2"></a></p>
<div class="top">
<div class="top-wrap">
<div id="loding" style="display: none">
<img src="/Images/loading.gif" alt="加载中......" />
</div>
<div class="tab-arrow"><b></b></div>
<div class="top-title">
<div class="smt active" data-index="0">
<h3>特价商品</h3>
</div>
<div class="plist">
<%foreach (Demo.tGoods g in lg){
Response.Write(String.Format(@"<div class='list-wrap'>
<div class='img-wrap'><img class='lazy' src='/Images/placeholder.png' data-original='goods/{0}'/></div>
<div class='font'>{1}</div> <div class='price'>{2}</div></div>", g.fImageUrl, g.fGoodsName, g.fPrice));
}%>
</div>
</div>
<div class="top-title">
<div class="smt" data-index="1">
<h3>大家电</h3>
</div>
</div>
<div class="top-title">
<div class="smt" data-index="2">
<h3>小家电</h3>
</div>
</div>
<div class="top-title">
<div class="smt" data-index="3">
<h3>手机通讯</h3>
</div>
</div>
<div class="top-title">
<div class="smt" data-index="4">
<h3>汽车五金</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.easing.min.js"></script>
<!--jquery animate特效-->
<script type="text/javascript" src="Scripts/jquery.lazyload.js"></script>
<!--图片懒加载-->
<script type="text/javascript">
$(function () {
var loaded = []; //记录记载过的goods
$('img.lazy').lazyload({ effect: "fadeIn" });
loaded.push(0);
var oldtabindex = 0;
var newtabindex = 0;
var $tabarrow = $('div.tab-arrow');
var delay;
var isdelayed = false;
$(".smt").bind('mouseenter', function () {
var $this = $(this);
delay = setTimeout(function () {
newtabindex = parseInt($this.attr("data-index"));
if (oldtabindex != newtabindex) {
var $to = $('.top-title').eq(oldtabindex); //top-titleold
var $po = $to.children('.plist'); //plistold
var $tn = $(".top-title").eq(newtabindex); //old-titleold
var $pn = $tn.children('.plist'); //plistnew
var flag = true;
for (var k = 0; k < loaded.length; k++) {
if (loaded[k] == newtabindex) { //判断对应<div class="smt" data-index="newtabindex"></div>是否加载过goods
flag = false;
break;
}
}
if (flag) {
$.ajax({
type: 'post',
url: "http://localhost:51355/GoodsWebService.asmx/GetGoodsListByCategory",
data: "{'index':'" + newtabindex + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$('#loding').show();
},
success: function (data) {
$('#loding').hide();
var data = data.d;
if (data != null) {
$to.children('.smt').removeClass('active');
$po.hide();
$this.after(data);
$this.next().find('img.lazy').lazyload({ effect: "fadeIn" });
$tn.children('.smt').addClass('active');
$pn.show();
loaded.push(newtabindex);
$tabarrow.stop();
$tabarrow.animate({ left: newtabindex * $tabarrow.width() }, 500, "easeInOutQuint");
}
}
})
} else {
$to.children('.smt').removeClass('active');
$po.hide();
$tn.children('.smt').addClass('active');
$pn.show();
$tabarrow.stop();
$tabarrow.animate({ left: newtabindex * $tabarrow.width() }, 500, "easeInOutQuint");
}
isdelayed = true;
}
}, 200);
}).bind('mouseleave', function () {
clearTimeout(delay);
if (isdelayed) { oldtabindex = parseInt($(this).attr("data-index")); }
isdelayed = false;
});
})
</script>
</body>
</html>
namespace Demo
{
public partial class Index : System.Web.UI.Page
{
public List<tGoods> lg = new List<tGoods>();
private GoodsEntities db = null;
public Index()
{
db = new GoodsEntities();
}
protected void Page_Load(object sender, EventArgs e)
{
var s = db.tGoods.OrderBy(n => n.Id).Take(10);
if (s.Count() != 0){
lg = s.ToList();
}
else {
Response.End();
}
}
}
}