JavaScript 图片横向滚动轮播

例1: 无缝连续滚动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 1000px;
height: 130px;
margin: 100px auto;
border: 1px solid #000;
position: relative;

overflow: hidden; /* 防止滚动的图片溢出 */
}
ul{
width: 2000px;
position: absolute;
left: 0;
top: 0;
}
li{
float: left;
}
img{
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
<!--我们在复制一套出来-->
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
</ul>
</div>

<script type="text/javascript">
var ul = document.getElementsByTagName("ul")[0];

setInterval(function(){
    if(getStyle(ul,"left")===-1000){
    ul.style.left = "0px";//执行这一行代码需要多长时间???
    }

    ul.style.left = getStyle(ul,"left") - 1 + "px";
},10)


function getStyle(obj,attr){
    if(window.getComputedStyle){
    return parseInt(window.getComputedStyle(obj)[attr]);
    }else{
    return parseInt(obj.currentStyle[attr]);
    }
}
</script>
</body>
</html>

图片规格: 200px 130px

姐姐最近迷上了css3

so研究了一个纯用css3制作的幻灯片轮播

6不6，就问你们6不6，没有js，没有jq，我觉得我好棒，哈哈哈。

但其实做起来还是蛮复杂的，首先我先把框架搭好，看到底下和左右的按钮没有，如果是jq我们就得选中到他然后用下标来实现点击切换对应的图。

那css怎么去实现呢？我们先搭6个radio（因为我这用了6张图），然后用label的for属性去指向radio。要知道radio他默认样式特别丑，还改变不了，除非你用图片然后用js去实现。这里呢，小姐姐就教你个小方法，咱就用label标签去做，那我就可以改变形状，然后功能指向radio就好了.

直接上代码

至于丑八怪radio就默默的隐藏幕后就好

现在就是这么一个效果，切换已经实现，你可以先别把radio隐藏，你可以点击试试是否已经指向

至于图片那酷炫的效果，待小姐姐下回分解，想要源码142991222求我呀

端实用特效：javascript制作腾讯新闻轮播小案例

javascript正则实现QQ空间换肤效果源码：

源码以上传至群589651705群文件，小伙伴们可以进群自行下载。

更加系统的小案例和学习方法可以关注我的微信公众号：‘学习web前端’关注后回复‘给我资料’可以领取一套完整的学习视频

在线咨询

上一篇：ThinkPHP之去掉文章中的所有HTML标签并截取部分内容作为简介
下一篇：JavaScript 根据指定的字符串格式格式化日期

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript 图片横向滚动轮播

端实用特效：javascript制作腾讯新闻轮播小案例

您的项目需求