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 相关文章推荐
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
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-MySQL教程归纳总结
2008/06/07 PHP
PHP操作数组相关函数
2011/02/03 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
php使用session二维数组实例
2014/11/06 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python conda操作方法
2019/09/11 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
NULL是什么,它是怎么定义的
2015/05/09 面试题
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
两道JAVA笔试题
2016/09/14 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
校园广播稿精选
2014/10/01 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python