js如何制作图片轮播

JavaScript012

js如何制作图片轮播,第1张

工具/材料

Sublime Text

01

首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示

02

然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头

03

接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明

04

最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能

05

最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图

<!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/htmlcharset=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: 0padding: 0list-style-type: none}

.ck-slide { position: relativeoverflow: hidden}

.ck-slide ul.ck-slide-wrapper { position: absolutetop: 0left: 0z-index: 1margin: 0padding: 0}

.ck-slide ul.ck-slide-wrapper li { position: absolute}

.ck-slide .ck-prev, .ck-slide .ck-next { position: absolutetop: 50%z-index: 2width: 35pxheight: 70pxmargin-top: -35pxborder-radius: 3pxopacity: .15background: redtext-indent: -9999pxbackground-repeat: no-repeattransition: opacity .2s linear 0s}

.ck-slide .ck-prev { left: 5pxbackground: url(templets/default/images/arrow-left.png) #000 50% no-repeat}

.ck-slide .ck-next { right: 5pxbackground: url(templets/default/images/arrow-right.png) #000 50% no-repeat}

.ck-slidebox { position: absoluteleft: 50%bottom: 0pxz-index: 30hright:30pxwidth:100%}

.ck-slidebox ul { height: 30pxpadding: 0 4pxbackground: rgba(0,0,0,0.5)text-align:center}

.ck-slidebox ul li { float: leftheight: 30pxmargin: 0px 4pxline-height:30pxcolor:#fffdisplay:none}

.ck-slidebox ul li em { display: blockwidth: 100%height: 30px cursor: pointerfont-size:14px}

.ck-slidebox ul li.current em {color:#fff }

.ck-slidebox ul li em:hover { }

.ck-slide { width: 600pxheight: 400pxmargin: 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>

<a href="http://liping.site">js图片轮播效果代码</a>

首先我们需要引入一张图片，通过更改img标签中src的值，达到图片切换功能。

html代码：<img src="http://liping.site/1.jpg" width="331" height="220" id="carousel">

在这我们需要理理自己的思路，一、图片从何而来 二、怎么样使图片轮播，能够动起来

自定义一个数组，将需要的图片存在中间，代码如下：

var arr=new Array()

arr[0]='1.jpg'

arr[1]='2.jpg'

arr[2]='3.jpg'

arr[3]='4.jpg'

接着我们需要能够对图片进行操作定义一个函数，

function tImg(){var obj=document.getElementById('carousel')obj.src=''+arr[carIndex]}

准备好以后我们只需要获取数组的下标即可

定义初始化下标：var carIndex=0

在函数中如果carIndex变量等于数组的字符串长度-1的情况下，赋给carIndex=0的初始数值。不是的情况下carIndex就+或者=1，代码如下：

function tImg(){

var obj=document.getElementById('carousel')

if(carIndex==arr.length-1){

carIndex=0}

else{

carIndex+=1}

obj.src=''+arr[carIndex]obj.onmouseover=function(){

}

逻辑关系理清楚后我们下一步就是使他们动起来，我们需要引入setInterval来控制函数的时间，代码如下：

var time=setInterval(tImg,3000)函数3秒执行一次

做到这里我们已经能过使图片进行切换了。