jq实现多banner效果图

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8" />

     <title>多banner效果</title>

     <meta name="keywords" content="" />

     <meta name="description" content="" />

     <style>

         *{margin:0;padding:0;}

         ul,li{list-style:none;}

         .banner{width:280px;height:210px;margin:20px auto;overflow:hidden;position:relative;}

         .banner .bannerul li{width:280px;height:210px;}

         .banner .prev,.next{display:block;width:30px;height:50px;color:#fff;font-size:22px;

             background:rgba(0,0,0,0.5);position:absolute;top:85px;text-decoration:none;

             text-align:center;line-height:50px;

         }

         .banner .prev{left:0;}

         .banner .next{right:0;}

     </style>

 </head>

 <body>

     <div class="banner">

         <ul class="bannerul">

             <li><img src="data:images/337622.jpg" /></li>

             <li><img src="data:images/335897.jpg" /></li>

             <li><img src="data:images/336767.gif" /></li>

         </ul>

         <a href="#" class="prev">&lt;</a>

         <a href="#" class="next">&gt;</a>

     </div>

     <div class="banner">

         <ul class="bannerul">

             <li><img src="data:images/337622.jpg" /></li>

             <li><img src="data:images/335897.jpg" /></li>

             <li><img src="data:images/336767.gif" /></li>

         </ul>

         <a href="#" class="prev">&lt;</a>

         <a href="#" class="next">&gt;</a>

     </div>

     <div class="banner">

         <ul class="bannerul">

             <li><img src="data:images/337622.jpg" /></li>

             <li><img src="data:images/335897.jpg" /></li>

             <li><img src="data:images/336767.gif" /></li>

         </ul>

         <a href="#" class="prev">&lt;</a>

         <a href="#" class="next">&gt;</a>

     </div>

     <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

     <script type="text/javascript">

         $(function(){

             var $li = $(".bannerul").find("li");

             var $lastli = $li.last().clone();

             var $firstli = $li.first().clone();

             $(".bannerul").append($firstli);

             $(".bannerul").prepend($lastli);

             var $lih = $li.height();

             var $len = $li.length/$(".banner").find(".bannerul").length;

             $(".bannerul").css({"marginTop":$lih*-1});

             $(".next").click(function(){

                 var $ul = $(this).parent(".banner").find(".bannerul");

                 var index = ($ul.data("index"))||1;

                 index ++;

                 $ul.stop(true,true).animate({"marginTop":index*$lih*-1},function(){

                     if(index==$len+1){

                         $(this).css({"marginTop":$lih*-1});

                         index = 1;

                     }

                     $ul.data("index",index);

                 });

             });

             $(".prev").click(function(){

                 var $ul = $(this).parent(".banner").find(".bannerul");

                 var index = ($ul.data("index"))||1;

                 index --;

                 $ul.stop(true,true).animate({"marginTop":index*$lih*-1},function(){

                     if(index==0){

                         $(this).css({"marginTop":$len*$lih*-1});

                         index = $len;

                     }

                     $ul.data("index",index);

                 });

             });

         });

     </script>

     <!--

     337622.jpg

     335897.jpg

     336767.gif

     334732.jpg

     333308.png

     -->

 </body>

 </html>

jq实现多banner效果图的更多相关文章

自写网站入门阶段之三：兼容大战与jq初探
自上一次作小结至今已整整一个月,在忙乎了半个月的工作之后闲下来的一个下午我终于可以再次作这个阶段的小结了.首先庆幸的是在同学的推荐下我顺利的找到了工作并于月初3号正式上班,这一点非常感谢他,让我免去了 ...
ViewPager系列之仿魅族应用的广告BannerView
转自:https://juejin.im/post/5933c65d0ce463005717cbe9 前言 Banner广告位是APP 中的一个非常重要的位置,为什么呢?因为它能带来money.是一个 ...
SpringBoot 使用小技巧合集
原文:https://my.oschina.net/xiedeshou/blog/1926191 设置网站图标原来我们在使用tomcat开发时,设置网站图片时,即icon图标时,一般都是直接替换ro ...
ViewPager系列之仿魅族应用的广告BannerView（转）
转载:http://www.open-open.com/lib/view/open1496585426285.html 使用方法:http://www.see-source.com/androidwi ...
SpringBoot | 番外：使用小技巧合集
前言最近工作比较忙,事情也比较多.加班回到家都十点多了,洗个澡就想睡觉了.所以为了不断更太多天,偷懒写个小技巧合集吧.之后有时间都会进行文章更新的.原创不易,码字不易,还希望大家多多支持!话不多说, ...
IntelliJ IDEA必装插件以及SpringBoot使用小技巧合集
IntelliJ IDEA必装插件有不知道怎么安装的吗?File-->settings打开设置面板,找到plugins,输入想要安装的插件回车即可 1.背景图片目前,IDEA支持设置背景图片 ...
百度小程序-swiper组件
.swan  <view class="swiper-box"> <swiper class="banner&qu ...
JQ写下拉列表项目移动（内附效果图和源代码）
效果图如下: 实现功能:点击第一个按钮,让选中的对象从左边移动到右边: 点击第二个按钮,让左边的所有对象移动到右边: 点击第三个按钮,让选中的对象从右边边移动到左边: 点击第四个按钮,让右边的所有 ...
JQ写简单的伸缩菜单（内附效果图和源代码）
效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

随机推荐

linux自定义脚本添加到rc.local脚本无法正常运行的问题
为了能科学地上网,你懂的.其中需要将服务端做成开机启动.然而脚本在secure crt下能正常运行,添加到/etc/rc.local下却无法正常启动服务.用ps查找了下,脚本是运行了,但服务没起来.于 ...
iOS 和 Android 中的后台运行问题
后台机制的不同,算是iOS 和 Android的一大区别了,最近发布的iOS7又对后台处理做了一定的更改,找时间总结一下编码上的区别,先做个记录. 先看看iOS的把,首先需要仔细阅读一下Apple的官 ...
sqltext的参数化处理
说到sql的参数化处理,我也是醉了,因为sql引擎真的是一个无比强大的系统,我们平时做系统的时候都会加上缓存,我想如果没有缓存,就不会有什么大网站能跑的起来,而且大公司一般会在一个东西上做的比较用心 ...
ASP.Net核心对象之HttpResponse
简介: HttpResponse是对响应报文进行设置的一个对象.通过context. Response 能够得到HttpResponse对象. context.Response.Charset;//获 ...
Android开发之onClick事件的三种写法
package a.a; import android.app.Activity; import android.os.Bundle; import android.view.View; import ...
Java中栈结构的自我实现
package com.pinjia.shop.common.collection; /** * Created by wangwei on 2017/1/3. */ public class MyL ...
一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则
结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...
Java IO流系统整理
Java IO流的分类 Java中的流,可以从不同的角度进行分类. 按流向分类: 输入流: 程序可以从中读取数据的流.输出流: 程序能向其中写入数据的流. 按数据传输单位分类: 字节流:以字节(8位二 ...
Android中make命令
转自:http://blog.sina.com.cn/s/blog_abc7e49a01011y0n.html 1.make -jXX XX表示数字,这个命令将编译Android系统并生成镜像,XX ...
hdu 1240:Asteroids!（三维BFS搜索）
Asteroids! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...

jq实现多banner效果图

jq实现多banner效果图的更多相关文章

随机推荐

热门专题