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

‘壹’ js如何制作图片轮播

工具/材料

Sublime Text

01
首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02
然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03
接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04
最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05
最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图

‘贰’ 简单的HTML+js图片轮播

h5代码：

css代码：

(2)简单的js图片轮播扩展阅读：

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

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

‘叁’ 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轮播图片原理都有哪些。原理可以了，发代码不太美观

首先init()函数用于初始化images数组和image的值，本例中主要是利用setSrc()设置图片的src属性值，这样就达到了图片的切换，图片的轮播是使用定时器来时显的！setInterval('play()',500)的意思是每0.5s调用一次play()函数！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
var timeID;
var image;
var current = 0;
var images = new Array(5);
function init(){
for (var i=1;i<=5;i++){
images[i] = new Image(450,550);
images[i].src = "pictures/"+i+".jpg";
}
image = document.images[0];
}
function setSrc(i){
current = i;
//设置图片src的属性，实现图片的切换
image.src = images[i].src;
}
function pre(){
if (current <= 0){
alert('已经是第一张了');
}else{
current--;
setSrc(current);
}
}
function next(){
if (current >= 5){
alert('已经是最后一张了');
}else{
current++;
setSrc(current);
}
}
function play(){
if (current >= 5){
current = 0;
}
setSrc(++current);
}
</script>
<body onload="init()">
<input type="button" value="第一张" onclick="setSrc(1)">
<input type="button" value="上一张" onclick="pre()">
<input type="button" value="下一张" onclick="next()">
<input type="button" value="最后一张" onclick="setSrc(5)">
<input type="button" value="幻灯播放" onclick="timeID=setInterval('play()',500)">
<input type="button" value="停止播放" onclick="clearInterval(timeID)">
<div style="border:1px solid blue;width:450px; height:550px;" id="myPic">
<img src="pictures/1.jpg" />
</div>
</body>
</html>

‘陆’ 求一段简单的js图片轮播代码，刚学js，不要太复杂。谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="焦点图" />
<meta name="description" content="焦点图代码" />
<title>焦点图</title>

<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/jquery.js"></script>
<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/slide.js"></script>

</head>
<body>


<style>
.ck-slide ul { margin: 0; padding: 0; list-style-type: none;}
.ck-slide { position: relative; overflow: hidden;}
.ck-slide ul.ck-slide-wrapper { position: absolute; top: 0; left: 0; z-index: 1; margin: 0; padding: 0;}
.ck-slide ul.ck-slide-wrapper li { position: absolute;}
.ck-slide .ck-prev, .ck-slide .ck-next { position: absolute; top: 50%; z-index: 2; width: 35px; height: 70px; margin-top: -35px; border-radius: 3px; opacity: .15; background: red; text-indent: -9999px; background-repeat: no-repeat; transition: opacity .2s linear 0s;}
.ck-slide .ck-prev { left: 5px; background: url(templets/default/images/arrow-left.png) #000 50% no-repeat;}
.ck-slide .ck-next { right: 5px; background: url(templets/default/images/arrow-right.png) #000 50% no-repeat;}
.ck-slidebox { position: absolute; left: 50%; bottom: 0px; z-index: 30; hright:30px;width:100%}
.ck-slidebox ul { height: 30px; padding: 0 4px; background: rgba(0,0,0,0.5); text-align:center}
.ck-slidebox ul li { float: left; height: 30px; margin: 0px 4px;line-height:30px;color:#fff;display:none}
.ck-slidebox ul li em { display: block; width: 100%; height: 30px; cursor: pointer; font-size:14px}
.ck-slidebox ul li.current em {color:#fff }
.ck-slidebox ul li em:hover { }
.ck-slide { width: 600px; height: 400px; margin: 0 auto;}

.ck-slide ul.ck-slide-wrapper { height: 400px;}
.ck-slide-wrapper li {display:none}
.ck-slidebox ul li{display:none}
.current{display:block!important}
</style>
<div class="ck-slide">

<ul class="ck-slide-wrapper">
<li>

<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/307.html" target="_blank"><img id="slide-img-1" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014114S60-L.jpg" class="slide" alt="国考明起报名招2.7万人首次仅面向体制外招录" style='width:600px'/></a>

</li>
<li>

<a target="_blank" href="http://www.jinchuwenhua.com//a/xinwen/2015/1014/289.html" target="_blank"><img id="slide-img-2" src="http://www.jinchuwenhua.com/uploads/151014/1-151014092105J3.jpg" class="slide" alt="中关村“变形记”：从电子卖场到7.2公里的创业大街" style='width:600px'/></a>

</li>
<li>

<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/290.html" target="_blank"><img id="slide-img-3" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014092F30-L.jpg" class="slide" alt="金星大聊两性话题辣评娱乐圈男星：没我想睡的" style='width:600px'/></a>

</li>

</ul>

<a href="javascript:" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:" class="ctrl-slide ck-next">下一张</a>

<div class="ck-slidebox">

<div class="slideWrap">

<ul class="dot-wrap">

<li><em>国考明起报名招2.7万人首次仅面向体制外招录</em></li>
<li><em>中关村“变形记”：从电子卖场到7.2公里的创业大街</em></li>
<li><em>金星大聊两性话题辣评娱乐圈男星：没我想睡的</em></li>

</ul>

</div>

</div>

</div>



<script>

$('.ck-slide').ckSlide({

autoPlay: true
});

</script>

</body>
</html>

‘柒’ JS图片轮播的原理。。。

‘捌’ JS简单的轮播图，像图片这种怎么做

如果你想要上下同时切换的方法也很简单，只要你定ID的时候有点规律就好了，例如img1和imgs1，function asd(target){
document.getElementById("img"+target).style.display="none";
document.getElementById("imgs"+target).style.display="none";
}
那么只要target传入图片序号如：1；那么就可以实现两张图片同时隐藏显示了；

导航:首页 > 好看图片 > 简单的js图片轮播

简单的js图片轮播

工具/材料

与简单的js图片轮播相关的资料