jQuery图片轮播特效

最新推荐文章于 2022-09-18 15:54:54 发布

bcbobo21cn

最新推荐文章于 2022-09-18 15:54:54 发布

阅读量1.3k

点赞数

分类专栏：原创教程 .Net 文章标签： jquery css javascript 图片轮播

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/48024383

版权

.Net 同时被 2 个专栏收录

381 篇文章 14 订阅

订阅专栏

原创教程

190 篇文章 6 订阅

订阅专栏

图图：

码码：

    <body>
        <div class="head">
            <div class="head_inner clearfix">
                <ul id="nav">
                    
                </ul>
                
            </div>
        </div>
        <div id="scroll_area" class="imgfocus">
            <div id="bigimg_area" class="imgbox">
                <div class="bigimg">
                    <a href="">
                        <img src="images/1.jpg"/>
                    </a>
                </div>
                <div class="bigimg">
                    <a href="">
                        <img src="images/2.jpg"/>
                    </a>
                </div>
                <div class="bigimg">
                    <a href="">
                        <img src="images/3.jpg"/>
                    </a>
                </div>
                <div class="bigimg">
                    <a href="">
                        <img src="images/4.jpg"/>
                    </a>
                </div>
            </div>
            <ul id="tabs" class="num_a2">
                <li><a href="javascript:void(0)" hidefocus="true" target="_self">杨幂</a></li>
                <li><a href="javascript:void(0)" hidefocus="true" target="_self">范冰冰</a></li>
                <li><a href="javascript:void(0)" hidefocus="true" target="_self">高圆圆</a></li>
                <li><a href="javascript:void(0)" hidefocus="true" target="_self">刘诗诗</a></li>
            </ul>
        </div>
        <div class="foot">
           
        </div>
    </body>

       <script type="text/javascript" src="js/koala.min.1.5.js"></script>
            <script type="text/javascript">
                Qfast.add('widgets', {path: "js/terminator2.2.min.js", type: "js", requires: ['fx']});
                Qfast(false, 'widgets', function() {
                    K.tabs({
                        id: 'scroll_area', //焦点图包裹id  
                        conId: "bigimg_area", //大图域包裹id  
                        tabId: "tabs", //小圆点数字提示id
                        tabTn: "a",
                        conCn: '.bigimg', //大图域配置class       
                        auto: 1, //自动播放 1或0
                        effect: 'fade', //效果配置
                        eType: 'mouseover', // 鼠标事件
                        pageBt: true, //是否有按钮切换页码
                        bns: ['.prev', '.next'], //前后按钮配置class                          
                        interval: 3000// 停顿时间  
                    })
                })
            </script>

代码说明：

首先定义div，其id为scroll_area，css类为imgfocus
再在其中定义div，id为bigimg_area，css类为imgbox
在其中定义div，css类为bigimg；
在其中包含a链接，a链接中包含img元素，img中包含要轮播的图片；

定义ul li 列表，css类为num_a2; 各个li项中的文字为对应图片说明；

引入jquery.js，koala.min.1.5.js
在js中设置焦点图包裹的div的id为第一个定义的div，即scroll_area;
和大图域包裹id；
设置自动播放；
设置效果为fade；
设置是否有按钮切换页码；
以及播放的时间间隔等；

.imgfocus{position:relative;width:1000px;height:390px;background:#F1F1F1;margin:40px auto 0 auto;}
在imgfocus类中设置：
宽度1000；高度390；背景色；
相对定位，参照父级的原始点为原始点；
外边距：上-40，下-0，右、左-自动；

说明：资源为网上下载；本文图片所示代码，（兔兔），由鄙人实现；代码说明为鄙人所写；