JavaScript轮播图简单制作方法
本文实例为大家分享了JavaScript制作轮播图的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<style>
.container{
position: absolute;
left: 0;
top:0;
width: 100%;
overflow: hidden;
border:1px solid #c3c3c3;
border-radius: 4px;
}
.block1{
margin:0;
padding: 0;
display: inline-block;
height: 400px;
background-color: #008800;
}
.block2{
margin:0;
padding: 0;
display: inline-block;
height: 400px;
background-color: #ffff00;
}
.block3{
margin:0;
padding: 0;
display: inline-block;
height: 400px;
background-color: #FF9900;
}
</style>
</head>
<body>
<div class="container" style="position: absolute;left: 0;top:0; width: 100%;height: 400px;">
<div class="block1" style="position: absolute;left: 0;top:0;"></div>
<div class="block2" style="position: absolute;left:0;top:0;"></div>
<div class="block3" style="position: absolute; left:0;top:0;"></div>
</div>
</body>
<script>
var wt=window.innerWidth;
$(".block1").css({width:wt});
$(".block2").css({width:wt,left:wt});
$(".block3").css({width:wt,left:wt*2});
var aa=setInterval(function(){
$(".block1").css({left:parseFloat($(".block1")[0].style.left)-1});
$(".block2").css({left:parseFloat($(".block2")[0].style.left)-1});
$(".block3").css({left:parseFloat($(".block3")[0].style.left)-1});
if($(".block3")[0].style.left=="0px"){
// clearInterval(aa);
// 清除循环滚动
$(".block1").css({left:0})
$(".block2").css({left:wt})
$(".block3").css({left:wt*2})
}
},2)
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生js实现移动开发轮播图、相册滑动特效
使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script
-
完美实现八种js焦点轮播图（上篇）
本文分为上下篇为大家分享了js焦点轮播图八种经典效果,供大家参考,具体内容如下 基本布局: <div id="box"> <ul id="ul"> <li style='display:block;'><img src="images/1.jpg" alt=""></li> <li><img src="images/2.jpg"
-
简单的JS轮播图代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过
-
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用. 它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚,关键代码如下 <div id='slider' class='swipe'>
-
利用AngularJs实现京东首页轮播图效果
先来看看效果图 其实写一个轮播图还是蛮简单的,我想了两种种方法,来实现轮播图(实际上细分是5种,但是其中两种是操作dom原生,三种是利用AngularJs的动画,所有归为两大类),等我写出来,大家好好理解一下就好. 那我先写一种,第一种是不使用angularjs的动画模块,只使用指令来完成动画的切换.在这里面就是在指令里操作dom元素,超级easy. 示例代码 <!DOCTYPE html> <html lang="en" ng-app="lunbo&quo
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
-
js实现点击左右按钮轮播图片效果实例
本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un
-
JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu
-
js 基础篇必看(点击事件轮播图的简单实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说.将图片放入到div 中. 其次,样式部分将img标签全部设置成absolute:以方便定位 最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图
-
完美实现八种js焦点轮播图（下篇）
继续上一篇的学习完美实现八种js焦点轮播图(上篇),供大家参考,具体内容如下 5.定时上下无缝滚动 思路: 1.思路1: 将ul复制一份,但滚动一半距离重新归位:(大型网站性能略低): 2.思路2: 通过相对定位,将第一个li移动到最后,再将ul和Li归位. window.onload=function(){ var oBox=document.getElementById('box'); var oUl=document.getElementById('ul'); var aLi_u=oUl.