公司项目经常用到轮播焦点图，于是自己写了一个纯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. 使用ANTS Performance Profiler&ANTS Memory Profiler工具分析IIS进程内存和CPU占用过高问题

    一.前言 最近一段时间,网站经常出现两个问题: 1.内存占用率一点点增高,直到将服务器内存占满. 2.访问某个页面时,页面响应过慢,CPU居高不下. 初步判断内存一点点增多可能是因为有未释放的资源一直 ...

  2. 记一次企业级爬虫系统升级改造（二）：基于AngleSharp实现的抓取服务

    爬虫系统升级改造正式启动: 在第一篇文章,博主主要介绍了本次改造的爬虫系统的业务背景与全局规划构思: 未来Support云系统,不仅仅是爬虫系统,是集爬取数据.数据建模处理统计分析.支持全文检索资源库 ...

  3. JavaScript OOP 之「创建对象」

    工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程.工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题. function createPers ...

  4. ServerSocket的介绍

    导语 仅仅只有Socket类是不足以编写服务器的.要创建一个Socket,你需要知道希望连接哪个Internet主机.编写服务器程序时,无法预先了解哪个主机会联系你,即使确实知道,你也不清楚那个主机希 ...

  5. 【WPF】 通过FarPoint显示Excel

    1.FarPoint 只支持winform,在Wpf中要引用:WindowsFormsIntegration.dll2.*.xaml文件引用    xmlns:wfi ="clr-names ...

  6. 滑动验证的设计与实现J2EE

    滑动验证的设计与实现J2EE 注:本博文为博主原创,转载请注明出处. 项目源码地址:https://github.com/zhangxy1035/Verify 本篇博文的主要目录如下: 一.项目简介二 ...

  7. DedeCMS使用方法----如何将网站上传到服务器

    我们如果在本地已经把网站做好了,上传到服务器上去的正确姿势是什么样的呢?简单的很~跟着我的步调来~ 方法一(推荐此方法): 1.把你本地所有的文件压缩,上传至服务器上的根目录,再解压. 2.把本地的数 ...

  8. Qt界面编程之多窗口切换

    1.基础知识 信号和槽 信号和槽都是函数,用来完成信号间的协同操作 2.多窗口切换实例       功能 实现登录和重新登录功能 组成 登录界面 和主窗体界面 3.源代码提供  

  9. Linux--Tail命令

    inux tail命令用途是依照要求将指定的文件的最后部分输出到标准设备,通常是终端,通俗讲来,就是把某个档案文件的最后几行显示到终端上,假设该档案有更新,tail会自己主动刷新,确保你看到最新的档案 ...

  10. Table 表单样式

    <style> table th { white-space: nowrap; background-color: #f5f5f5; height:30px; font-size:14px ...