jQuery图片轮播的具体实现


Posted in Javascript onSeptember 11, 2013

效果如下:

jQuery图片轮播的具体实现

先看一看html代码,以及对应的css代码:

<div id="scrollPics">
    <ul class="slider" >
        <li><img src="images/ads/1.gif"/></li>
        <li><img src="images/ads/2.gif"/></li>
        <li><img src="images/ads/3.gif"/></li>
        <li><img src="images/ads/4.gif"/></li>
        <li><img src="images/ads/5.gif"/></li>
    </ul>
    <ul class="num" >
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

#scrollPics{
    height: 150px;
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
    position:relative;
}
.num{
    position:absolute;
    right:5px; 
    bottom:5px;
}
#scrollPics .num li{
    float: left;
    color: #FF7300;
    text-align: center;
    line-height: 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    overflow: hidden;
    margin: 3px 1px;
    border: 1px solid #FF7300;
    background-color: #fff;
}
#scrollPics .num li.on{
    color: #fff;
    line-height: 21px;
    width: 21px;
    height: 21px;
    font-size: 16px;
    margin: 0 1px;
    border: 0;
    background-color: #FF7300;
    font-weight: bold;
}

用绝对定位设置列表 num 的位置,对 li 设置相关样式,on 表示显示图片对应的数字列表中 li 的样式类别。

接下来是 js 代码:

//滚动广告
    var len = $(".num > li").length;
    var index = 0;  //图片序号
    var adTimer;
    $(".num li").mouseover(function() {
        index = $(".num li").index(this);  //获取鼠标悬浮 li 的index
        showImg(index);
    }).eq(0).mouseover();
    //滑入停止动画,滑出开始动画.
    $('#scrollPics').hover(function() {
        clearInterval(adTimer);
    }, function() {
        adTimer = setInterval(function() {
            showImg(index)
            index++;
            if (index == len) {       //最后一张图片之后,转到第一张
                index = 0;
            }
        }, 3000);
    }).trigger("mouseleave");
    function showImg(index) {
        var adHeight = $("#scrollPics>ul>li:first").height();
        $(".slider").stop(true, false).animate({
            "marginTop": -adHeight * index + "px"    //改变 marginTop 属性的值达到轮播的效果
        }, 1000);
        $(".num li").removeClass("on")
            .eq(index).addClass("on");
    }
Javascript 相关文章推荐
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 #Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 #Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 #Javascript
jquery获取子节点和父节点的示例代码
Sep 10 #Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 #Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 #Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 #Javascript
You might like
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
浅谈javascript的闭包
2017/01/23 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python实现复制大量文件功能
2019/08/31 Python
python else语句在循环中的运用详解
2020/07/06 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
自主招生自荐信范文
2013/12/04 职场文书
专升本个人自我评价
2013/12/22 职场文书
厨师长岗位职责
2014/03/02 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
销售人员管理制度
2015/08/06 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书