手写轮播
来源:互联网 发布:河北盘古网络怎么样 编辑:程序博客网 时间:2024/05/21 10:18
//手写轮播
//第一块:
<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 0
- 手写无限轮播
- 手写轮播
- 纯js 手写轮播
- 图片轮播的手写代码
- js手写,全屏轮播(支持左右切换)
- 轮播(纯天然手写,没用插件)
- 用H5+jQuery实现图片轮播的手写代码
- 手写无缝滚动轮播图
- 轮播
- 轮播
- 轮播
- 轮播
- 轮播
- 轮播
- 轮播
- 轮播
- 轮播
- 轮播
- 动态代理
- centos6.5安装hadoop集群过程及遇到的问题
- Retrofit 请求
- 不通的路径Ⅱ
- 三色旗(c/python)
- 手写轮播
- 读取进度加载二维码
- RxJava+Retrofit 简单理解实现
- Java super隐式参数
- 动态规划DP_最长上升子序列LIS
- Linux如何安装JAVA的JDK?
- Xargs用法详解
- demo
- 求哈夫曼树最小带权路径长度和代码