当前位置:  编程技术>jquery

Jquery图片滚动与幻灯片效果的代码

    来源: 互联网  发布时间:2014-09-03

    本文导语:  本节主要内容: Jquery图片滚动与幻灯片的实现代码 例1、图片滚动   代码示例:     Jquery图片滚动 - www.          $(document).ready(function () {     Xhun(".a");      //--只需要修改   ”.a"  (就是最大的div的class值这...

本节主要内容:
Jquery图片滚动与幻灯片的实现代码

例1、图片滚动
 

代码示例:




    Jquery图片滚动 - www.
   
   
 $(document).ready(function () {
    Xhun(".a");      //--只需要修改   ”.a"  (就是最大的div的class值这里就行--
});
function Xhun(_box) {
    var box_frame = _box + " div ul";
    var box_div = _box + " div";
    $(_box).find("ul").wrap("

");    //添加一个div,来控制偏移量
    $(box_div).append($(box_frame).clone());   //克隆一个ul并添加到div中,为了实现无缝循环
 $(box_div).append($(box_frame).clone());   //克隆一个ul并添加到div中,为了实现无缝循环
    var li_size = $(_box).find("li").size();   //获取li的个数
    var li_width = $(box_frame).children("li").width();  //获取li的宽度
    var box_div_width = $(box_div).width(li_size * li_width * 5);  //设置div的宽度
    $(box_frame).css("float", "left");
 
    var dd = setInterval(gd, 30);
    function gd() {
        var position = $(_box).scrollLeft();     //scrollLeft()是获取对象的水平偏移量
        $(_box).scrollLeft(position + 1);
        if (position >= $(box_frame).width()) { $(_box).scrollLeft(0); }  //判断位移是否大于ul的总长度
    }
    $(_box).mouseleave(function () {
        dd = setInterval(gd, 30);
    }).mouseenter(function () {
        clearInterval(dd);
    });
}
   

   
        * { margin: 0; padding: 0; }
        ul { list-style: none; }
        li { float: left; margin-left: 10px; width: 100px; }
        img { width: 100px; height: 100px; }
        .a { width: 400px; margin: 0 auto; overflow: hidden; height: 100px; }
   


   


       
   


例2、幻灯片切换效果
 

代码示例:



   
    幻灯片切换 - www.
   
   
$(document).ready(function () {
    slide(".frame");      //--只需要修改   ”.frame"  (就是最大的div的class值这里就行--
});
 
function slide(cls) {
 $(cls).find("ul").wrap("
");
 $(cls+" div").attr("class","iframe");
    var li = $(cls).find("li").size();//统计多少张图片
    var li_width = $(cls).find("li").width(); //获取li的宽度
    $(cls + " div").children("ul").width(li_width * li);//设置宽度,使图片排成一排
    var s = "
    ";//生成li的按钮
        for (var i = 0; i < li; i++) {
            s += "
  • " + (i + 1) + "
  • ";
        }
        s += "
";
    $(s).appendTo($(cls));//生成按钮结束,并添加到最大div里面
    var _i = 0;//当前的编号
    $(cls).find(".button li").each(function (i) {
        //生成按钮点击事件
        $(this).click(function () {
            _i = i;
            $(this).attr("class", "on").siblings().removeAttr("class");//设置class,没必要再多加一个off
            $(cls + " div").animate({ scrollLeft: i * li_width }, "slow");//图片移动
        });
    }).eq(0).click();
    function tt() {//定时器函数
        _i++;
        _i = _i % li;
        $(cls).find(".button li").eq(_i).click();//自动点击切换图片
    }
    var t = setInterval(tt, 3000);//定时器
    $(cls).hover(function () {
        clearInterval(t);//鼠标经过清除定时器,离开时又触发
    }, function () {
        t = setInterval(tt, 3000);
    })
}
   
   
        * { margin: 0; padding: 0; }
        li, ul { list-style: none; margin: 0; padding: 0; }
        .frame { width: 280px; height: 280px; position: relative; margin: 0 auto; }  /*这里需要修改最大div的宽度和高度*/
        .iframe { overflow: hidden; width: 280px; height: 280px; }                  /*这里需要修改该div的宽度和高度*/
            .iframe ul li { float: left; width: 280px; }                            /*这里需要修改li的宽度*/
        .button { position: absolute; bottom: 15px; right: 15px; z-index: 300; }
            .button li { float: left; cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; border-radius: 7px; color: #fff; background: #000; }
            .button .on { color: #000; background: #fff; }
   


 
   

           
   



 

>>>查看更多Jquery 教程


    
 
 

您可能感兴趣的文章:

  • jQuery无限幻灯片插件 jQuery Carousel
  • jQuery幻灯片插件 jQuery slick
  • jQuery定时幻灯片插件 Timeliner
  • jQuery幻灯片插件 Skitter
  • jQuery的效果集工具包 Glimmer iis7站长之家
  • jQuery 幻灯片效果插件 plusview
  • jQuery 的幻灯片插件 skippr
  • jQuery幻灯片插件 allinone
  • jQuery幻灯片放映插件 CrossSlide
  • jQuery图片滑动幻灯片插件 Orbit
  • jQuery幻灯片插件 SlidesJS
  • jQuery相册幻灯片插件 Slider Kit
  • jQuery幻灯片播放 Slideshow2!
  • jQuery 幻灯片插件 Blindify
  • jQuery多功能幻灯片插件 Kslider
  • jQuery幻灯片插件 jslide
  • jQuery 幻灯片插件 Flickerplate
  • jquery幻灯片效果的插件一例
  • jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
  • jQuery的幻灯插件 jQuery Sequence
  • jQuery幻灯展示插件 jQuery.slideBanjo
  • jQuery图片幻灯手风琴效果插件 Slidorion
  • jQuery 幻灯效果显示插件 Diapo
  • jquery 图片幻灯轮换效果的代码一例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery滚动效果插件 jQuery.SerialScroll
  • jQuery照明效果插件 jQuery Photon
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery盖章效果插件 jquery.stamper
  • jQuery卷页效果 jQuery Page Peel
  • 链接渐变效果 jQuery glow
  • jQuery的效果集工具包 Glimmer
  • jQuery Lightbox效果插件 Boxer
  • jQuery滚动延迟效果插件 AnimateScroll
  • jQuery电梯式滚动效果插件 Ascensor
  • jQuery 页面动画效果 Animsition
  • jQuery图片效果切换 Adipoli
  • jQuery文本效果插件 Textualizer
  • jQuery在iPhone/iPad的滚动效果处理 Overscroll
  • jQuery轮盘效果插件 Roundabout
  • jQuery淡入淡出效果 InnerFade
  • jQuery图片缩放效果 FancyZoom
  • jQuery滚动效果插件 Waypoints
  • jQuery 翻书效果插件 BookBlock
  • 图片轮播效果 jquery.ajaximg
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3