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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
js图片预加载示例
Apr 30 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
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
关于文本留言本的分页代码
2006/10/09 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
智能电子应届生求职信
2013/11/10 职场文书
公司企业表扬信
2014/01/11 职场文书
信息员培训方案
2014/06/12 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js
js判断两个数组相等的5种方法
2022/05/06 Javascript