js如何做图片轮播_怎么用js做一个简单的轮播图

㈠ js中无缝滚动轮播图有多少种做法

还有就是用原生js模仿jQuery写一个动画函数，最简单版的就是：
var timer = null;
function ani(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function() {
var step = (target - ele.offsetLeft)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
console.log(1);
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
利用动画实现图片位置的移动，也是放一个图片到前面。
第二个就是还是放一张图到前面，然后把带图片的li定位；用一个arr[{left:0},{left:"200px"},{left:"400px"},{left:"600px"}];这样的数组把值分别赋给li；要滚动的时候把arr的最后一项放到最前面，再依次赋值给li，加上过渡就是轮播了，当然直接跳的那一下把过渡关了才是无缝轮播。

㈡怎么用js做一个简单的轮播图

obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 6000);
}
for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 6000);
}
}

㈢求告知JS怎么做轮播图啊，我只做出了无缝动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{
padding:0;margin:0;
}
div{
width: 1172px;
height: 447px;
border: 1px solid black;
position: relative;
top:20px;
left: 96px;
overflow: hidden;
}
.ul1{
position: absolute;
width: 1172px;
height: 447px;
}
.ul2{
position: relative;
left: 500px;
top: 410px;
}
.ul2 li{
list-style: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: white;
float: left;
margin-left: 5px;
cursor: pointer;
}
#active{
background: #f0f;
}
.ul1 li{
list-style: none;
float: left;
width: 500px;
height: 450px;
}
.li1{
background: url(img/1.jpg);
}
.li2{
background: url(img/2.jpg);
}
.li3{
background: url(img/3.jpg);
}
.li4{
background: url(img/4.jpg);
}
</style>

<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
var oUl1=oDiv.getElementsByClassName('ul1')[0];
var aLi1=oUl1.getElementsByTagName('li');
var oUl2=oDiv.getElementsByClassName('ul2')[0];
var aLi2=oUl2.getElementsByTagName('li');
var timer=null;
var run=-aLi1[0].offsetWidth;
var iNow=-1;
//增加ul宽度
oUl1.style.width=aLi1[0].offsetWidth*aLi1.length+'px';
//双层for循环选项卡
for (var a = 0; a< aLi1.length; a++) {
aLi2[a].index=a;
aLi2[a].onmouseover=function(){
for (var j = 0; j<aLi2.length; j++) {
aLi2[j].index=j;
aLi2[j].id='';
iNow=this.index;
};
this.id='active';
clearInterval(timer);
oUl1.style.left=this.index*run+'px';
}
aLi2[a].onmouseout=function(){
timer=setInterval(fun,1000);
}
};
//开启计时器启动让图片跟下边的li轮播
timer=setInterval(fun,1000);
fun();
function fun(){
if(iNow==aLi1.length-1){
iNow=0;
}else{
iNow++;
}
oUl1.style.left=iNow*run+'px';
for (var i = 0; i < aLi2.length; i++) {
aLi2[i].index=i;
aLi2[i].id='';
};
aLi2[iNow].id='active';
}
}
</script>
</head>
<body>
<div>
<ul class="ul1">
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
<li class="li4"></li>
</ul>
<ul class="ul2">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
样式根据自己的需要调一下，你需增加焦点绑定和清除定时器，你自学？

㈣简单的HTML+js图片轮播

h5代码：

css代码：

(4)js如何做图片轮播扩展阅读：

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

㈤ js里面可以写轮播图吗

当然可以，css3就可以写轮播，只不过js写的轮播图兼容性更好，使用顺畅。

js实现轮播图主要是搞懂原理，还有js知识就OK啦

图片切换是index值切换
换下一张按钮实现功能
到最后一张回到第一张
第一张往上翻回到最后一张
写效果就OK啦

㈥ javascript怎么做出图片轮播效果左右滑动的那部分，菜鸟求教

在左右图标上加入点击事件，具体你要使用那种效果你可以自己查手册，例如简单的情况下可以定义一个div里面有几个小的div用来放置图片，点击的时候，获取下一个div show然后将兄弟节点都hide就可以，jquery选择器里面可以使用index来算到了哪一个div,也可以为当前div添加属性pre="前一个图片id" next="后一个图片id",点击时获取这个ID就可以。

㈦ Js图片轮播思路

<ahref="http://liping.site">js图片轮播效果代码</a>

首先我们需要引入一张图片，通过更改img标签中src的值，达到图片切换功能。
html代码：<img src="http://liping.site/1.jpg" width="331" height="220" id="carousel">
在这我们需要理理自己的思路，一、图片从何而来二、怎么样使图片轮播，能够动起来
自定义一个数组，将需要的图片存在中间，代码如下：
var arr=new Array();

arr[0]='1.jpg';

arr[1]='2.jpg';

arr[2]='3.jpg';

arr[3]='4.jpg';
接着我们需要能够对图片进行操作定义一个函数，
function tImg(){var obj=document.getElementById('carousel');obj.src=''+arr[carIndex];}

准备好以后我们只需要获取数组的下标即可
定义初始化下标：var carIndex=0;
在函数中如果carIndex变量等于数组的字符串长度-1的情况下，赋给carIndex=0的初始数值。不是的情况下carIndex就+或者=1，代码如下：

function tImg(){

var obj=document.getElementById('carousel');

if(carIndex==arr.length-1){

carIndex=0;}

else{

carIndex+=1;}

obj.src=''+arr[carIndex];obj.onmouseover=function(){

}

逻辑关系理清楚后我们下一步就是使他们动起来，我们需要引入setInterval来控制函数的时间，代码如下：
var time=setInterval(tImg,3000);函数3秒执行一次
做到这里我们已经能过使图片进行切换了。

导航:首页 > 图片大全 > js如何做图片轮播

js如何做图片轮播

与js如何做图片轮播相关的资料