Jquery图片滚动与幻灯片的实例代码


Posted in Javascript onApril 08, 2013

1、图片滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
 $(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></div>");    //添加一个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);
    });
} 
    </script>
    <style type="text/css">
        * { 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; }
    </style>
</head>
<body>
    <div class="a">
        <ul>
            <li><a href="#">
                <img src="Wife1.jpg" alt="img" title="img" /></a></li>
            <li><a href="#">
                <img src="Wife2.jpg" alt="img" title="img" /></a></li>
        </ul>
    </div>
</body>
</html>

2、幻灯片

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>幻灯片切换</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
$(document).ready(function () {
    slide(".frame");      //----------------------只需要修改   ”.frame"  (就是最大的div的class值这里就行---------------------
});
 
function slide(cls) {
 $(cls).find("ul").wrap("<div></div>");
 $(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 = "<ul class='button'>";//生成li的按钮
    for (var i = 0; i < li; i++) {
        s += "<li>" + (i + 1) + "</li>";
    }
    s += "</ul>";
    $(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);
    })
}
    </script>
    <style type="text/css">
        * { 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; }
    </style>
</head>
<body>
 <!-- 这里要按照这样的格式来写 -->
    <div class="frame">
            <ul>
                <li><a href="#">
                    <img src="Wife1.jpg" width="280" height="280" alt="img" /></a></li>
                <li><a href="#">
                    <img src="Wife2.jpg" width="280" height="280" alt="img" /></a></li>
                <li><a href="#">
                    <img src="Wife3.jpg" width="280" height="280" alt="img" /></a></li>
                <li><a href="#">
                    <img src="Wife4.jpg" width="280" height="280" alt="img" /></a></li>
                <li><a href="#">
                    <img src="Wife5.jpg" width="280" height="280" alt="img" /></a></li>
            </ul>
    </div>
</body>
</html>
Javascript 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
简单的分页代码js实现
May 17 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 #Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 #Javascript
JS继承--原型链继承和类式继承
Apr 08 #Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 #Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 #Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 #Javascript
javascript中常用编程知识
Apr 08 #Javascript
You might like
Protoss兵种对照表
2020/03/14 星际争霸
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
通过实例解析python描述符原理作用
2020/01/22 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
家长评语和期望
2014/02/10 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
交通事故协议书范本
2014/11/18 职场文书
工作证明书
2015/06/15 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript