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 ...
随机推荐
- http之pragma
关于Pragma:no-cache,跟Cache-Control: no-cache相同.Pragma: no-cache兼容http 1.0 ,Cache-Control: no-cache是htt ...
- js变量和函数提升的小结
对于变量和函数一起的提升说法,我比较认同"LittleBear"的说法. 比如: <script> console.log(a)//function a(){} var ...
- 浅谈双流水线调度问题以及Jhonson算法
引入:何为流水线问题 有\(n\)个任务,对于每个任务有\(m\)道工序,每个任务的\(m\)道工序必须在不同的m台机器上依次完成才算把这个任务完成,在前\(i-1\)道工序完成后才能去完成第\(i\ ...
- 统计不同的单词(map应用)
题目描述: 输入一些单词,找出所有满足如下条件的单词:该单词不能通过字母重排,得到输入文本中的另一个单词.在判断是否满足条件时,字母不区分大小写,但在输出时应保留输入中的大小写,按字典序进行排列(所有 ...
- netty中的ByteBuf
网络数据的基本单位总是字节.Java NIO 提供了 ByteBuffer 作为它 的字节容器,但是这个类使用起来过于复杂,而且也有些繁琐. Netty 的 ByteBuffer 替代品是 ByteB ...
- 杂项-权限管理:Spring Secutity
ylbtech-杂项-权限管理:Spring Secutity Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在S ...
- TS学习之解构与展开
一.解构 1.解构数组 let input = [1, 2]; let [first, second] = input; console.log(first); // outputs 1 consol ...
- python 基础 字典生成式
dict1 = {1:2,3:4,6:7,9:10} print dict((v,k) for k,v in dict.items()) 结果 {2:1.4:3,10:9,7:6} res = [{' ...
- Intent的简单概述
Intent是负责在系统组件之间传递信息的一个对象,就像名字一样,是一个意图,可以将当前组件的意图传递给系统,例如启动Activity等,还可以在传递的时候附加上一些值,可以用Bundle对象封装这些 ...
- Java 常见注解
@Retention 1.RetentionPolicy.SOURCE —— 这种类型的Annotations只在源代码级别保留,编译时就会被忽略2.RetentionPolicy.CLASS —— ...