背景皮肤更换效果

最新推荐文章于 2024-09-30 09:59:46 发布

@@九亿少女的梦

最新推荐文章于 2024-09-30 09:59:46 发布

阅读量128

点赞数

分类专栏： dom 文章标签： css3 css javascript

本文链接：https://blog.csdn.net/W_wjinb_B/article/details/122493479

版权

dom 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

如上图所示，下面那个点点，会滑动，然后那个图片会自动切换

我们可以简易的搞一个类似的，原理都一样
那些点点可以用ul框起来，用li来表示，每个li里面装一个img,

<style>
body{
		background: url(地址)no-repeat center top;
}
li{ list-style:none;}
.pifu{overflow: hidden;
		margin:100px auto;
		bakground-color:#fff;
		width:410px;
		padding-top:3px; }
.pifu li{
		float: left;
		margin: 0 1px;
		cursor: pointer;
	}
	.baidu img{
			width: 100px;
}
</style>



<ul class = "pifu">
    <li><img src = '1#'></li>
    <li><img src = '2#'></li>
    <li><img src = '3#'></li>
    <li><img src = '4#'></li>
    <li><img src = '5#'></li>
</ul>
<script>
    var imgs = document.querySelector('.pifu').querySelectorALL('img');
    for(var i = 0,i <= imgs.lenght,i++){
        imgs[i].onclick = function(){
        console.log(this.src);
        或者
        document.body.style.backgroundImage = 'url(地址)';
         							 'url('+ this.src +');
        }
    }
</script>