轮播图片小组件

最新推荐文章于 2024-07-22 15:13:59 发布

agax0312

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量451

点赞数

分类专栏： javascript 文章标签： jquery javascript

本文链接：https://blog.csdn.net/agax0312/article/details/72956317

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jquery用的不熟，关于轮播闪烁的问题还要继续想一下，整体感觉很不顺畅，

待完善，先吃饭去！得意

代码结构：
这里写图片描述

JS部分：

/**
 * Created by Think on 2017/6/8.
 */
var oCss = document.createElement("link");
oCss.setAttribute("rel", "stylesheet");
oCss.setAttribute("type", "text/css");
oCss.setAttribute("href", "../component/Carousel/carousel.css");
document.getElementsByTagName("HEAD")[0].appendChild(oCss);


var Carousel = function(content,urls,autoplay,timeInterval) {
    init_carousel(content,urls,autoplay);
}

var init_carousel = function (content,urls,autoplay,timeInterval) {
    var timeInterval = timeInterval || 2000;
    var _interval;
    var tempIndex = 0;
    urls.length == 0 && function(){return false}();
    var _width = content.offsetWidth;
    var _con = document.createElement("div");
    _con.className= "con";
    var _ul = document.createElement("ul");
    _ul.className = "ul";
    _ul.style.minWidth = _width + "px";
    for(var i=0; i<urls.length; i++){
        var _li = document.createElement("li");
        _li.className = "li";
        _li.style.background = "url(" + urls[i] + ") no-repeat";
        _li.style.backgroundSize = "cover";
        _li.style.width = _width + "px";
        _ul.appendChild(_li);
    }
    _con.appendChild(_ul);
    content.appendChild(_con);
    $(".ul li:eq(0)").css("display","block");
    var _tab = document.createElement("div");
    _tab.className= "tab";
    _ul.appendChild(_tab);
    for(var i=1;i<=urls.length;i++){
        $(".tab").append('<a href="javascript:(void)">'+i+'</a>');
    }
    $(".tab a").eq(0).addClass('active');
    var _func_lb = function () {
        tempIndex ++ ;
        tempIndex == urls.length && function () {
            tempIndex = 0;
        }();
        $(".tab a").eq(tempIndex).addClass('active').siblings().removeClass("active");
        $(".con ul li ").eq(tempIndex).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        $(".tab").fadeIn("fast");
    };
    autoplay == true && function () {
        _interval = setInterval(_func_lb, timeInterval);
    }();
    $(".tab a").mouseover(function () {
        clearInterval(_interval)
    });
    $(".tab a").mouseleave(function () {
        tempIndex = $(this).index();
        _interval = setInterval(_func_lb, timeInterval);
    })
    $(".tab a").click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        // var index = $(this).index();
        tempIndex = $(this).index();
        $(".con ul li").eq(tempIndex).stop().fadeIn(300).siblings().stop().fadeOut(300);
        $(".tab").fadeIn("fast");
    })

}

CSS部分：

.con{
    width: 100%;
    height: 100%;
}
.ul{
    min-width: 900px;
    min-height: 300px;
    height: auto;
    position: relative;
    list-style: none;
}
.li{
    width: 900px;
    min-height: 300px;
    height: auto;
    display: none;
    float: left;
}
.tab{
    min-height: 50px;
    height: auto;
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    width: 346px
}
.tab a{display: inline-block;padding: 2px 10px;font-size: 10px;background: #fff;margin: 0 5px;color: #333;}
.tab a.active{background: #09b;color: #fff;}

HTML（调用部分）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../component/jQuery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../component/Carousel/carousel.js"></script>
    <style>
        html,body,div{
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        #tt{
            width: 600px;
            height: 320px;
            position: absolute;
            top:20%;
        }
    </style>
</head>
<body>
<div id="tt"></div>
</body>
<script>
 var test = new Carousel(document.getElementById("tt"),["../component/image/1.jpg","../component/image/2.jpg","../component/image/3.jpg"],true);
</script>
</html>

这种随时可以“new”出来，嵌入DOM的东西，是我理解的组件化开发。
PS：任何意见请高手给予指教，不胜感谢！
寻Web前端开发工作，地点北京，期望月10-15K.

agax0312

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图片小组件

感觉这种随时想要加个下拉框啊，轮播框啊，随时就可以“new”一个出来的模式，是我个人理解的组件化开发，菜鸟一只，还请各位赐教！PS：以前做java的，想找个web开发，一两年经验，期望月10K-15K。
复制链接

扫一扫

专栏目录

轮播图片小组件

“相关推荐”对你有帮助么？