jquery 多窗口图片播放以及自动播放

2022-06-06 21:39:42

我搜集了2种方法：

1种为写直接写jQuery方法，效果如下：

代码如下：

View Code

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动 www.mb5u.com</title>
<meta name="description" content="jquery图片滚动控制单排图片左右滚动，设置序号导航条按钮控制单排图片滚动，带左右按钮控制单排图片滚动。jquery下载,jquery 插件。" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑";line-height:1.8em;}
h1{font-size:1em;font-weight:normal;}
h1 a{background:#CFF;padding:2px 3px;text-decoration:none;}
h1 a:hover{background:#eee;text-decoration:underline;}
h2,h3{font-size:1em;font-weight:normal;color:#a40000;margin:1em auto;position:relative;}
h3{color:#888;font-weight:bold;}
/* ibox */
.ibox{width:850px;height:210px;background:#ddd;margin:1em auto;border:1em solid #ddd;position:relative;overflow:hidden;}
.ibox .showbox{position:absolute;left:0;width:2550px;height:170px;background:#fff;}
.ibox .showbox ul li{float:left;margin:7px;display:inline;}
.ibox .showbox ul li a{display:block;width:156px;height:156px;overflow:hidden;}
.ibox .showbox ul li a img{border:3px solid #a40000;}
.ibox .showbox ul li a:hover img{border:solid 3px #3366cc;}
.ibox .btnbox{height:34px;overflow:hidden;float:right;}
.ibox span{padding:2px 5px;background:#fff;cursor:pointer;float:left;margin:0 5px;display:inline;height:20px;line-height:20px;}
.ibox span.num{background:#ddd;line-height:18px;}
.ibox span.num li{float:left;display:inline;margin:0 5px;padding:1px 5px;line-height:18px;}
.ibox span.num .numcur{background:#a40000;color:#fff;}
</style>
<script type="text/javascript">
$(function(){
    //@Mr.Think***变量
    var $cur = 1;//初始化显示的版面
    var $i = 5;//每版显示数
    var $len = $('.showbox>ul>li').length;//计算列表总长度(个数)
    var $pages = Math.ceil($len / $i);//计算展示版面数量
    var $w = $('.ibox').width();//取得展示区外围宽度
    var $showbox = $('.showbox');
    var $num = $('span.num li')
    var $pre = $('span.pre')
    var $next = $('span.next');
    var $autoFun;
    //@Mr.Think***调用自动滚动
    autoSlide();
    //@Mr.Think***向前滚动
    $pre.click(function(){
        if (!$showbox.is(':animated')) {  //判断展示区是否动画
            if ($cur == 1) {   //在第一个版面时,再向前滚动到最后一个版面
                $showbox.animate({
                    left: '-=' + $w * ($pages - 1)
                }, 500); //改变left值,切换显示版面,500(ms)为滚动时间,下同
                $cur = $pages; //初始化版面为最后一个版面
            }
            else {
                $showbox.animate({
                    left: '+=' + $w
                }, 500); //改变left值,切换显示版面
                $cur--; //版面累减
            }
            $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
        }
    });
    //@Mr.Think***向后滚动
    $next.click(function(){
        if (!$showbox.is(':animated')) { //判断展示区是否动画
            if ($cur == $pages) {  //在最后一个版面时,再向后滚动到第一个版面
                $showbox.animate({
                    left: 0
                }, 500); //改变left值,切换显示版面,500(ms)为滚动时间,下同
                $cur = 1; //初始化版面为第一个版面
            }
            else {
                $showbox.animate({
                    left: '-=' + $w
                }, 500);//改变left值,切换显示版面
                $cur++; //版面数累加
            }
            $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
        }
    });
    //@Mr.Think***数字点击事件
    $num.click(function(){
        if (!$showbox.is(':animated')) { //判断展示区是否动画
            var $index = $num.index(this); //索引出当前点击在列表中的位置值
            $showbox.animate({
                left: '-' + ($w * $index)
            }, 500); //改变left值,切换显示版面,500(ms)为滚动时间
            $cur = $index + 1; //初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1
            $(this).addClass('numcur').siblings().removeClass('numcur'); //为当前点击加上高亮样式,并移除同级元素的高亮样式
        }
    });
    //@Mr.Think***停止滚动
    clearFun($showbox);
    clearFun($pre);
    clearFun($next);
    clearFun($num);
    //@Mr.Think***事件划入时停止自动滚动
    function clearFun(elem){
        elem.hover(function(){
            clearAuto();
        }, function(){
            autoSlide();
        });
    }
    //@Mr.Think***自动滚动
    function autoSlide(){
        $next.trigger('click');
        $autoFun = setTimeout(autoSlide, 5000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效
    }
    //@Mr.Think***清除自动滚动
    function clearAuto(){
        clearTimeout($autoFun);
    }
});
</script>
</head>
<body>
<div class="ibox">
    <div class="btnbox">
        <span class="pre">&laquo;向左</span>
        <span class="num">
            <ol>
                <li class="numcur">1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </span>
        <span class="next">向右&raquo;</span>
    </div>
    
    <div style="clear:both;height:0;overflow:hidden;"></div>
    
    <div class="showbox">
        <ul>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="mb5u/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="mb5u/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="jquery 图片特效插件 异步读取图片TOP排行榜特效" src="mb5u/smalldb89cf912e07ed70f0c933c33e0cb976.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换" src="mb5u/small7ec25ef488c710d8d8ac3e5a33d6034b.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="jquery 图片特效 鼠标滑过图片显示文字与标题内容特效" src="mb5u/small3a1184db401138d6443a1b5f42cb289b.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="jquery 幻灯片插件 canvas 3D旋转木马 图片立体展示 图片有大到小一次顺序排列" src="mb5u/small18129a189a8f547aba10fb10f91e6282.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="jquery 图片放大镜 图片类似放大镜效果鼠标滑过小图异步加载中图、大图" src="mb5u/small598271bc3a3f325a0a1476b1ec18753d.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡" src="mb5u/smallf16b49d4849ce225d66900ed23367f74.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="js树形导航菜单制作垂直js导航条特效" src="mb5u/small480f846f099a5892a0f1aee6170540ce.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="js导航菜单制作一个二级滑动导航菜单" src="mb5u/small209a4e7a24813bea36f5092164c96c4b.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="js横向二级导航菜单slide往下滑动动画效果js代码下载" src="mb5u/smallbd4bf784c38259708f62cd168b297147.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单" src="mb5u/small00da066c77f0ac26ff5aec5e5018feb5.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="div+css布局控制div定位浮动层在背景图片上的半透明阴影效果" src="mb5u/smallc642558f13f52d555296b0f180e0f045.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="div+css教程网站建设门户网站和电子商务网站CSS样式表" src="mb5u/small376c7a03cb5dfb6f7435df7a9362dd7e.jpg" /></a></li>
            <li><a href="http://www.mb5u.com/" target="_blank"><img width="150" height="150" alt="div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动" src="mb5u/smalla4c7c67dec86de131924d9e69e745e18.jpg" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

2 使用插件jcarousel ，效果如下：

 <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
     <link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
    <link rel="stylesheet" type="text/css" href="css/jcarouselskin.css" />
 <script type="text/javascript">

        function mycarousel_initCallback(carousel) {
            // Disable autoscrolling if the user clicks the prev or next button.
            carousel.buttonNext.bind('click', function () {
                carousel.startAuto(0);
            });

            carousel.buttonPrev.bind('click', function () {
                carousel.startAuto(0);
            });

            // Pause autoscrolling if the user moves with the cursor over the clip.
            carousel.clip.hover(function () {
                carousel.stopAuto();
            }, function () {
                carousel.startAuto();
            });
        };

        jQuery(document).ready(function () {
            jQuery('#mycarousel').jcarousel({
                auto: 2,
                wrap: 'last',
                scroll:4,
                visible: 4,
                buttonNextHTML: "<td style=\"padding-top: 10px; width: 17px;\">  <img   src=\"images/go_right.jpg\" width=\"17\" height=\"29\"></td>",
                buttonPrevHTML: "<td style=\"padding-top: 10px; width: 17px;\"><img   src=\"images/go_left.jpg\" width=\"17\" height=\"29\" id=\"toleft\"></td>",
                initCallback: mycarousel_initCallback
            });
        });

    </script>


html代码：
 
                            <td style="padding-top: 10px;">
                                <div class="GundongPic">
                                    <ul id="mycarousel" class="jcarousel-skin-tango">
                                        <li><a href="#">
                                            <img alt="" src="images/img_guanggu.jpg" width="98" height="120" style="border: 0" /></a>
                                        </li>
                                        <li><a href="#">
                                            <img alt="" src="images/img_luneng.jpg" width="98" height="120" style="border: 0" /></a>
                                        </li>
                                        <li><a href="#">
                                            <img alt="" src="images/img_xincheng.jpg" width="98" height="120" style="border: 0" /></a>
                                        </li>
                                        <li><a href="#">
                                            <img alt="" src="images/img_hengda.jpg" width="98" height="120" style="border: 0" /></a>
                                        </li>
                                         <li><a href="#">
                                            <img alt="" src="images/img_guanggu.jpg" width="98" height="120" style="border: 0" /></a>
                                        </li>
                                            <li><a href="#">
                                            <img alt="" src="images/img_luneng.jpg" width="98" height="120" style="border: 0" /></a>
                                        </li>
                                         <li><a href="#">
                                            <img alt="" src="images/img_guanggu.jpg" width="98" height="120" style="border: 0" /></a>
                                        </li>
                                    </ul>
                                </div>
                            </td>

该插件下载

关于里面的皮肤css文件（jcarouselskin.css），我添加了点注释，方便人阅读：

.jcarousel-skin-tango .jcarousel-container
{
    -moz-border-radius: 10px;
    
    
}

.jcarousel-skin-tango .jcarousel-container-horizontal
{
    /*the distance left and right button */
    width: 400px;
    padding: 10px 42px;
}

.jcarousel-skin-tango .jcarousel-container-vertical
{
    width: 98px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal
{
    /*the distance of 4 pictures*/
    width: 408px;
    height: 120px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical
{
    width: 98px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item
{
    width: 98px;
    height: 120px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal
{
     margin-right: 5px; 
}

.jcarousel-skin-tango .jcarousel-item-vertical
{
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder
{
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal
{
    /*right button */
    position: absolute;
    top: 53px;
    right: 5px;
    width: 23px;
    height: 32px;
    cursor: pointer;
     background: transparent url(../images/go_right.png) no-repeat 0 0; 
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover
{
    background-position: -23px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active
{
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active
{
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal
{ 
    /*left button*/
    position: absolute;
    top: 53px;
    left: 5px;
    width: 23px;
    height: 31px;
    cursor: pointer;
    background: transparent url(../images/go_left.png) no-repeat 0 0 ;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover
{
    background-position: -23px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active
{
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active
{
    cursor: default;
    background-position: -96px 0;
}

/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical
{
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 31px;
    cursor: pointer;
    background: transparent url(../images/next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover
{
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active
{
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active
{
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical
{
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../images/prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover
{
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active
{
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active
{
    cursor: default;
    background-position: 0 -96px;
}

码农公寓

相关文章