手写轮播

古城微笑少年丶 2022-06-06 09:35 140阅读 0赞

**//手写轮播**

**//第一块：**

<style>  
\#win \{  
width:250px;  
height:100px;  
overflow:hidden;  
\}  
  
\#pics\{  
width:1000px;  
height:100px;  
transition:margin-left 1s ease;  
\}  
  
\#pics a \{  
margin:0px;  
padding:0px;  
width:250px;  
height:100px;  
display:inline-block;  
background-size:100% 100%;  
\}  
</style>

**//第二块：**

<div id="win">  
<div id="pics">  
<a style="background:url(pics/x.jpg)"></a><a style="background:url(pics/y.png)"></a><a style="background:url(pics/z.png)"></a><a style="background:url(pics/t.png)"></a>  
</div>  
</div>

**//第三块：**

<script>

//让子元素向左飘动，就可以实现图片的切换  
setInterval(function()\{  
var pics = document.getElementById("pics");  
  
var zpy = pics.style.marginLeft;  
  
if(zpy == "" || zpy == "-750px")\{  
var res = "0px";  
\}else\{  
var n = parseInt(zpy); //把偏移的值转化为整型，才能进行加减乘除的处理；  
var number = n - 250; //每次移动250像素，每次移动一个图片的位置，用减法，表示向左移动。  
var res = number + "px"; //加上偏移的单位，  
\}   
pics.style.marginLeft = res ;  
\},1000);  
</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，140人围观）

还没有评论，来说两句吧...

相关阅读

相关用js写图片轮播

好的。要用 JavaScript 写图片轮播，你需要做的是： 1. 准备好你要轮播的图片，并把它们放在一个数组中。 2. 使用 JavaScript 来创建一个图片轮

骑猪看日落/ 2024年03月27日 12:37/ 0 赞/ 41 阅读

相关手写原创纯js实现轮播图

默认设定的图片宽度是1440px,如果有不同的可以自己对应修改即可 <!DOCTYPE html> <html> <head> <meta

ゝ一世哀愁。/ 2023年07月02日 04:26/ 0 赞/ 68 阅读

相关使用 element 写轮播图

html <div class="lunbo-box"> <el-carousel indicator-position="non

青旅半醒/ 2023年05月30日 09:13/ 0 赞/ 88 阅读

相关不用写html排版标签的图片轮播js,纯JavaScript手写图片轮播代码

废话不多说了，直接给大家贴js代码实现手写图片轮播的代码了，代码非常简单，具体代码如下所示： js图片轮播切换 .imgCon\{width: 400px;height:

左手的ㄟ右手/ 2022年10月06日 07:53/ 0 赞/ 117 阅读

相关手写轮播

//手写轮播 //第一块： <style> \win \{ width:250px; height:100px; overflow:hidden; \}

古城微笑少年丶/ 2022年06月06日 09:35/ 0 赞/ 141 阅读

相关面向对象写轮播图

运行效果图 ![20180517132055955][] html代码 <div id="banner"> <ul> <li><i

川长思鸟来/ 2022年05月24日 00:54/ 0 赞/ 174 阅读

相关使用swiper.js写轮播

初涉swiper.js，记录一下使用过程 1.首先引入js和css <script src="./js/swiper-3.4.2.jquery.min.js"><

「爱情、让人受尽委屈。」/ 2022年05月14日 10:14/ 0 赞/ 215 阅读

相关 html写轮播图

这个用到定时器来实现；思路：使用`<ul><li>`来放图片，按照我们的要求来排版；溢出的隐藏，还需要用到最主要的一个属性；就是动画属性：`animation @ke

偏执的太偏执、/ 2021年12月04日 08:25/ 0 赞/ 295 阅读

相关手写轮播图，读完你也可以自己写。

看了setInterval方法直接上手卢一发轮播图，还是第一次写的哈哈主要用到： flex：flex布局 addClass():添加样式 removeClas

ゞ浴缸里的玫瑰/ 2021年10月19日 09:26/ 0 赞/ 193 阅读

相关手写轮播图

效果如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

小灰灰/ 2021年09月08日 12:48/ 0 赞/ 420 阅读