手写轮播

古城微笑少年丶 2022-06-06 09:35 270阅读 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 条评论，270人围观）

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

相关阅读

相关 JS 原生手写轮播图

只是实现了原生JS实现轮播图的逻辑和具体实现代码，css样式并未进行美化实现了以下功能 (1) 点击容器container下方小圆点可以进行切换 (2) 点击左右的

不念不忘少年蓝@/ 2023年10月11日 22:08/ 0 赞/ 152 阅读

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

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

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

相关 jquery手写简单轮播效果

基于jquery的简单轮播效果 1. 无缝轮播、前进后退、指示器（分页器） 2. 使用时注意设置组外层宽高 html代码 <!DOCTYPE html>

青旅半醒/ 2023年06月16日 08:21/ 0 赞/ 18 阅读

相关 vue写轮播组件

写轮播组件的思路： 1、确定传入的参数：轮播图的数据（图片地址，跳转href，图片ID，标题等基础数据）、轮询时间 2、写好轮播图的基本样式，父组件传入参数，动态加载进

淩亂°似流年/ 2023年02月18日 03:18/ 0 赞/ 143 阅读

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

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

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

相关手写轮播

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

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

相关面向对象写轮播图

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

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

相关 html写轮播图

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

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

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

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

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

相关手写轮播图

效果如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

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