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实现的自定义的对话框的实现代码
Mar 21 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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中session_unset与session_destroy的区别分析
2011/06/16 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
跟老齐学Python之网站的结构
2014/10/24 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
家长对小学生的评语
2014/01/28 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
消防安全承诺书
2014/05/22 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书