Jquery制作--焦点图左右轮播

公司项目经常用到轮播焦点图，于是自己写了一个纯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制作--焦点图左右轮播的更多相关文章

Jquery制作--焦点图淡出淡入
之前写了一个焦点图左右轮播的,感觉淡出淡入用得也比较多,就干脆一起放上来啦.这个容器用了百分比宽度,图片始终保持居中处理,定宽或者自适应宽度都是可以的. 兼容到IE6+以上浏览器,有淡出淡入速度和切换 ...
jQuery制作焦点图(轮播图)
焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
js 滚轮事件滚轮焦点图（轮播图）
利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法: <!doctype html> <html> <head> <meta charse ...
JQuery制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果进入正 ...
jquery制作一个简单的轮播
效果图: 演示地址: http://ae6623.cn/demo/slider/index.html 思路: 利用css的定位属性 left 进行调整图片的显示,每次点击上一页下一页按钮的时候,-图片 ...
jquery特效（5）—轮播图③（鼠标悬浮停止轮播）
今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...
jquery特效（4）—轮播图②（定时自动轮播）
周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...
使用JavaScript制作一个好看的轮播图
目录使用JavaScript制作出好看的轮播图效果准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
jquery-抖动图组轮播动画
JQ匀速抖动图组轮播动画一.HTML+CSS <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

随机推荐

angularJS（2）
angularJS(2) 今天先讲一个angularJs的表单绑定实例: <div ng-app="myApp" ng-controller="formCtrl&q ...
EXCEL中对1个单元格中多个数字求和
如A1=3779.3759.3769.3781.3750,A2对A1中4个数字求和怎么求!请高手赐教! 方法一:在B1中输入公式=SUM(MID(A1,{1,6,11,16,21},4)*1) 方法二 ...
MVC+EF6+Oracle，提示ORA-01918: user '***' does not exist
1.在上下文里重载OnModelCreating: //没用到这个方法 protected override void OnModelCreating(DbModelBu ...
linux查看主板型号及内存硬件信息
公司服务器内存不够用了. 想看看买啥型号的. 购买内存条注意点: ddr3 or4 频率块钱. 内存槽及内存条: dmidecode |grep -A16 "Memory Device ...
C语言结构体对齐
1.结构体变量中的元素如何访问? (1)数组中元素的访问方式:表面上有2种方式(数组下标方式和指针方式):实质上都是指针方式访问.(2)结构体变量中的元素访问方式:只有一种,用.或者->的方式来 ...
jquery option
转--jquery动态添加option示例 http://www.jb51.net/article/45031.htm //js动态添加option var sel= document.getElem ...
聊聊 Apache 开源协议
摘要用一句话概括 Apache License 就是,你可以用这代码,但是如果开源你必须保留我写的声明:你可以改我的代码,但是如果开源你必须写清楚你改了哪些:你可以加新的协议要求,但不能与我所公布 ...
YYKit学习系列 ---- 开篇
准备花半年时间系统学习YYKit, 学习过程会放入"YYKit学习系列"这个分类, 喜欢YYKit的可以随时留意我的文章, 一起学习!!!
JS中使用MD5加密
下载 MD5 使用MD5加密的方法:下载md5.js文件,在网页中引用该文件: < script type="text/javascript" src="md5.j ...
定位框一闪而过 iOS Swift
需求:获取经纬度. 方案:我自定义了一个类模块CLLocationModule.swift 备注以下代码里 let IS_IOS8 = (UIDevice.currentDevice().system ...

Jquery制作--焦点图左右轮播

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

随机推荐

热门专题