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 相关文章推荐
jQuery 无刷新分页实例代码
Nov 12 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
Javascript高级技巧分享
Feb 25 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
vuex的module模块用法示例
Nov 12 Javascript
vue-router 中 meta的用法详解
Nov 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
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
JS 时间显示效果代码
2009/08/23 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
pybind11在Windows下的使用教程
2019/07/04 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python Django的web开发实例(入门)
2019/07/31 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
餐饮主管岗位职责
2013/12/10 职场文书
银行职业规划书范文
2013/12/28 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
销售员岗位职责范本
2015/04/11 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
java项目构建Gradle的使用教程
2022/03/24 Java/Android
PHP正则表达式之RCEService回溯
2022/04/11 PHP
Python中npy和mat文件的保存与读取
2022/04/24 Python