本文目录一览：
- 1、javascript 轮播 缩略图 怎么实现
- 2、怎么用js的原生写法写出来一个轮播图呢？
- 3、JS轮播图，当鼠标悬停于图片时停止轮播，移开继续，代码怎么写？
- 4、求一个简单的js实现轮播代码
- 5、怎么用js做一个简单的轮播图
- 6、简单的HTML+js图片轮播?
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
怎么用js的原生写法写出来一个轮播图呢？
1：排出一个版，包含上下切换的标识和图片导航，所有图片隐藏，给图片第一张加一个class名，样式设为显示，图片导航的第一个加一个class名，加上背景色；
2：获取节点；
3：给向下切换写一个点击事件，点击图片切换到下一张，注意当图片切换到最后一张的时候会报错，所以必须要判断一下，当图片切换到最后一张的时候在，再次击会切换到第一张；
4：给向上切换写一个点击事件，注意当图片切换到第一张之后会报错，所以必须要判断一下，当图片切换到第一的时候，再次点击会切换到最后张，循环起来；
5：写一个定时器，定时器的播放顺序和向下切换一致，可以封装一个函数方便调用；
6：写鼠标划入事件，清除定时器；
7：写鼠标移出事件，定时器继续运行；
8：图片导航的点击事件
点击事件click
定时器setlnterval（）
if判断
for（）循环
JS轮播图，当鼠标悬停于图片时停止轮播，移开继续，代码怎么写？
我建议你使用插件，SuperSlide插件、layer插件、swiper插件，都有你的这个功能，还不用考虑兼容
求一个简单的js实现轮播代码
!DOCTYPE HTML
html
head
titleJS无缝滚动图片/title
meta charset=UTF-8 /
style type="text/css"
* {
margin: 0;
padding: 0;
}
#div2 {
margin: auto;
width: 602px;
overflow: hidden;
left: 200px;
}
#div1 {
position: relative;
left: 0px;
width: 1200px;
}
#div1 li {
list-style-type: none;
float: left;
width: 200px;
height: 180px;
}
img {
width: 200px;
height: 180px;
}
ul#ul1 {
position: relative;
}
/style
script type="text/javascript"
window.onload = function ()
{
var oUl = document.getElementById ('ul1');
var t,o;
var speed = 0;
var funny = function ()
{
t clearInterval(t);
t = setInterval (function ()
{
speed -= 200/11;
if(speed-200){
speed=0;
oUl.appendChild (oUl.children[0]);
t clearInterval(t);
t = null;
o clearTimeout(o);
o=setTimeout(funny,1000);
}
oUl.style.left = speed + "px";
}, 60);
}
funny ();
}
/script
/head
body
div id="div2"
div id="div1"
ul id="ul1"
liimg src="../../images/choose.png"
/li
liimg src="../../images/deck.png"
/li
liimg src="../../images/duel.png"
/li
liimg src="../../images/list.png"
/li
/ul
/div
/div
/body
/html
怎么用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);
}
}
简单的HTML+js图片轮播?
h5代码：
div id="wrap"
ul id="list"
li10/li
li9/li
li8/li
li7/li
li6/li
li5/li
li4/li
li3/li
li2/li
li1/li
/ul
/div
css代码：
style type="text/css"
@-webkit-keyframes move{
0%{left:-500px;}
100%{left:0;}
}
#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;
overflow: hidden;}
#list{position:absolute;left:0;top:0;padding:0;margin:0;
-webkit-animation:5s move infinite linear;width:200%;}
#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;
color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微软雅黑';}
#wrap:hover #list{-webkit-animation-play-state:paused;}
/style
扩展资料：
轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。
轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。
