JavaScript轮播图代码,完整的轮播图js代码
javascript 轮播 缩略图 怎么实现
javascript 轮播 缩略图 实现
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制作轮播图
轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。
工具/材料
Sublime Text
01
首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容
02
然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示
03
接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript
04
最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换
求一段简单的js图片轮播代码，刚学js，不要太复杂。谢谢！
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
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=""/script
script type="text/javascript" src=""/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="" target="_blank"img id="slide-img-1" src="" class="slide" alt="国考明起报名招2.7万人 首次仅面向体制外招录" style='width:600px'//a
/li
li
a target="_blank" href="" target="_blank"img id="slide-img-2" src="" class="slide" alt="中关村“变形记”：从电子卖场到7.2公里的创业大街" style='width:600px'//a
/li
li
a target="_blank" href="" target="_blank"img id="slide-img-3" src="" 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"
liem国考明起报名招2.7万人 首次仅面向体制外招录/em/li
liem中关村“变形记”：从电子卖场到7.2公里的创业大街/em/li
liem金星大聊两性话题 辣评娱乐圈男星：没我想睡的/em/li
/ul
/div
/div
/div
!--图片轮播结束--
!-- 代码 结束 --
script
$('.ck-slide').ckSlide({
autoPlay: true
});
/script
/body
/html
js如何制作图片轮播
工具/材料
Sublime Text
01
首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02
然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03
接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04
最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05
最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
求js轮播图代码,有详细注释
!DOCTYPE?html
html?lang="en"
head
meta?charset="UTF-8"
title/title
style?type="text/css"
*?{
padding:?0;
margin:?0;
list-style:?none;
border:?0;
}
.all?{
width:?500px;
height:?200px;
padding:?7px;
border:?1px?solid?#ccc;
margin:?100px?auto;
position:?relative;
}
.screen?{
width:?500px;
height:?200px;
overflow:?hidden;
position:?relative;
}
.screen?li?{
width:?500px;
height:?200px;
overflow:?hidden;
float:?left;
}
.screen?ul?{
position:?absolute;
left:?0;
top:?0px;
width:?3000px;
}
.all?ol?{
position:?absolute;
right:?10px;
bottom:?10px;
line-height:?20px;
text-align:?center;
}
.all?ol?li?{
float:?left;
width:?20px;
height:?20px;
background:?#fff;
border:?1px?solid?#ccc;
margin-left:?10px;
cursor:?pointer;
}
.all?ol?li.current?{
background:?#DB192A;
}
#arr?{
display:?none;
}
#arr?span?{
width:?40px;
height:?40px;
position:?absolute;
left:?5px;
top:?50%;
margin-top:?-20px;
background:?#000;
cursor:?pointer;
line-height:?40px;
text-align:?center;
font-weight:?bold;
font-family:?'黑体';
font-size:?30px;
color:?#fff;
opacity:?0.3;
border:?1px?solid?#fff;
}
#arr?#right?{
right:?5px;
left:?auto;
}
/style
/head
body
div?class="all"?id='box'
!--相框--
div?class="screen"
ul
li
img?src="images/41.jpg"?width="500"?height="200"?/
/li
li
img?src="images/42.jpg"?width="500"?height="200"?/
/li
li
img?src="images/43.jpg"?width="500"?height="200"?/
/li
li
img?src="images/44.jpg"?width="500"?height="200"?/
/li
li
img?src="images/45.jpg"?width="500"?height="200"?/
/li
/ul
ol
/ol
/div
div?id="arr"
span?id="left"lt;/span
span?id="right"gt;/span
/div
/div
!--?script?src="common.js"/script?--
script
function?my$(id)?{
return?document.getElementById(id);
}
function?setInnerText(element,?content)?{
if?(typeof?element.textContent?===?"undefined")?{
//IE浏览器
element.innerText?=?content;
}?else?{
element.textContent?=?content;
}
}
function?animate(element,?target)?{
//先干掉定时器
clearInterval(element.timeId);
element.timeId?=?setInterval(function?()?{
//时时的获取元素的当前的位置
var?current?=?element.offsetLeft;
//每次移动的步数
var?step?=?10;
//设置每次移动的步数是正数还是负数
step?=?current??target???step?:?-step;
//移动后的当前的位置
current?+=?step;
if?(Math.abs(target?-?current)??Math.abs(step))?{
element.style.left?=?current?+?"px";
}?else?{
clearInterval(element.timeId);
element.style.left?=?target?+?"px";
}
},?20);
}
//获取最外面的div
var?box?=?my$("box");
//获取相框
var?screen?=?box.children[0];
//获取相框的宽度
var?imgWidth?=?screen.offsetWidth;
//获取ul
var?ulObj?=?screen.children[0];
//获取ul中的li
var?ulLiObj?=?ulObj.children;
//获取ol
var?olObj?=?screen.children[1];
//获取的是左右焦点的div
var?arr?=?my$("arr");
//获取左边的按钮
var?left?=?my$("left");
//获取右边的按钮
var?right?=?my$("right");
var?pic?=?0;
//页面加载后先创建小按钮,根据ul中的li个个数来创建li,把li加入到ol中
for?(var?i?=?0;?i??ulLiObj.length;?i++)?{
//创建li
var?liObj?=?document.createElement("li");
//把li加入到ol中
olObj.appendChild(liObj);
setInnerText(liObj,?(i?+?1));?//兼容代码
//为每个ol中的li添加一个自定义属性存储索引值
liObj.setAttribute("index",?i);
//为每个li注册鼠标进入事件
liObj.onmouseover?=?function?()?{
//先把ol中所有的li的背景颜色全部干掉
for?(var?j?=?0;?j??olObj.children.length;?j++)?{
olObj.children[j].removeAttribute("class");
}
//设置当前鼠标进入的li有背景颜色
this.className?=?"current";
//移动ul
//获取鼠标进入的ol中的li的索引值
pic?=?this.getAttribute("index");
animate(ulObj,?-pic?*?imgWidth);
};
}
//第一个标签设置颜色
olObj.children[0].className?=?"current";
//追加一个图片到ul中
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//页面加载之后自动移动
var?timeId?=?setInterval(f1,?1000);
//鼠标进入
box.onmouseover?=?function?()?{
arr.style.display?=?"block";
clearInterval(timeId);
}
//鼠标离开
box.onmouseout?=?function?()?{
arr.style.display?=?"none";
timeId?=?setInterval(f1,?1000);
}
//右边焦点
right.onclick?=?f1;
function?f1()?{
//判断是否到达最后一张
if?(pic?==?ulLiObj.length?-?1)?{
//跳转到第一张
pic?=?0;
ulObj.style.left?=?-pic?*?imgWidth?+?"px";
}
pic++;
//调用动画函数
animate(ulObj,?-pic?*?imgWidth);
//刷一遍
for?(var?i?=?0;?i??olObj.children.length;?i++)?{
olObj.children[i].removeAttribute("class");
}
//第一个按钮的颜色
if?(pic?==?ulLiObj.length?-?1)?{
olObj.children[0].className?=?"current";
}?else?{
olObj.children[pic].className?=?"current";
}
};
//左边焦点
left.onclick?=?function?()?{
//判断是否到达第一张图片
if?(pic?==?0)?{
//跳转到第六张图片
pic?=?ulLiObj.length?-?1;
ulObj.style.left?=?-pic?*?imgWidth?+?"px";
}
pic--;
//调用动画函数
animate(ulObj,?-pic?*?imgWidth);
//刷一遍
for?(var?i?=?0;?i??olObj.children.length;?i++)?{
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className?=?"current";
}
/script
/body
/html