正文
javascript轮播,JavaScript轮播图案例
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
javascript 轮播 缩略图 怎么实现
javascript 轮播 缩略图 实现
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
style
*{padding:0;margin:0;}
#content {width:400px;height:500px;margin:10px auto;position:relative;border:1px solid #000;color:red;font-size:20px;}
#title, #bottom{position:absolute;width:400px;height:30px;line-height:30px;text-align:center;font-size:20px;background:#f1f1f1;}
#bottom{bottom:0;cursor:pointer;}
#bottom span{display:inline-block;width:15px;height:15px;border-radius:15px;background:#000;text-align:center;line-height:15px;position:relative;}
#bottom span.active{background: #FFFF33;}
#bottom span div {position:absolute;width:110px;height:110px;top:-125px;left:-46px;display:none;}
#bottom span div:after{content:'';position:absolute;left:49px;bottom:-12px;border-top:7px solid #fff;border-right:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid transparent;}
#bottom span img {width:100px;height:100px;border:5px solid #fff;}
#left, #right{position:absolute;width:60px;height:60px;border-radius:60px;line-height:60px;font-size:60px;background:#FFFF66;font-weight:bold;text-align:center;top:50%;margin-top:-25px;color:#fff;cursor:pointer;filter(opacity:70);opacity:0.7;}
#left:hover,#right:hover{filter(opacity:100);opacity:1;}
#left{left:0px;}
#right{right:0px;}
#img{width:400px;height:500px;}
/style
script
window.onload = function () {
var bottom = $('bottom'),title = $('title'),
img = $('img'),left = $('left'),right = $('right');
var aSpan = bottom.getElementsByTagName('span');
var aDiv = bottom.getElementsByTagName('div');
var arr = ['图片一','图片二','图片三', '图片四'];
var num = 0;
// 初始化
picTab();
// 点击下一张
right.onclick = function () {
if (num === aDiv.length - 1) num = -1;
num++;
picTab();
}
// 点击上一张
left.onclick = function () {
if (num === 0) num = aDiv.length;
num--;
picTab();
}
function picTab() {
title.innerHTML = arr[num];
img.src = 'img/' + (num + 1) + '.png';
for ( var i = 0; i aSpan.length; i++ ) {
aSpan[i].className = '';
}
aSpan[num].className = 'active';
}
// 鼠标移入移出显示缩略图
for ( var i = 0; i aSpan.length; i++ ) {
aSpan[i].index = i;
aSpan[i].onmouseover = function () {
aDiv[this.index].style.display = 'block';
}
aSpan[i].onmouseout = function () {
aDiv[this.index].style.display = 'none';
}
aSpan[i].onclick = function () {
num = this.index;
picTab();
}
}
function $(id) { return document.getElementById(id);}
}
/script
/head
body
div id="content"
div id="title"带缩略图的轮播/div
div id="left"/div
div id="right"/div
div id="bottom"
spandivimg src="img/1.png"//div/span
spandivimg src="img/2.png"//div/span
spandivimg src="img/3.png"//div/span
spandivimg src="img/4.png"//div/span
/div
img src="" id="img"/
/div
/body
/html
JavaScript图片轮播时，点击下面小图时，如何做到与时间同步切换（把b变量改为点击图片的num）？求大神~
看这代码和你的意思，3秒切换一张图片，循环切换，当点击小图片时，是想立刻显示当前点击的图片。实现思路：对下面的小图片添加点击事件，在循环执行切换时要判断。伪代码如下：
function update(index){
//在这块写changeimg方法的代码，作用只是显示index这张图片
}
//定义变量
var current = 1；//当前显示的图片
var isRun = true; //是否进行切换图片，此变量是为点击小图片显示而准备
//循环执行，切换图片
function showImage(){
setTimeout(showImage, 3000);
if(isRun){
update(index++);
}
}
//小图片添加点击事件,逐个添加事件
img.addEventListener("click", doClick（i）, false);
img.addEventListener("mouseout", continueLoop, false);
//以上为示例，其他自行添加，i为小图片的顺序号，也就是需要显示图片的名称
//
function doClick(i){
isRun = false;
index = i;
update(index);
}
//
function continueLoop(){
isRun = true;
}
//最后，初始化完毕，调用循环方法
showImage();
大意就这样，当鼠标离开，继续循环，点击停止循环，注意事件添加。以上代码不保证完全正确，一般不用纯js开发，所以不是很熟，见谅！
前端JavaScript中是不是学会了轮播图就等于学会了JS？
当然不是，js大着呢……轮播图才到哪。。。
学好js要把基础打牢，高级程序设计和权威指南要带着看，不管能不能吃透彻，但最起码得看过至少一遍吧。
想练习就做项目，项目驱动比自己自学可能会更有力。然后你可以继续向下学习ES6、前端自动化、基本的node知识、webpack、一些前端框架等等（当然这些都是你对HTML，css很熟练的情况下，这些基础一定要牢，不然一个最简单的切图都不会，那肯定不是个合格的前端。。。），一起进步一起学习，共勉~
JS制作轮播图
轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。
工具/材料
Sublime Text
01
首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容
02
然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示
03
接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript
04
最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换
