公司项目经常用到轮播焦点图，于是自己写了一个纯jq形式的横向轮播焦点图，可点击小圆点或者左右按钮进行切换，属于定宽类型。改成自适应宽度的也不难，将css里面的bannerCon宽度改为百分比，再在js里面将ul和li的宽度跟随父级容器的宽度变化即可，需要用到$(window).resize，目前公司暂时没用到，就先放这个定宽的出来啦。

兼容到IE6+以上浏览器，有轮播速度和切换间隔两个参数可以改。效果图如下：

Html代码如下：

<!doctype html>

<html lang="zh-CN">

<head>

  <meta charset="utf-8">

  <title>banner图</title>

  <link href="css/style.css" rel="stylesheet"/>

  <script src="js/jquery-1.9.1.min.js"></script>

  <script src="js/common.js"></script>

</head>

<body>

  <div class="wrap">

    <div class="banner">

      <div class="bannerCon">

        <ul class="imgList">

          <li><a href="#"><img src="data:images/banner01.jpg" alt=""/></a></li>

          <li><a href="#"><img src="data:images/banner02.jpg" alt=""/></a></li>

          <li><a href="#"><img src="data:images/banner03.jpg" alt=""/></a></li>

        </ul>

        <ul class="btnList clearfix">

          <li class="cur"><span></span></li>

          <li><span></span></li>

          <li><span></span></li>

        </ul>

        <span class="pre-nex prev">&lt;</span>

        <span class="pre-nex next">&gt;</span>

      </div>

    </div>

  </div>

</body>

</html>

Css样式如下：

@charset "utf-8";

/* 简单reset */

body,  p,  ul, ol, li {

    margin:;

    padding:;

}

ul, ol {

    list-style: none;

}

img { border:none; }

a,button{ outline: none; }

.clearfix:after {

    visibility: hidden;

    display: block;

    font-size:;

    content: " ";

    clear: both;

    height:;

}

/* 具体样式 */

.banner {

    position: relative;

    height: 400px;

    overflow: hidden;

}

.banner .bannerCon {

    position: absolute;

    top:;

    left: 50%;

    width: 800px;

    height: 400px;

    margin-left: -400px;

    overflow: hidden;

}

.bannerCon .imgList {

    position: absolute;

    top:;

    left:;

    width: 99999px;

    height: 400px;

}

.bannerCon .imgList li {

    float: left;

    width: 800px;

    height: 400px;

}

.bannerCon .imgList li a {

    position: relative;

    display: block;

    height: 100%;

}

.bannerCon .imgList li img {

    width: 800px;

    height: 400px;

}

.bannerCon .pre-nex {

    display: none;

    position: absolute;

    top: 50%;

    width: 40px;

    height: 60px;

    margin-top: -40px;

    font: bold 40px/60px Simsun;

    color: #ccc;

    text-align: center;

    border:none;

    background: rgba(0,0,0,.30);

    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);

    cursor: pointer;

    z-index:;

}

.bannerCon .pre-nex.show { display: inline-block; }

.bannerCon .prev { left: 13%; }

.bannerCon .next { right: 13%; }

.bannerCon .btnList {

    position: absolute;

    left:;

    bottom: 20px;

    width: 100%;

    height: 12px;

    text-align:center;

    z-index:;

    _overflow: hidden;

}

.bannerCon .btnList li { display: inline; }

.bannerCon .btnList li span {

    display: inline-block;

    width: 12px;

    height: 12px;

    margin: 0 5px;

    border-radius: 6px;

    background-color:#14829e;

    cursor: pointer;

}

.bannerCon .btnList li.cur span { background-color: #f30; }

Js代码如下：

//加载在文本读取之后的js语句 开始 =============================================================

    function Scroll(obj,speed,interval){    //父级容器，轮播速度，切换间隔

        $("."+obj).each(function(){

            var $box = $(this),

            $imgUl = $box.children(".imgList"),

            $imgLi = $imgUl.children("li"),

            $btnUl = $box.children(".btnList"),

            $btnLi = $btnUl.children("li"),

            $btnPreNex = $box.children(".pre-nex"),

            $btnPre = $box.children(".prev"),

            $btnNex = $box.children(".next"),

            n = $imgLi.length,

            width = $imgLi.width(),

            left = parseFloat($imgUl.css("left")),

            k = 0,

            Player;

            $imgUl.css("width",n*width);

            function scroll(){                //轮播事件

                $imgUl.stop().animate({left:-width},speed,function(){

                    k += 1;

                    $imgUl.css("left",0);

                    $imgUl.children("li:first").appendTo($(this));

                    $btnLi.removeClass('cur');

                    if(k >= n){

                        k = 0;

                    }

                    $btnUl.children("li").eq(k).addClass('cur');

                });

            }

            $btnLi.click(function(){          //小圆点点击事件

                var index = $btnLi.index(this);

                $(this).addClass('cur').siblings("li").removeClass('cur');

                if(index >= k){

                    var dif = index-k;

                    left = -dif*width;

                    $imgUl.stop().animate({left:left},speed,function(){

                        $imgUl.css("left",0);

                        $imgUl.children("li:lt("+dif+")").appendTo($imgUl);

                    });

                }

                else{

                    var j = n-(k-index);

                    $imgUl.css("left",(index-k)*width);

                    $imgUl.children("li:lt("+j+")").appendTo($imgUl);

                    $imgUl.stop().animate({left:0},speed);

                }

                k = index;

            });

            $btnPreNex.click(function(){      //左右按钮点击事件

                var index = $btnLi.index(this);

                if($(this).hasClass('next')){

                    if(!$imgUl.is(":animated")){

                        k += 1;

                        $imgUl.animate({left:-width},speed,function(){

                            $imgUl.css("left",0);

                            $imgUl.children("li:first").appendTo($(this));

                            if(k >= n){

                                k = 0;

                            }

                            $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');

                        });

                    }

                }

                else {

                    if(!$imgUl.is(":animated")){

                        k += -1;

                        $imgUl.css("left",-width);

                        $imgUl.children("li:last").prependTo($imgUl);

                        $imgUl.stop().animate({left:0},speed);

                        if(k < 0){

                            k = n-1;

                        }

                        $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');

                    }

                }

            });

            $box.hover(                     //鼠标移入、移出事件

                function(){

                    clearInterval(Player);

                    $btnPreNex.addClass('show');

                },

                function(){

                    Player = setInterval(function(){scroll()},interval);

                    $btnPreNex.removeClass('show');

                }

                );

            Player = setInterval(function(){scroll()},interval);

        });

    }

    $(function () {                           //读取轮播事件

        Scroll("bannerCon",600,4000);

    });

注意加载一下jq库，我用的是1.9.1的，其实1.7+的都没问题的。如果觉得对你们有帮助，就给个赞哈~~~

Jquery制作--焦点图左右轮播的更多相关文章

  1. Jquery制作--焦点图淡出淡入

    之前写了一个焦点图左右轮播的,感觉淡出淡入用得也比较多,就干脆一起放上来啦.这个容器用了百分比宽度,图片始终保持居中处理,定宽或者自适应宽度都是可以的. 兼容到IE6+以上浏览器,有淡出淡入速度和切换 ...

  2. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  3. js 滚轮事件 滚轮焦点图（轮播图）

    利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charse ...

  4. JQuery制作基础的无缝轮播与左右点击效果

    在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...

  5. jquery制作一个简单的轮播

    效果图: 演示地址: http://ae6623.cn/demo/slider/index.html 思路: 利用css的定位属性 left 进行调整图片的显示,每次点击上一页下一页按钮的时候,-图片 ...

  6. jquery特效（5）—轮播图③（鼠标悬浮停止轮播）

    今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...

  7. jquery特效（4）—轮播图②（定时自动轮播）

    周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...

  8. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  9. jquery-抖动图组轮播动画

    JQ匀速抖动图组轮播动画 一.HTML+CSS <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

随机推荐

  1. 不装mono，你的.NET程序照样可以在Linux上运行！

    让.NET应用程序在linux上运行,目前通用的做法就是在Linux上安装mono,然后通过”mono your.exe“命令运行这个程序. 这种运行.net程序的办法有两个弱点,一个是需要客户机安装 ...

  2. 实现数据库的跨库join

    功能需求 首先要理解原始需求是什么,为什么要跨库join.举个简单的例子,在日志数据库log_db有一份充值记录表pay_log,里面的用户信息只有一个userid:而用户的详细信息放在主库main_ ...

  3. Java读取xml配置文件

    package test.com; import java.io.FileInputStream; import javax.xml.parsers.DocumentBuilder;import ja ...

  4. [教程]phpwind9.0应用开发基础教程

    这篇文章着重于介绍在9.0中如何开发一个插件应用的示例,step by step来了解下在9.0中一个基础的应用包是如何开发的.1.目录结构OK,首先是目录结构,下面是一个应用我们推荐的目录. 应用包 ...

  5. cocos初认识

    一直知道cocos是做游戏的,想学习一下,结果去官网一看就懵逼了.Cocos Creator,Cocos2d-x,cocos studio,Cocos2d-js,Cocos2d-x-lua,那一种才是 ...

  6. [bzoj3626][LNOI2014]LCA

    Description 给出一个$n$个节点的有根树(编号为$0$到$n-1$,根节点为$0$). 一个点的深度定义为这个节点到根的距离$+1$. 设$dep[i]$表示点$i$的深度,$lca(i, ...

  7. 【POJ-1390】Blocks 区间DP

    Blocks Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 5252   Accepted: 2165 Descriptio ...

  8. 【poj3744】 Scout YYF I

    http://poj.org/problem?id=3744 (题目链接) 题意 给出n个雷,分别在 a[1]...a[n] ,走一步概率为 p ,走两步概率为 1-p ,一开始在 1 号位置,问安全 ...

  9. SpringBoot IntelliJ创建简单的Restful接口

    使用SpringBoot快速建服务,和NodeJS使用express几乎一模一样,主要分为以下: 1.添加和安装依赖  2.添加路由(即接口) 3.对路由事件进行处理 同样坑的地方就是,祖国的防火墙太 ...

  10. linux系统硬件配置查看方法

    一:查看cpu more /proc/cpuinfo | grep "model name" grep "model name" /proc/cpuinfo 如 ...