HTML+CSS+JAVASCRIPT幻灯片

最新推荐文章于 2023-02-09 12:11:20 发布

fastrack_0706

最新推荐文章于 2023-02-09 12:11:20 发布

阅读量267

点赞数

分类专栏： web前端文章标签： HTML CSS JS 幻灯片

本文链接：https://blog.csdn.net/fastrack_15233866884/article/details/104038313

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

没性能的啊，就是循环遍历操作DOM

HTML----code:

<body>
<div class="slide-wrap">
    <div class="slide">
        <ul class="slide-list">
            <li class="slide-item active">
                <img src="HOME/images/1.jpg">
            </li>
            <li class="slide-item">
                <img src="HOME/images/2.jpg">
            </li>
            <li class="slide-item">
                <img src="HOME/images/3.jpg">
            </li>
        </ul>
    </div>
    <!--缩略图-->
    <div class="thumbs">
        <ul class="thumbs-list">
            <li class="thumbs-item cur">
                <img src="HOME/images/1.jpg">
            </li>
            <li class="thumbs-item">
                <img src="HOME/images/2.jpg">
            </li>
            <li class="thumbs-item">
                <img src="HOME/images/3.jpg">
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="HOME/js/index2.js"></script>
<script type="text/javascript">
    var slider = new Slider({
        slideItem: 'slide-item',
        thumbItem: 'thumbs-item'
    });
</script>
</body>

CSS----code:

body {
    margin: 0px;
    padding: 0px;
}

ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    height: 100%;
}

.slide-wrap {
    width: 720px;
    height: 360px;
    margin: 50px auto;
    border: 1px solid #9B410E;
}

/*展示缩略图样式*/
.slide {
    width: 600px;
    height: 100%;
    float: left;
    position: relative;
}

.slide .slide-item {
    position: absolute;
    top: 0;
    left: 0;
    height: 360px;
    display: none;
}

.slide .slide-item.active {
    display: block;
}

/*缩略图样式*/
.thumbs {
    width: 120px;
    float: left;
}

.thumbs-item {
    height: 120px;
    opacity: .5;
}

.cur {
    opacity: 1;
}

JavaScript---code:

;(function () {
    var Slider = function (opt) {
        this.slideItems = document.getElementsByClassName(opt.slideItem);
        this.thumbItems = document.getElementsByClassName(opt.thumbItem);
        this.bindClick();
    }
    Slider.prototype = {
        bindClick: function () {
            var slideItem = this.slideItems,
                thumbItem = this.thumbItems;
            for (var i = 0; i < thumbItem.length; i++) {
                (function (j) {
                    thumbItem[j].onclick = function () {
                        for (var k = 0; k < thumbItem.length; k++) {
                            thumbItem[k].className = "thumbs-item";
                            slideItem[k].className = "slide-item";
                        }
                        thumbItem[j].className += " cur"
                        slideItem[j].className += " active";
                    }
                }(i));
            }
        }
    }
    window.Slider = Slider;
}());

fastrack_0706

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JAVASCRIPT幻灯片

没性能的啊，就是循环遍历操作DOMHTML----code:<body><div class="slide-wrap"> <div class="slide"> <ul class="slide-list"> <li class="slide-item active"> ...
复制链接

扫一扫