公司项目经常用到轮播焦点图，于是自己写了一个纯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. 解读ASP.NET 5 & MVC6系列（12）：基于Lamda表达式的强类型Routing实现

    前面的深入理解Routing章节,我们讲到了在MVC中,除了使用默认的ASP.NET 5的路由注册方式,还可以使用基于Attribute的特性(Route和HttpXXX系列方法)来定义.本章,我们将 ...

  2. [LeetCode] Subsets 子集合

    Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be ...

  3. [LeetCode] Count and Say 计数和读法

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...

  4. JAVA的反射理解

    1----------------------------反射的概念----------------------------------------------- JAVA的反射机制是在运行状态中,对 ...

  5. 学券制（教育券、school voucher）

    美国「学券制」是怎样的一种制度?它为什么是共和党的执政政策?它在美国及其它地区有实施吗?效果如何?能否在保证公平的同时,通过市场提高教育质量? 作者:冉筱韬链接:https://www.zhihu.c ...

  6. 【转】fatal error C1900: “P1”(第“20081201”版)和“P2”(第“20080116”版)之间 Il 不匹配

    转自:这里(然而这里并没有写原出处) 背景:今天傻逼逼地想用vs2010来编译一个vs2013的项目,其中这个项目用到了一个库(应该是用2013编译的) 在我浅薄的认知中,以为只是13支持的特性更多, ...

  7. JavaEE学习文章汇总-并发，集群，分布式

    以下文章来自博客 http://blog.csdn.net/FX_SKY/article/category/6203839 其中包括 集群Zookeeper 环境搭建 http://blog.csdn ...

  8. [转]ExtJs入门之filefield：文件上传的配置+结合Ajax完美实现文件上传的asp.net示例

    原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的. ...

  9. zabbix利用api批量添加item，并且批量配置添加graph

    关于zabbix的API见,zabbixAPI 1item批量添加 我是根据我这边的具体情况来做的,本来想在模板里面添加item,但是看了看API不支持,只是支持在host里面添加,所以我先在一个ho ...

  10. Wpf usercontrol dispose

    窗口关闭时组件"析构": public UserControl()        {            InitializeComponent();               ...