javascript 轮播 缩略图 怎么实现

JavaScript014

javascript 轮播 缩略图 怎么实现,第1张

javascript 轮播 缩略图 实现

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<style>

*{padding:0margin:0}

#content {width:400pxheight:500pxmargin:10px autoposition:relativeborder:1px solid #000color:redfont-size:20px}

#title, #bottom{position:absolutewidth:400pxheight:30pxline-height:30pxtext-align:centerfont-size:20pxbackground:#f1f1f1}

#bottom{bottom:0cursor:pointer}

#bottom span{display:inline-blockwidth:15pxheight:15pxborder-radius:15pxbackground:#000text-align:centerline-height:15pxposition:relative}

#bottom span.active{background: #FFFF33}

#bottom span div {position:absolutewidth:110pxheight:110pxtop:-125pxleft:-46pxdisplay:none}

#bottom span div:after{content:''position:absoluteleft:49pxbottom:-12pxborder-top:7px solid #fffborder-right:5px solid transparentborder-bottom:5px solid transparentborder-left:5px solid transparent}

#bottom span img {width:100pxheight:100pxborder:5px solid #fff}

#left, #right{position:absolutewidth:60pxheight:60pxborder-radius:60pxline-height:60pxfont-size:60pxbackground:#FFFF66font-weight:boldtext-align:centertop:50%margin-top:-25pxcolor:#fffcursor:pointerfilter(opacity:70)opacity:0.7}

#left:hover,#right:hover{filter(opacity:100)opacity:1}

#left{left:0px}

#right{right:0px}

#img{width:400pxheight: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 = 0i <aSpan.lengthi++ ) {

aSpan[i].className = ''

}

aSpan[num].className = 'active'

}

// 鼠标移入移出显示缩略图

for ( var i = 0i <aSpan.lengthi++ ) {

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">

<span><div><img src="img/1.png"/></div></span>

<span><div><img src="img/2.png"/></div></span>

<span><div><img src="img/3.png"/></div></span>

<span><div><img src="img/4.png"/></div></span>

</div>

<img src="" id="img"/>

</div>

</body>

</html>

轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。

工具/材料

Sublime Text

01

首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容

02

然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示

03

接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript

04

最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换

你这代码不全的吧，还有我个人感觉织梦内置的轮播效果不怎么理想。

现在很多封装好的JS类库可以使用，比如JQ等，初始化也非常的简单，不用你上边这么多代码，兼容性也没的说。

你看我站上的轮播图：

实现这个效果只需要简单的初始化代码：

new Marquee(

{

MSClass  : ["slider_box","contentList","previewList"],

Direction : 2,

Step  : 0.3,

Width  : 286,

Height  : 251,

Timer  : 20,

DelayTime : 2500,

AutoStart : true

})

当然，JS类库的功能是很强大的，可以实现各种轮播效果，你要实在不会，加我：1242351274，我告诉你怎么做。