首页 > web前端 > js教程 > jQuery图片轮播的具体实现_jquery

jQuery图片轮播的具体实现_jquery

WBOY
发布: 2016-05-16 17:22:48
原创
971 人浏览过

效果如下:

jQuery图片轮播的具体实现_jquery

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

复制代码代码如下:

   
           

  •        

  •        

  •        
  • jQuery图片轮播的具体实现_jquery

  •        
  • jQuery图片轮播的具体实现_jquery ;

  •    

   
           
  • 1

  •        
           
    li>2
           
  •        
  • 4

  •        
  • 5

  •    

复制代码
代码如下:


#scrollPics{
    高度:150px;
    宽度:100%;
    边距底部:10px;
    溢出:隐藏;
    位置:相对;
}
.num{
    位置:绝对;
    右:5px;
    底部:5px;
}
#scrollPics .num li{
    浮动:左;
    颜色:#FF7300;
    文本对齐:居中;
    行高: 16px;
    宽度: 16px;
    高度: 16px;
    光标: 指针;
    溢出: 隐藏;
    边距: 3px 1px;
    边框: 1px 实线 #FF7300;
    背景颜色:#fff;
}
#scrollPics .num li.on{
    颜色:#fff;
    行高:21px;
    宽度:21px;
    高度:21 像素;
    字体大小:16 像素;
    边距:0 1 像素;
    边框:0;
    背景颜色:#FF7300;
    字体粗细:粗体;
}

用绝对定位设置列表 num 个的位置,对 li 设置相关样式,上表示显示图片的数字列表中 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");
    }

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板