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实现图片轮换效果代码
Apr 16 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
js利用拖放实现添加删除
Aug 27 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学习笔记之php文件操作
2016/06/03 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
jQuery事件对象总结
2016/10/17 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
学生出入校管理制度
2014/01/16 职场文书
幼儿园评语大全
2014/04/17 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
如何写通讯稿
2015/07/22 职场文书
亲情作文之母爱
2019/09/25 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
使用Python拟合函数曲线
2022/04/14 Python
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers