jq横向轮播
```javascript
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.block {
position: relative;
width: 500px;
height: 300px;
margin: auto;
overflow: hidden;
}
.banner {
width: 3000px;
height: 300px;
}
.banner > li {
list-style: none;
float: left;
width: 500px;
height: 300px;
}
.banner > li > img {
width: 500px;
height: 300px;
}
.block > a {
display: block;
position: absolute;
width: 40px;
height: 60px;
text-align: center;
line-height: 60px;
background: grey;
color: #fff;
}
.block > a:nth-child(1) {
left: 0;
top: 120px;
}
.block > a:nth-child(2) {
right: 0;
top: 120px;
}
.pos {
position: absolute;
width: 500px;
height: 20px;
left: 0;
bottom: 0;
text-align: center;
}
.pos > div {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #fff;
box-sizing: border-box;
}
.color {
background: red;
}
</style>
</head>
<body>
<div class="block">
<a>左</a>
<a>右</a>
<ul class="banner">
<li><img src="./img/1.jpg" alt=""/></li>
<li><img src="./img/2.jpg" alt=""/></li>
<li><img src="./img/3.jpg" alt=""/></li>
<li><img src="./img/4.jpg" alt=""/></li>
<li><img src="./img/5.jpg" alt=""/></li>
</ul>
<div class="pos">
<div class="color"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function () {
var num = 0;
var timer;
var timeend = 0;
$(".banner").children().eq(0).clone(true).appendTo($(".banner"));
$(".block").mouseenter(function () {
clearInterval(timer);
}).mouseleave(function () {
timer = setInterval(function () {
showanimate();
}, 1200);
}).trigger("mouseleave");
function showanimate() {
num++;
$(".banner").stop().animate({
marginLeft: -500 * num
}, 700, function () {
//判断
if (num >= $(this).children().length - 1) {
$(this).css({
marginLeft: 0
});
num = 0;
}
$(".pos>div").eq(num).addClass("color").siblings().removeClass();
});
}
$(".block>a").each(function (index) {
$(this).click(function (e) {
if (e.timeStamp - timeend >= 700) {
timeend = e.timeStamp;
if ($(this).html() == "左") {
showanimate();
}
else {
//num
num--;
if (num < 0) {
num = $(".banner").children().length - 2;
$(".banner").css({
marginLeft: -2500
});
}
$(".banner").animate({
marginLeft: -500 * num
}, 700);
}
}
});
});
$(".pos>div").each(function (index) {
$(this).mouseover(function () {
$(this).addClass("color").siblings().removeClass();
$(".banner").stop().animate({
marginLeft: -500 * index
}, 700);
});
});
});
</script>
</body>
</html>
外卖系统
```javascript
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>点外卖</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
.header {
height: 30%;
background: #f4f3ff;
}
.w {
width: 100%;
height: 70%;
display: flex;
flex-direction: row;
border: 1px solid silver;
box-sizing: border-box;
}
.w_left {
flex: 1;
overflow: hidden;
border-right: 1px solid silver;
}
.w_menu {
width: 110%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.w_right {
flex: 3;
position: relative;
}
.w_rmenu {
width: 110%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.leftmenu {
width: 100%;
height: 120%;
display: flex;
flex-direction: column;
}
.leftmenu > li {
list-style: none;
flex: 1;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 10%;
border-bottom: 1px solid silver;
}
.leftcolor {
background: #dddddd;
color: red;
}
.w_rmenu > div > ul {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}
.w_rmenu > div > ul > li {
list-style: none;
height: 100px;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 10%;
border-bottom: 1px solid silver;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="w">
<div class="w_left">
<div class="w_menu">
<ul class="leftmenu">
<li class="leftcolor">热销</li>
<li>折扣</li>
<li>必点</li>
<li>素菜</li>
<li>荤菜</li>
<li>饮料</li>
<li>主食</li>
<li>套餐</li>
</ul>
</div>
</div>
<div class="w_right">
<div class="w_rmenu">
<div>
<ul>
<li>热销</li>
<li>热销</li>
</ul>
<ul>
<li>折扣</li>
<li>折扣</li>
<li>折扣</li>
<li>折扣</li>
</ul>
<ul>
<li>必点</li>
<li>必点</li>
</ul>
<ul>
<li>素菜</li>
<li>素菜</li>
<li>素菜</li>
<li>素菜</li>
<li>素菜</li>
</ul>
<ul>
<li>荤菜</li>
<li>荤菜</li>
<li>荤菜</li>
<li>荤菜</li>
<li>荤菜</li>
</ul>
<ul>
<li>饮料</li>
<li>饮料</li>
</ul>
<ul>
<li>主食</li>
</ul>
<ul>
<li>套餐</li>
<li>套餐</li>
<li>套餐</li>
<li>套餐</li>
<li>套餐</li>
<li>套餐</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function () {
$(".leftmenu>li").each(function (index) {
$(this).click(function () {
$(this).addClass("leftcolor").siblings().removeClass();
var oftop = $(".w_rmenu>div>ul").eq(index).position().top + $(".w_rmenu").scrollTop();
$(".w_rmenu").stop().animate({
scrollTop: oftop
}, 400);
});
});
$(".w_rmenu").on("scroll", function () {
var sctop = $(this).scrollTop();
$(this).find("ul").each(function (index) {
var uloftop = $(this).position().top + sctop;
var ulheight = $(this).height();
if (sctop >= uloftop && sctop <= uloftop + ulheight) {
$(".leftmenu>li").eq(index).addClass("leftcolor").siblings().removeClass();
if (index >= $(".leftmenu>li").length / 2) {
$(".w_menu").scrollTop(1000);
}
else {
$(".w_menu").scrollTop(0);
}
}
});
});
});
</script>
</body>
</html>