基于jQuery slide插件的轮播大图，带标题及简介，附源码

1、首先看效果

2、源码

1)index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<!-- Demo start -->

<!-- css -->

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

<style>

    .ck-slide { width: 1000px; height: 400px; margin: 0 auto;}<!--图片宽高-->

    .ck-slide ul li a img {width: 1000px; height: 400px;}<!--图片宽高-->

    .ck-slidebox-title ul {height:224px;}<!--标题简介高度-->

</style>

<!-- html -->

<div class="ck-slide">

    <ul class="ck-slide-wrapper">

        <li>

            <a href="javascript:"><img src="images/1.jpg" alt=""></a>

        </li>

        <li style="display:none">

            <a href="javascript:"><img src="images/2.jpg" alt=""></a>

        </li>

        <li style="display:none">

            <a href="javascript:"><img src="images/3.jpg" alt=""></a>

        </li>

        <li style="display:none">

            <a href="javascript:"><img src="images/4.jpg" alt=""></a>

        </li>

        <li style="display:none">

            <a href="javascript:"><img src="images/5.jpg" alt=""></a>

        </li>

    </ul>

    <!--<a href="javascript:;" class="ctrl- slide ck-prev">上一张</a> <a href="javascript:;" class="ctrl- slide ck-next">下一张</a>-->

    <!--圆点start-->

 <div class="ck-slidebox">

        <div class="slideWrap">

            <ul class="dot-wrap">

                <li class="current"><em>1</em></li>

                <li><em>2</em></li>

                <li><em>3</em></li>

                <li><em>4</em></li>

                <li><em>5</em></li>

            </ul>

        </div>

    </div>

    <!--圆点end-->

    <!--文字start-->

 <div class="ck-slidebox-title">

        <div class="slideWrap-title">

            <ul class="title-wrap">

                <li>

                    <div class="title">

                        <h3>法巴银行：12月加息概率提升 预计非农增长15万人</h3>

                    </div>

                    <div class="brief">

                        <p>法国巴黎银行(BNP Paribas)周四(11月5日)发布客户报告称，在美联储(Fed)主席耶伦(Janet L. Yellen)偏鹰派声明发布后，12月加息几率已经提升至50%以上。

                            不过，该行指出，市场仍有许多因素需要考虑，例如周五的非农数据。该行预测此次非农数据表现将比较中性，就业人数预计增长15万人，但这并不足以推动美联储12月加息。</p>

                    </div>

                </li>

                <li style="display:none">

                    <div class="title">

                        <h3>近半年地下钱庄涉案金额8000多亿 </h3>

                    </div>

                    <div class="brief">

                        <p> 今年以来跨境资本流动风险加大，其中地下钱庄等非法渠道也成为资本流出的重要渠道。国家外汇管理局管理检查司处长欧阳雄昨日在接受新华社记者采访时表示， 从破获的案件看，地下钱庄涉案金额越来越大，交易手段愈发隐蔽，且日益成为贪腐资金的“洗钱工具”，甚至一些银行人员也当起了“中介”。</p>

                    </div>

                </li>

                <li style="display:none">

                    <div class="title">

                        <h3>商务部回应百货“关店潮” 实体零售重在转型</h3>

                    </div>

                    <div class="brief">

                        <p>商务部昨日召开例行新闻发布会。新闻发言人沈丹阳在回应媒体关于传统百货会否出现“关门潮”的担忧时表示，伴随网络零售的高速增长，实体零售经营压力加大，“关闭退租”现象有所增加。对实体零售企业，商务部将继续积极支持、引导其创新、转型发展。</p>

                    </div>

                </li>

                <li style="display:none">

                    <div class="title">

                        <h3>钢铁行业困难重重 钢价“熊市不言底”</h3>

                    </div>

                    <div class="brief">

                        <p>我国钢铁行业进入“严冬”的观点已经被市场认同，后期过剩产能将进一步被淘汰。在这个过程中，上游行业将受到波及，黑色系商品价格将一路下跌。</p>

                    </div>

                </li>

                <li style="display:none">

                    <div class="title">

                        <h3>金博会闭幕 金融机构拼创新</h3>

                    </div>

                    <div class="brief">

                        <p>中国银行北京市分行的展台正通过裸眼3D、全息影像等高科技手段展示着“中行信用卡发卡30周年”、出国金融、助力民生等系列活动，前来咨询办理业务的观众络绎不绝。

                            农行北京分行作为第十一届北京国际金融博览会重要参展单位，此次金博会展出期间，该行围绕“互联网+农业银行”、“小农的幸福生活”、“京津冀协同发展”等贴近民生福祉的主题进行展示。 </p>

                    </div>

                </li>

            </ul>

        </div>

    </div>

    <!--文字end-->

</div>

<!-- html end -->

<!-- js -->

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

<!--<script src="js/slide.min.js"></script>-->

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

<script>

    $(‘.ck-slide‘).ckSlide({

        autoPlay: true,//默认为不自动播放，需要时请以此设置

 dir: ‘x‘,//默认效果淡隐淡出，x为水平移动，y 为垂直滚动

 interval:3000//默认间隔2000毫秒

 });

</script>

<!-- Demo end -->

</body>

</html>

2) slide.js

(function($){

    $.fn.ckSlide = function(opts){

      //.extend() 扩展jQuery类，添加ckSlide方法，参数是对象类型{}

        opts = $.extend({}, $.fn.ckSlide.opts, opts);

        this.each(function(){

            var slidewrap = $(this).find(‘.ck-slide-wrapper‘);//轮播元素父对象

            var slide = slidewrap.find(‘li‘);//获取<li>对象集

            var count = slide.length;//计算对象集长度

            var that = this;//存放父对象

            var index = 0;//起始位置

            var time = null;

            $(this).data(‘opts‘, opts);//给轮播对象添加参数 数据

            // next

            $(this).find(‘.ck-next‘).on(‘click‘, function(){

                if(opts[‘isAnimate‘] == true){

                    return;

                }

                

                var old = index;

                if(index >= count - 1){

                    index = 0;

                }else{

                    index++;

                }

                change.call(that, index, old);//调用图片切换方法，.call() 每个JS函数都包含的一个非继承而来的方法，主要用来指定函数的作用域 that ，通常不严谨写法是change()，有可能会函数冲突。

            });

            // prev

            $(this).find(‘.ck-prev‘).on(‘click‘, function(){

                if(opts[‘isAnimate‘] == true){

                    return;

                }

                

                var old = index;

                if(index <= 0){

                    index = count - 1;

                }else{                                      

                    index--;

                }

                change.call(that, index, old);

            });

         //点击切换相应序号的图片

            $(this).find(‘.ck-slidebox li‘).each(function(cindex){

                $(this).on(‘click.slidebox‘, function(){

                    change.call(that, cindex, index);

                    index = cindex;

                });

            });

         //自己添加——鼠标移入小圆点切换轮播图片

         $(this).find(‘.ck-slidebox li‘).each(function(cindex){

                $(this).on(‘mouseover.slidebox‘, function(){

                    change.call(that, cindex, index);

                    index = cindex;

                });

            });

            

            // 鼠标悬停停止自动播放，显示左右切换按钮

            $(this).on(‘mouseover‘, function(){

                if(opts.autoPlay){

                    clearInterval(time);

                }

                $(this).find(‘.ctrl-slide‘).css({opacity:0.6});

            });

            //  鼠标离开轮播界面，开始自动播放，同时隐藏按钮

            $(this).on(‘mouseleave‘, function(){

                if(opts.autoPlay){

                    startAtuoPlay(opts.interval);

                }

                $(this).find(‘.ctrl-slide‘).css({opacity:0.1});

            });

            startAtuoPlay(opts.interval);

            // 自动滚动播放

            function startAtuoPlay(inum){

                if(opts.autoPlay){

                    time  = setInterval(function(){

                        var old = index;

                        if(index >= count - 1){

                            index = 0;

                        }else{

                            index++;

                        }

                        change.call(that, index, old);

                    }, inum);//2秒

                }

            }

            // 修正box  标记居中

            var box = $(this).find(‘.ck-slidebox‘);

            box.css({

                ‘margin-left‘:-(box.width() / 2)

            })

            // dir  移动方向参数

            switch(opts.dir){

                case "x":

                    opts[‘width‘] = $(this).width();

                    slidewrap.css({

                        ‘width‘:count * opts[‘width‘]

                    });

                    slide.css({

                        ‘float‘:‘left‘,

                        ‘position‘:‘relative‘,

                  ‘margin-left‘:‘0px‘

                    });

               //.wrap()包裹页面已经定义的.ck-slide-wrapper以及子元素

                    slidewrap.wrap(‘<div class="ck-slide-dir"></div>‘);

                    slide.show();

                    break;

            case "y":  //添加垂直移动参数

                    opts[‘height‘] = $(this).height();

                    slidewrap.css({

                        ‘height‘:count * opts[‘height‘]

                    });

                    slide.css({

                        ‘float‘:‘left‘,

                        ‘position‘:‘relative‘,

                  ‘margin-top‘:‘0px‘

                    });

                    slidewrap.wrap(‘<div class="ck-slide-dir"></div>‘);

                    slide.show();

                break;

            }

        });

    };

    function change(show, hide){

      //获取之前设置在ckSlide对象上的参数 数据

        var opts = $(this).data(‘opts‘);

      //水平移动

        if(opts.dir == ‘x‘){

            var x = show * opts[‘width‘];

         //animate() 与css()执行结果相同，但是过程不同，前者有渐变动画效果

            $(this).find(‘.ck-slide-wrapper‘).stop().animate({‘margin-left‘:-x}, function(){opts[‘isAnimate‘] = false;});

            opts[‘isAnimate‘] = true;//图片在移动过程中设置按钮点击不可用，确保每一次轮播视觉上执行完成，

        }else if(opts.dir == ‘y‘){//垂直移动——自己添加

            var y = show * opts[‘height‘];

            $(this).find(‘.ck-slide-wrapper‘).stop().animate({‘margin-top‘:-y}, function(){opts[‘isAnimate‘] = false;});

            opts[‘isAnimate‘] = true;

        }

      else{

         //默认的淡隐淡出效果

            $(this).find(‘.ck-slide-wrapper li‘).eq(hide).stop().animate({opacity:0});

            $(this).find(‘.ck-slide-wrapper li‘).eq(show).show().css({opacity:0}).stop().animate({opacity:1});

        }

       //切换对应标记的颜色

        $(this).find(‘.ck-slidebox li‘).removeClass(‘current‘);

        $(this).find(‘.ck-slidebox li‘).eq(show).addClass(‘current‘);

        //切换title块

        $(this).find(‘.ck-slidebox-title li‘).eq(hide).stop().animate({opacity:0},‘fast‘).hide();

        $(this).find(‘.ck-slidebox-title li‘).eq(show).show().css({opacity:0}).stop().animate({opacity:1},‘slow‘);

    }

    $.fn.ckSlide.opts = {

      autoPlay: false,//默认不自动播放

        dir: null,//默认淡隐淡出效果

        isAnimate: false,//默认按钮可用

      interval:2000//默认自动2秒切换 

       };

})(jQuery);

3) slide.css

.ck-slide img {

   border: 0;

}

.ck-slide ul {

   margin: 0;

   padding: 0;

   list-style-type: none;

}

.ck-slide {

   position: relative;

   overflow: hidden;

}

.ck-slide ul.ck-slide-wrapper {

   position: absolute;

   top: 0;

   left: 0;

   z-index: 1;

   margin: 0;

   padding: 0;

}

.ck-slide ul.ck-slide-wrapper li {

   position: absolute; margin-top:0px;

}

.ck-slide ul.ck-slide-wrapper li a{

   /*a标签是行内元素，宽高对a标签不起作用，这里必须添加line-height:0px;display:black，否则垂直滚动<li>之间会出现间隔*/

   line-height:0px;

   display:block;

}

.ck-slide .ck-prev, .ck-slide .ck-next {

   position: absolute;

   top: 50%;

   z-index: 2;

   width: 35px;

   height: 70px;

   margin-top: -35px;

   border-radius: 3px;

   opacity: .15;

   background: red;

   text-indent: -9999px;

   background-repeat: no-repeat;

   transition: opacity .2s linear 0s;

}

.ck-slide .ck-prev {

   left: 5px;

   background: url(../images/arrow-left.png) #000 50% no-repeat;

}

.ck-slide .ck-next {

   right: 5px;

   background: url(../images/arrow-right.png) #000 50% no-repeat;

}

.ck-slidebox {

   position: absolute;

   left: 30%;

   bottom: 12px;

   z-index: 30;

}

.ck-slidebox ul {

   height: 20px;

   padding: 0 4px;

   border-radius: 8px;

   background: rgba(0,0,0,0.5);

}

.ck-slidebox ul li {

   float: left;

   height: 12px;

   margin: 4px 4px;

}

.ck-slidebox ul li em {

   display: block;

   width: 12px;

   height: 12px;

   border-radius: 100%;

   background-color: #fff;

   text-indent: -9999px;

   cursor: pointer;

}

.ck-slidebox ul li.current em {

   background-color: #fe6500;

}

.ck-slidebox ul li em:hover {

   background-color: #fe6500;

}

.ck-slidebox-title {

   position: absolute;

   left: 50%;

   bottom: 0px;

   z-index: 30;

}

.ck-slidebox-title ul {

   height: 260px;

   padding: 0;

   background: rgba(0,0,0,0.3);

   color:white;

}

.ck-slidebox-title ul li{

}

.ck-slidebox-title ul li div.title{

   background: rgba(0,0,0,0.5);

   padding:15px 30px;

}

.ck-slidebox-title ul li div.title h3{

   margin:0 auto;

}

.ck-slidebox-title ul li div.brief{

   padding:5px 30px;

}

.ck-slidebox-title ul li div.brief p{

   text-indent: 2em;

}

转自：哈喽吕小强的技术博 - http://www.lvhongqiang.com/blog421.html

时间： 2024-10-12 22:36:14

基于jQuery slide插件的轮播大图，带标题及简介，附源码的相关文章

基于jQuery实现左右图片轮播（原理通用）

基于jQuery实现左右图片轮播(原理通用), 本文为大家分享了jQuery实现左右图片轮播代码,供大家参考,具体实现内容如下 运行效果图: 重点!!! 实现原理: 通过判断index值的大小变化来判断图片左移还是右移.通过控制图片的left值,来达到一个轮播的效果. 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

Jquery制作插件---渐隐轮播

//需求:打开网页时,每秒钟自动切换下一张图片内容.也可以用鼠标点导航按钮进行图片切换 //代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.

基于jquery的web前端十款不同应用的预览及源码

1.网页变灰(css+js),兼容IE7-10.FF.Chrome.Opera 当天很多媒体已停止一些娱乐活动,部分网站也将主题或logo变成了灰色.那么怎样把网页上的图片或文字都变成灰色呢? 在线演示 源码下载 2.Javascript制作的网页侧边弹出框 今天制作了个网页侧边弹出框,可用于制作分享按钮.在线客服.留言框等,这些效果原理都是一样的,它们可以紧贴浏览器的上.下.左.右四个边栏,以下这个例子就提供了四个样式,展示了紧贴不同的边栏所展示出的效果. 在线演示 源码下载 3.制作的一款登

Google Spreadsheet Add-on Links Extractor 谷歌表格插件链接提取器的制作与发布（附源码）

引言 为什么想到制作这么一个插件呢,是因为博主在更新微信公众号[刷尽天下]的后台数据库时,需要有博客园题目帖子的链接,那么就要从这篇帖子 LeetCode All in One 题目讲解汇总(持续更新中...) 中提取各个题目的链接.之前博主都是使用的都是Excel的插件 Kutools 来完成的,但是这个插件不是免费的,而且只能在 Windows 下使用,对于博主这样的 Mac 控来说,十分的不方便.想着 Mac 下应该也有类似的插件吧,结果搜了半天,没搜到合适的.突然灵机一动,对啊,为何不去

基于jquery的简单图片轮播----banner

主要用到的几个JQUERY函数: li:nth-child(2)  第二张图的意思: attr() 方法设置或返回被选元素的属性值. setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. 先说下实现的机制: 首先是一个大盒子,里面三张图片,然后显示的只是其他三分之一中间的位置,其他部分是被隐藏的,通过animate方法,从隐藏的地方把其他的拉出来 这段代码的核心就下面这句话了: oUl.stop(true).animate({"left":-countw

基于JQuery实现的幻灯片轮播（对时间间隔做严格控制）

<div class="tel_slide"> <div class="tel_slide_title">Title</div> <div class="slidebtn" id="left" ><!--左按钮--> <img alt="" src="images/left.png"> </div> &l

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE html><html>

jquery全屏背景轮播切换的登录页

很大气漂亮的注册登录页面模板,带背景全屏轮播JS特效,基于jQuery实现,可左右按钮实现背景全屏切换,全屏效果是基于背景图片平铺,插件支持自动切换播放. 演示    下载 <!DOCTYPE html> <html> <head> <title>jquery带全屏背景图片轮播切换的注册登录页面-素材吧</title> <meta name="keywords" content="jQuery背景全屏轮播,JS

jQuery图片插件自动轮播原理解析

经常看到项目要用到图片轮播效果,一般的操作流程都是先到网上找一个好看的JQuery图片轮播插件,然后看下demo,再配下参数.好了,关机下班回家 其余的就交给插件吧. 是不是感觉有了jQuery,世界变得那么美好呢. 本人最近用的一个插件是 jquery.carousel.js,官方网站是:http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin 下面,我们来讨论一下图片轮播原理. 首先来个简单的demo 效果图如下: 这是个导