公司项目经常用到轮播焦点图，于是自己写了一个纯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. 【repost】js 常见错误类型

    1)SyntaxError SyntaxError是解析代码时发生的语法错误 // 变量名错误  var 1a;  // 缺少括号  console.log 'hello'); (2)Referenc ...

  2. 《----css样式---------浮动带来的影响与解决方法---------------》

    浮动就是让我们的元素脱离标准文档流,目的是为了布局好看! 浮动的现象: 脱离标准文档流被叫做脱流,同时会出现字围现象. 浮动的元素会相互贴靠,而且如果父容器空间足够大,则浮动的元素会正常紧靠也就是后一 ...

  3. [LeetCode] Text Justification 文本左右对齐

    Given an array of words and a length L, format the text such that each line has exactly L characters ...

  4. JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  5. Linux用户管理（centos）

    useradd testuser; 添加用户 testuser为用户名 passwd testuser; 修改用户密码 提示两次输入密码   赋予root权限 修改 /etc/sudoers 文件,找 ...

  6. MVC其实很简单(Django框架)

    Django框架MVC其实很简单 让我们来研究一个简单的例子,通过该实例,你可以分辨出,通过Web框架来实现的功能与之前的方式有何不同. 下面就是通过使用Django来完成以上功能的例子: 首先,我们 ...

  7. ES6深入学习记录(一)class方法相关

    今天学习class相关的一些使用方法,着重在于class extends class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多. 上面的代码定义了一 ...

  8. java第三周学习

    这一周学习的是java数组面向对象 数组中存放的数据的类型:既可以是基本数据类型也可以是引用数据类型. 数组的定义方式: 1 数据类型[] 数组名; 2 数据类型 数组名[]; 数组的初始化: 1.静 ...

  9. pdo in 查询

    $ids1 = implode(",",$upload_ids);if(!empty($upload_ids)){ $ids_db= pdo_fetchall('select id ...

  10. 【原】webp图片牛刀小试

    其实今年很早就有接触到webp图片的概念,只是一直没怎么弄.今天在一个小项目中小用了一番.总结总结 采用 what,why,how的方式来总结 what? 什么是webp图片? 维基百科:       ...