jquery——幻灯片（只动一屏）
制作天天生鲜的幻灯片部分
贴了全部代码：
main.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天天生鲜-首页</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
</head>
<body>
<div class="header_con">
<div class="header">
<div class="welcome fl">欢迎来到天天生鲜</div>
<div class="user_info fr"> <div class="user_login_link fl">
<a href="#">登陆</a>
<span>|</span>
<a href="#">注册</a>
</div> <div class="user_welcome fl">
欢迎您 : <em>张三</em>
</div> <div class="user_shopping fl">
<span>|</span>
<a href="#">我的购物车</a>
<span>|</span>
<a href="#">我的订单</a>
</div>
</div>
</div>
</div>
<div class="logo_bar">
<div class="logo fl">
<a href="#"><img src="data:images/logo.png"></a>
</div>
<div class="search fl">
<form>
<!--placeholder:输入框中有“搜索”两个字，输入文字后消失的一种样式-->
<input type="text" name="" placeholder="搜索" class="input_text fl">
<input type="button" name="" value="搜索" class="input_btn fr">
</form>
</div>
<div class="chart fr">
<a href="#" class="fl">我的购物车</a>
<span class="fr">0</span>
</div>
</div>
<div class="sub_menu_con">
<div class="sub_menu">
<h1 class="fl">全部商品分类</h1>
<ul class="fl">
<li><a href="">首页</a></li>
<li><a href="">手机生鲜</a></li>
<li><a href="">抽奖</a></li>
</ul>
</div>
</div>
<div class="center_con" >
<ul class="main_menu fl">
<li><a href="" class="fruit">新鲜水果</a></li>
<li><a href="" class="seafood">海鲜水产</a></li>
<li><a href="" class="meat">猪肉牛肉</a></li>
<li><a href="" class="egg">禽类蛋品</a></li>
<li><a href="" class="vegetable">新鲜蔬菜</a></li>
<li><a href="" class="ice">速冻食品</a></li>
</ul> <div class="slide_con fl">
<ul class="slide">
<li><a href=""><img src="data:images/slide.jpg" alt="幻灯片"></a></li>
<li><a href=""><img src="data:images/slide02.jpg" alt="幻灯片"></a></li>
<li><a href=""><img src="data:images/slide03.jpg" alt="幻灯片"></a></li>
<li><a href=""><img src="data:images/slide04.jpg" alt="幻灯片"></a></li>
</ul> <div class="prev"></div>
<div class="next"></div> <ul class="points"> </ul>
</div>
<div class="adv fl" >
<a href=""><img src="data:images/adv01.jpg" alt="广告"></a>
<a href=""><img src="data:images/adv02.jpg" alt="广告"></a>
</div>
</div> <div class="common_model">
<div class="common_title"> <h3 class="fl">新鲜水果</h3> <ul class="fl">
<li><span>|</span></li>
<li><a href="#">草莓</a></li>
<li><a href="#">荔枝</a></li>
<li><a href="#">牛油果</a></li>
</ul> <a href="#" class="more fr">查看更多></a>
</div> <div class="common_goods_list">
<div class="goods_banner fl"><img src="data:images/banner.jpg" alt="商品banner">
</div>
<ul class="good_list fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
<p>$ 5.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
<p>$ 5.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
<p>$ 5.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
<p>$ 5.00</p>
</li>
</ul>
</div>
</div>
<div class="common_model">
<div class="common_title"> <h3 class="fl">新鲜水果</h3> <ul class="fl">
<li><span>|</span></li>
<li><a href="#">草莓</a></li>
<li><a href="#">荔枝</a></li>
<li><a href="#">牛油果</a></li>
</ul> <a href="#" class="more fr">查看更多></a>
</div> <div class="common_goods_list">
<div class="goods_banner fl"><img src="data:images/banner.jpg" alt="商品banner">
</div>
<ul class="good_list fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
<p>$ 5.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
<p>$ 5.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
<p>$ 5.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
<p>$ 5.00</p>
</li>
</ul>
</div>
</div>
<div class="common_model">
<div class="common_title"> <h3 class="fl">新鲜水果</h3> <ul class="fl">
<li><span>|</span></li>
<li><a href="#">草莓</a></li>
<li><a href="#">荔枝</a></li>
<li><a href="#">牛油果</a></li>
</ul> <a href="#" class="more fr">查看更多></a>
</div> <div class="common_goods_list">
<div class="goods_banner fl"><img src="data:images/banner.jpg" alt="商品banner">
</div>
<ul class="good_list fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
<p>$ 5.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
<p>$ 5.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
<p>$ 5.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
<p>$ 5.00</p>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="links">
<a href="">关于我们</a>
<span>|</span>
<a href="">联系我们</a>
<span>|</span>
<a href="">招聘人才</a>
<span>|</span>
<a href="">友情链接</a>
</div>
<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved<br /> 电话：010-****888 京ICP备*******8号</p>
</div>
</body>
</html>
main.css:
body{
font-family: 'Microsoft YaHei';
color:#666;
font-size:12px;
}
/*顶部状态条*/
.header_con{
height:29px;
background-color: #f7f7f7;
border-bottom:1px solid #ddd;
}
.header{
width:1200px;
height:29px;
margin:0 auto;
}
.welcome{
font:12px/29px 'Microsoft YaHei UI';
}
.user_login_link,.user_welcome, .user_shopping{
height:29px;
line-height:29px;
}
.user_login_link a, .user_shopping a{
color:#666;
}
.user_login_link a:hover,.user_shopping a:hover{
color:#f80;
}
.user_login_link span, .user_shopping span{
margin:0 15px;
color:#cecece;
}
/*把这个块藏起来*/
.user_welcome{
display:none;
}
.user_welcome em{
color:#f80;
}
/*左侧菜单样式*/
.logo_bar{
width:1200px;
height:115px;
margin:0 auto;
}
.logo{
width:151px;
height:59px;
margin:29px 0 0 17px;
}
.search{
width:616px;
height:38px;
border:1px solid #37ab40;
margin:34px 0 0 123px;
/*雪碧图的放大镜作背景图*/
background:url(../images/icons.png) 10px -335px no-repeat;
}
.search .input_text{
width:470px;
height:37px;
border:0px;
margin-left:37px;
outline:none;
}
.search .input_btn{
width:100px;
height:38px;
background-color: #37ab40;
border:;
font:14px/38px 'Microsoft YaHei UI';
color:#fff;
/*鼠标变成手*/
cursor:pointer;
}
.chart{
width:200px;
height:40px;
margin-top:34px;
}
.chart a{
width:158px;
height:38px;
border:1px solid #ddd;
font:14px/38px 'Microsoft YaHei UI';
color:#37ab40;
text-indent:56px;
background:url(../images/icons.png) 10px -300px no-repeat #f7f7f7;
}
.chart span{
width: 40px;
height:40px;
background-color:#f80;
font:bold 18px/40px 'Microsoft YaHei UI';
text-align:center;
color:#fff;
}
.sub_menu_con{
height:40px;
border-bottom:2px solid #37ab30
}
.sub_menu{
width:1200px;
height:40px;
margin:0 auto;
}
.sub_menu h1{
width:200px;
height:40px;
background-color: #37ab40;
font:14px/40px 'Microsoft YaHei UI';
text-align:center;
color:#fff;
}
.sub_menu ul{
overflow:hidden;
}
.sub_menu li{
float:left;
height:14px;
padding:0 25px;
border-left:1px solid #666;
margin-left:-2px;
margin-top:13px;
}
.sub_menu li a{
font:14px/14px 'Microsoft YaHei UI'
color:#666;
}
.sub_menu li a:hover{
color:#f80;
}
.center_con{
width:1200px;
height:270px;
margin:0 auto;
}
.center_con .main_menu{
width:200px;
height:270px;
overflow:hidden;
}
.center_con .main_menu li{
width:198px;
height:44px;
border:1px solid #eee;
margin-top:-1px;
background:url(../images/icons.png) 166px -260px no-repeat;
}
.center_con .main_menu li a{
display:block;
width:198px;
height:44px;
text-indent:71px;
font:14px/44px 'Microsoft YaHei UI';
color:#333;
background:url(../images/icons.png) 33px -260px no-repeat;
}
.center_con .main_menu li .fruit{
background-position: 30px 0px;
}
.center_con .main_menu li .seafood{
background-position: 30px -41px;
}
.center_con .main_menu li .meat{
background-position: 30px -87px;
}
.center_con .main_menu li .egg{
background-position: 30px -132px;
}
.center_con .main_menu li .vegetable{
background-position: 30px -174px;
}
.center_con .main_menu li .ice{
background-position: 30px -220px;
}
/*幻灯片样式*/
.slide_con{
width:760px;
height:270px;
position:relative;
overflow:hidden;
}
/*.slide_con .slide{*/
/*position:relative;left:0;top:0;width:760px;height:270px;*/
/*}*/
.slide_con .slide li{
width:760px;
height:270px;
position:absolute;
left:;
top:;
}
.prev{
width:15px;
height:23px;
/*绝对定位*/
position: absolute;
left:11px;
top:122px;
background:url(../images/icons.png) -2px -388px no-repeat;
cursor: pointer;
}
.next{
width:15px;
height:23px;
/*绝对定位，叠加图片*/
position: absolute;
left:732px;
top:122px;
background:url(../images/icons.png) -2px -428px no-repeat;
cursor: pointer;
}
.points{
position: absolute;
width:100%;
height:11px;
left:;
bottom:9px;
text-align:center;
font-size:0px;
}
.points li{
width:11px;
height:11px;
display:inline-block;
background-color: #9f9f9f;
margin:0 5px;
/*设置圆角，半径为高度的一半*/
border-radius:50%;
cursor:pointer;
}
.points .active{
background-color: #cecece;
}
.adv{
width:240px;
height:270px;
}
.adv a{
float:left;
width:240px;
height:135px;
}
/*解决图片下方3像素白边的情况*/
.adv a img{
display:block;
}
.common_model{
width:1200px;
height:340px;
margin:18px auto 0;
}
.common_title{
height:38px;
border-bottom: 2px solid #42ad46;
}
.common_model h3{
font:bold 16px/38px 'Microsoft YaHei UI';
color:#37ab40;
}
.common_model .common_title ul{
height:12px;
margin:13px 0 0 20px;
}
.common_model .common_title li{
float:left;
margin:0 10px;
}
.common_model .common_title li a{
/*微软雅黑默认有行高*/
color:#666;
}
.common_model .common_title li a:hover{
color:#f80;
}
.common_model .common_title .more{
height:38px;
line-height:38px;
color:#666;
}
.common_model .common_title .more:hover{
color:#f80;
}
.common_model .common_goods_list{
height:300px;
width:1200px;
}
.common_model .common_goods_list .goods_banner{
width:200px;
height:300px;
}
.common_model .common_goods_list .good_list{
width:1000px;
height:300px;
}
.common_model .common_goods_list .good_list li{
width:249px;
height:299px;
border-right:1px solid #ededed;
border-bottom:1px solid #ededed;
float:left;
}
.common_goods_list .good_list li:hover{
width:248px;
height:298px;
border:1px solid #ff0;
}
.common_goods_list .good_list li h4{
height:52px;
font:14px/52px 'Microsoft YaHei UI';
color:#666;
text-align:center;
}
.common_goods_list .good_list li a{
display:block;
height:180px;
width:180px;
margin:0 auto;
}
.common_goods_list .good_list li p{
height:52px;
font:bold 20px/52px 'Microsoft YaHei UI';
color:#c40000;
text-align: center;
}
.footer{
height:145px;
border-top:2px solid #4ab14e;
margin-top:30px;
}
.footer .links{
text-align:center;
/*有边框就没有margin-top塌陷了*/
margin-top:40px;
}
.footer .links a{
color:#4e4e4e;
}
.footer .links a:hover{
color:#f80;
}
.footer .links span{
color:#4e4e4e;
margin:0 10px;
}
.footer p{
text-align: center;
line-height:27px;
color:#4e4e4e;
margin-top:10px;
}
reset.css:
/*不要用网上现成的，不用的标签不要写，会影响性能，标签组选择器*/
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,select,form{
margin:;
padding:;
} /*让h标签继承body类设置的字体大小*/
h1,h2,h3,h4,h5,h6{
font-size:100%;
} /*去掉默认. 标签选择器*/
ul{
list-style: none;
} /*不倾斜*/
em{
font-style:normal;
} /*去掉下划线*/
a{
text-decoration:none;
} /*去掉IE下，图片做链接时产生的边框*/
img{
border:none;
} /*清除margin-top塌陷和清除浮动*/
.clearfix:before, .clearfix:after{
content:"";
/*一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，
使我们能够轻松定义一个单元格的边界、背景等样式，
而不会产生因为使用了table那样的制表标签所导致的语义化问题。*/
display:table;
} .clearfix:after{
/*清除左右两边浮动*/
clear:both;
} .clearfix{
zoom:;
} .fl{
float:left;
} .fr{
float:right;
}
slide.js:
$(function () {
var $li = $('.slide_con .slide li');
var len = $li.length;
var $prev = $('.prev');
var $next = $('.next');
var timer = null;
//将要运动过来的li
var nowli = 0;
//当前要离开的li
var prevli = 0;
//除了第一个li，其他的li放到右边
$li.not(':first').css({left:760})
$li.each(function (index) {
// 选择li：var $sli = $('li')；
// 创建li：var $sli = $('<li>')
var $sli = $('<li>');
if(index==0)
{
$sli.addClass('active');
}
//将创建的li增加到points类中
$sli.appendTo('.points');
});
var $points = $('.points li');
$points.click(function () {
nowli = $(this).index();
if(nowli==prevli){return;}
move();
$(this).addClass('active').siblings().removeClass('active');
})
$prev.click(function () {
nowli--;
move();
$points.eq(nowli).addClass('active').siblings().removeClass('active');
})
$next.click(function () {
nowli++;
move();
$points.eq(nowli).addClass('active').siblings().removeClass('active');
})
//鼠标放在幻灯片处时停止播放，鼠标离开时继续播放
$('.slide_con').mouseenter(function(event){
clearInterval(timer);
});
$('.slide_con').mouseleave(function () {
timer = setInterval(autoplay,4000);
})
//自动播放
//函数没有括号！
timer = setInterval(autoplay,4000);
function autoplay() {
nowli++;
move();
$points.eq(nowli).addClass('active').siblings().removeClass('active');
}
function move(){
if(nowli<0){
nowli = len-1;
prevli = 0;
$li.eq(nowli).css({left:-760});
//点的很快得时候会有bug，stop()用来解决这个bug
$li.eq(prevli).stop().animate({left:760});
$li.eq(nowli).stop().animate({left:0});
prevli = nowli;
//停止进行下面的if判断
return;
}
if(nowli>len-1){
nowli = 0;
prevli = len-1;
$li.eq(nowli).css({left:760});
$li.eq(prevli).stop().animate({left:-760});
$li.eq(nowli).stop().animate({left:0});
prevli = nowli;
return;
}
if(nowli>prevli){
$li.eq(nowli).css({left:760});
$li.eq(prevli).stop().animate({left:-760});
}
else {
$li.eq(nowli).css({left:-760});
$li.eq(prevli).stop().animate({left:760});
}
$li.eq(nowli).stop().animate({left:0});
prevli = nowli;
}
})
jquery——幻灯片（只动一屏）的更多相关文章
- 基于jQuery的网站首页宽屏焦点图幻灯片
今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 基于bootstrup3全屏宽度的响应式jQuery幻灯片特效
这是一款效果非常酷的基于Bootstrup3.x和HTML5的响应式全屏宽度jQuery幻灯片特效.该幻灯片能自适应屏幕的宽度,使用HTML5的data属性来指定幻灯片所需的各种属性.使用简单,界面美 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
- 锋利的jQuery幻灯片实例
//锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 60款很酷的 jQuery 幻灯片演示和下载【转】
jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...
- 强大实用的jQuery幻灯片插件Owl Carousel
演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...
- jQuery幻灯片插件Owl Carousel
简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON ...
随机推荐
- bzoj 4815 小Q的表格 —— 反演+分块
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4815 思路就和这里一样:https://blog.csdn.net/leolyun/arti ...
- JVM类加载（1）—加载
1.加载: 查找并加载类,将.class文件中的二进制数据读入到内存中,放在运行时数据区的方法内,然后在堆内创建一个java.lang.class对象用来封装类在方法区内的数据结构.并且向程序员提供了 ...
- vs2015类中方法前的引用链接不显示的解决方案
在工具→选项,打开如下界面,寻找“文本编辑器→所有语言”中设置显示:<img data-rawheight="761" data-rawwidth="130 ...
- LAMP 1.9域名301跳转
给两个域名分主次.输入次域名跳转到主域名然后进行访问. 首先打开虚拟机配置文件. vim /usr/local/apache2/conf/extra/httpd-vhosts.conf 把这段配置添加 ...
- Javascript作用域和变量提升
下面的程序是什么结果? var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 结果是10: 那么 ...
- MySql中的视图的概念及应用
视图的基本概念 视图是从一个或几个基本表(或者视图)导出的表.它与基本表不同,是一个虚表. 数据库只存放视图的定义,而不存放视图对应的数据,这些数据仍存放在原来的基本表中.所以基本表中的数据发生变化, ...
- Eclipse插件——EasyExplore安装
Eclipse插件--EasyExplore安装 分类: eclipse2011-12-07 09:02 458人阅读 评论(0) 收藏 举报 插件功能 easyexplore是一个eclipse的小 ...
- Linux/Unix 指令使用说明的格式介绍（the Bash Command 'Usage' Syntax）
Linux/Unix 指令使用说明的格式介绍(the Bash Command 'Usage' Syntax) 摘自 金马的Blog 原文 http://www.lijinma.com/blo ...
- Entity Framework Code-First（16）：Move Configurations
Move Configurations to Separate Class in Code-First: By now, we have configured all the domain class ...
- restfull知识点
网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......).因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信.这导致API ...