jQuery3d轮播图代码 jquery轮播图原理

转载
mob64ca13f937ae 2024-02-20 08:34:16
文章标签 jQuery3d轮播图代码 css html 轮播图 文章分类 jQuery 前端开发
一、代码分两个部分：1、HTML部分，根据注释处理即可；2、基于jQuery的play.js插件部分，这里为了展示效果，直接写在<html></html>下的<script></script>标签里。3、效果包含：自动轮播，焦点对齐，前进后退，直走不返，鼠标进入、轮播停止且前进后退图标出现，鼠标离开、轮播重启且前进后退图标隐藏。4、这里可以预览效果。
二、轮播图原理说明：
（1）轮播图（假设）有7张图片，“一”字排列，把第1张图片复制一次，放到第8张的位置，这样共有8张图片；轮播开始后，
（2）整个第2秒内，第2张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；
（3）整个第3秒内，第3张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；以此类推
（4）整个第8秒内，第8张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；注意
（5）整个第9秒内，轮播图急速回到第1张图片完全出现的状态，耗时约0毫秒（即运行autoMove方法中if语句块的耗时），然后立即开始（2）步骤。
三、也可以用命名空间的方式进行扩展：
<script>
    $.myPlugin = { banner: function (width, height) {----插件代码---- } };
</script>
<script>
    $.myPlugin.banner('500px', '250px');
</script>

```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>/*style标签及其内的内容，在实际项目中可以不要*/
    * {
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body>
<!--body标签里的内容，没说可以增减或更改的，不要增减或更改-->
<div id="box">
    <div>
        <!--以下是可增减区域-->
        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" alt=""/></div>
        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" alt=""/></div>
        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/>
        </div>
        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/>
        </div>
        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg" alt=""/>
        </div>
        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg" alt=""/>
        </div>
        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg" alt=""/>
        </div>
        <!--以上是可增减区域-->
    </div>
</div>
</body>
</html>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
    (function($){
        $.fn.extend({
            banner: function (width, height) {
                var $oBox = $("#box");
                /*以下最外层div*/
                $oBox.css({
                    "height": height,
                    "width": width,
                    "margin": "0 auto",
                    "overflow": "hidden",
                    "position": "relative"
                });
                /*以下轮播区的div*/
                var $oBoxInner = $oBox.children('div');
                var aDiv = $oBoxInner[0].innerHTML;
                /* 轮播区内部原来的值*/
                var aDiv0 = $oBoxInner.children('div')[0].outerHTML;
                /*第一个轮播图片的外部*/
                $oBoxInner.html(aDiv + aDiv0);
                /* 用jQuery的方法给轮播区内部重新赋值*/
                var $width = parseFloat(width) * $oBoxInner.children('div').length + "px";
                $oBoxInner.css({
                    "height": height,
                    "width": $width,
                    "position": "absolute",
                    "left": 0,
                    "right": 0,
                    "float": "left"
                });
                $oBoxInner = $oBox.children('div');
                var $aDiv = $oBoxInner.children("div");
                $aDiv.css({"width": width, "height": height, "float": "left"});
                $aDiv.children('img').css({"width": "100%", "height": "100%"});
                /*以下是焦点区部分（定位在轮播区的右下方）*/
                $oBox.append("<ul></ul>");
                var $ul = $oBox.children("ul");
                var $li = "";
                $aDiv.each(function (index) {
                    if (index < $aDiv.length - 1) {
                        $li += '<li></li>';
                    }
                });
                $ul.append($li);
                $ul = $oBox.children("ul");
                $ul.css({"position": "absolute", "right": "10px", "bottom": "10px"});
                $li = $ul.children("li");
                $li.css({
                    "width": "18px",
                    "height": "18px",
                    "float": "left",
                    "listStyle": "none",
                    "background": "green",
                    "borderRadius": "50%",
                    "marginLeft": "10px",
                    "cursor": "pointer"
                });
                /*以下是向左向右两个箭头式按钮*/
                var $a = "<a href = 'javascript:;'></a><a href = 'javascript:;'></a>";
                $oBox.append($a);
                /*以下是左按钮（点击它，图片向左运动）*/
                var $oBtnL = $oBox.children('a').eq(0);
                $oBtnL.css({
                    "width": "30px",
                    "height": "30px",
                    "position": "absolute",
                    "top": (parseFloat(height) / 2 - 15) + "px",
                    "left": "30px",
                    "border": "10px solid red",
                    "borderLeft": "none",
                    "borderBottom": "none",
                    "opacity": 0.6,
                    "filter ": "alpha(opacity=60)",
                    "display": "none",
                    "transform": "rotate(-135deg)"
                });
                $oBtnL.click(function () {
                    if ($step <= 0) {
                        $step = $aDiv.length - 1;
                        $oBoxInner.css('left', -$step * parseFloat(width));
                    }
                    $step--;
                    $oBoxInner.animate({left: -$step * parseFloat(width)});
                    $bannerTip();
                });
                /*以下是右按钮（点击它，图片向右运动）*/
                var $oBtnR = $oBox.children('a').eq(1);
                $oBtnR.css({
                    "width": "30px",
                    "height": "30px",
                    "position": "absolute",
                    "top": (parseFloat(height) / 2 - 15) + "px",
                    "right": "30px",
                    "border": "10px solid red",
                    "borderLeft": "none",
                    "borderBottom": "none",
                    "opacity": 0.6,
                    "filter": "alpha(opacity=60)",
                    "display": "none",
                    "transform": "rotate(45deg)"
                });
                $oBtnR.click(function () {
                    if ($step >= $aDiv.length - 1) {
                        $step = 0;
                        $oBoxInner.css('left', 0)
                    }
                    $step++;
                    $oBoxInner.animate({left: -$step * parseFloat(width)}, 1000);
                    $bannerTip();
                });

                var $step = 0;//记录每次运动
                var $timer = null;//定时器
                $init();//初始化轮播图
                function $init() {
                    /*1.开启自动轮播*/
                    $timer = setInterval(function () {
                        $autoMove();
                    }, 2000);
                    /*2.开启焦点，每个焦点与每张轮播图对应*/
                    $bannerTip();
                    /*3.鼠标移入轮播区，轮播暂停；鼠标移出轮播区，轮播恢复*/
                    $over_out();
                }

                $li.each(function (index) {
                    $(this).on('click', function () {
                        $step = index;
                        $oBoxInner.animate({left: -$step * parseFloat(width)}, 1000);
                        $bannerTip();
                    })
                });

                function $autoMove() {
                    if ($step >= $aDiv.length - 1) {
                        $step = 0;
                        $oBoxInner.css('left', 0)
                    }
                    $step++;
                    $oBoxInner.animate({left: -$step * parseFloat(width)}, 1000);
                    $bannerTip();
                }

                function $bannerTip() {
                    var tmpStep = $step >= $li.length ? 0 : $step;
                    $li.each(function (index) {
                        $li.eq(index).attr("class",index === tmpStep ? 'on' : null);
                        if ($li.eq(index).attr("class") === "on") {
                            $li.eq(index).css("background","red");
                        } else {
                            $li.eq(index).css("background","green");
                        }
                    })
                }

                function $over_out() {
                    $oBox.mouseover(function () {
                        clearInterval($timer);
                        $oBtnL.css({"display": "block"});
                        $oBtnR.css({"display": "block"});
                    });
                    $oBox.mouseout(function () {
                        $timer = setInterval(function () {
                            $autoMove()
                        }, 2000);
                        $oBtnL.css({"display": "none"});
                        $oBtnR.css({"display": "none"});
                    });
                }
            }
        })
    })(jQuery)
</script>
<script>
    $("#box").banner('500px', '250px');
</script>
```
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。