<!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效果图的更多相关文章

  1. 自写网站入门阶段之三：兼容大战与jq初探

    自上一次作小结至今已整整一个月,在忙乎了半个月的工作之后闲下来的一个下午我终于可以再次作这个阶段的小结了.首先庆幸的是在同学的推荐下我顺利的找到了工作并于月初3号正式上班,这一点非常感谢他,让我免去了 ...

  2. ViewPager系列之 仿魅族应用的广告BannerView

    转自:https://juejin.im/post/5933c65d0ce463005717cbe9 前言 Banner广告位是APP 中的一个非常重要的位置,为什么呢?因为它能带来money.是一个 ...

  3. SpringBoot 使用小技巧合集

    原文:https://my.oschina.net/xiedeshou/blog/1926191 设置网站图标 原来我们在使用tomcat开发时,设置网站图片时,即icon图标时,一般都是直接替换ro ...

  4. ViewPager系列之 仿魅族应用的广告BannerView（转）

    转载:http://www.open-open.com/lib/view/open1496585426285.html 使用方法:http://www.see-source.com/androidwi ...

  5. SpringBoot | 番外：使用小技巧合集

    前言 最近工作比较忙,事情也比较多.加班回到家都十点多了,洗个澡就想睡觉了.所以为了不断更太多天,偷懒写个小技巧合集吧.之后有时间都会进行文章更新的.原创不易,码字不易,还希望大家多多支持!话不多说, ...

  6. IntelliJ IDEA必装插件以及SpringBoot使用小技巧合集

    IntelliJ IDEA必装插件 有不知道怎么安装的吗?File-->settings打开设置面板,找到plugins,输入想要安装的插件回车即可 1.背景图片 目前,IDEA支持设置背景图片 ...

  7. 百度小程序-swiper组件

    .swan <!-- 轮播图S --> <view class="swiper-box"> <swiper class="banner&qu ...

  8. JQ写下拉列表项目移动（内附效果图和源代码）

    效果图如下: 实现功能:点击第一个按钮,让选中的对象从左边移动到右边: 点击第二个按钮,让左边的所有对象移动到右边: 点击第三个按钮,让选中的对象从右边边移动到左边:   点击第四个按钮,让右边的所有 ...

  9. JQ写简单的伸缩菜单（内附效果图和源代码）

    效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

随机推荐

  1. iOS CoreData 的级联删除等操作

    关于CoreData 的基本操作在网上有一些中文资料,但是这些资料大多没有涉及CoreData的详细操作,只是简单的演示了最基本用法.像级联删除这种最基本的数据库操作都没有提到.今天在网上看到了一些英 ...

  2. Java最常用的变量定义汇总

    Java最常用的数据类型有基本数据类型,字符串对象,数组,基本数据类型又分为:数值型(包括整形和浮点型),字符型,布尔型,下面用一个简单的程序把这些数据类型汇总一下 public class Java ...

  3. 22.python笔记之web框架

    一.web框架本质 1.基于socket,自己处理请求 #!/usr/bin/env python3 #coding:utf8 import socket def handle_request(cli ...

  4. Google map测量工具

    启用Google map的测量工具,测量图上的距离. 打开Google map,左下角看到Google 地图实验室,点开,然后enable相应功能即可. 通过Google map lab还能使我们能够 ...

  5. iOS开发网络篇—JSON介绍

    一.什么是JSON JSON是一种轻量级的数据格式,一般用于数据交互 服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除外) JSON的格式很像OC中的字典和数组 {" ...

  6. 微博feed系统的推(push)模式和拉(pull)模式和时间分区拉模式架构探讨

    sns系统,微博系统都应用到了feed(每条微博或者sns里的新鲜事等我们称作feed)系统,不管是twitter.com或者国内的新浪微博,人人网等,在各种技术社区,技术大会上都在分享自己的feed ...

  7. div img居中的方式

    想让div中的img水平和垂直都居中,可以将img放在div中,img的样式:height:100%;width:100%; 外部定义div的宽度和高度,然后定义line-height行高,div外部 ...

  8. hdu 4003 树形dp+分组背包 2011大连赛区网络赛C

    题意:求K个机器人从同一点出发,遍历所有点所需的最小花费 链接:点我 Sample Input 3 1 1 //3个点,从1出发,1个机器人 1 2 1 1 3 1 3 1 2 1 2 1 1 3 1 ...

  9. 理解ASP.NET 5的中间件

    今天推荐的这篇文章,讲述了如何实现和使用ASP.NET 5的中间件. 虽然在ASP.NET 5中,微软没有再强调OWIN(Open Web Interface for .NET)及其微软官方的OWIN ...

  10. 【现代程序设计】homework-05

    本次作业要求设计服务器和客户端,由于之前对网络编程是一窍不通,上上节课听宗学长讲述Tcp的时候心里想这个东西还真是高大上啊一点儿都听不懂,但是上个周末看了看C#网络编程的博客和书之后,发现这个东西入门 ...