HTML中的图片轮播怎么做？

html-css012

HTML中的图片轮播怎么做？,第1张

可以上jquery插件库这个网站看看，大部分资源是免费的。轮播图也有好多。

bootstrap也提供轮播模板。

自己写的话，假如放3张轮播图，pic1，pic2，pic3。创建一个ul，ul中放5张图片，顺序是pic3，pic1，pic2，pic3，pic1，这样衔接起来。设置ul的宽度是500%，li的宽度是20%，这样图片就能一字排开，设置ul的父元素的样式为overflow:hidden再用CSS3的动画属性，让li中的图片元素位移或者让ul位移。

可以通过输入代码来操作。

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进，先来贴一发代码：

<!DOCTYPE HTML>

<html>

<head>

<link rel="stylesheet" type="text/css" href="./css/init2.css">

<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="./js/test2.js"></script>

</head>

<body>

<div id="layout">

<header  class="clearfix">

<div id="banner">

<ul id="banner_img">

<li><img src="./img/s1.jpg"></li>

<li><img src="./img/s2.jpg"></li>

<li><img src="./img/s3.jpg"></li>

</ul>

</div>

</header>

</div>

</body>

</html>

在这个html的目录下有三个同级的文件夹，img中放图片，css和js分别存放这个网页的css文件和js文件，这里用到了jquery，记得引入顺序，jquery一定要放在其他js前面。

html代码很简单，不做过多解释。

看一下引入的css，init2.css

*{

margin: 0px

padding: 0px

}

#layout{

width: 960px

margin: 0 auto

}

#banner{

position: relative

overflow: hidden

width: 600px

height: 200px

border-radius: 10px

border: 2px solid black

}

#banner_img li{

float: left

list-style-type: none

}

#index{

position: absolute

right: 8px

bottom: 8px

}

#index li{

float: left

width: 16px

height: 16px

text-align: center

line-height: 16px

border-radius: 5px

border:1px solid #FF7300

background: white

list-style: none

margin-left: 8px

cursor: pointer

}

.clearfix:after{

content: ""

height: 0px

display: block

clear:both

}

.on

{

background:#FF7300

}

css基本上和前面的html中的类对应，claerfix来清除浮动，on是代表轮播图片的索引中当前的正播放的图片的索引，其实就改个背景，这里的索引是后面动态加上去的，索引在html中看不到。主要思路就是把装图片的容器设置成overflhidden

下面是一种比较简单的实现，利用jquery的fadeIn和fadeOut效果来实现。

//fadeIn and fadeOut

var time

var index = 1

var tolnum = 3

$(function(){

<span style="white-space:pre"> </span>setInterval("showBanner("+tolnum+")",3000)

})

function showBanner(n)

{

<span style="white-space:pre"> </span>var ul = $("#banner_img")

<span style="white-space:pre"> </span>ul.children().fadeOut("slow")

<span style="white-space:pre"> </span>ul.children().eq(index).fadeIn("slow")

<span style="white-space:pre"> </span>index = index+1>n-1 ? 0 : index+1

}

恩，不知道为什么到最后一张图片的时候会产生没有淡出的bug，不太懂，请大家指教。

第二种方法是利用jquery的animation来实现margin属性的过渡。

init()

function init()

{

$(function(){

var index = 0

var adTime

var len = $("#banner_img li").length

addIndex(len)

var bannerLi = $("#index li")

//handle index

$("#index li").mouseover(function() {

index = $("#index li").index(this)

showImgs(index)

})

//toggleInterval

$("#banner").hover(function(){

clearInterval(adTimer)

},function(){

adTimer=setInterval(function(){

//alert(index)

showImgs(index)

index++

if(index==len){

index=0

}

},2000)

}).trigger('mouseleave')

})

}

//auto add index

function addIndex(n)

{

var ul = $("<ul id=\"index\"></ul>")

for(var i=1i<=ni++)

{

var li = $("<li></li>")

li.append(function(num){

return num

}(i))

ul.append(li)

}

ul.children().first().addClass('on')

$("#banner_img").append(ul)

}

function showImgs(index)

{

var adwidth=$("#banner_img>li:first").width()

$("#banner_img").stop(true, false)

//$("#banner_img").css('margin-left', -index*adwidth+"px")

$("#banner_img").animate({

"marginLeft":-adwidth*index+"px"

},1000)

$("#index li").removeClass('on').eq(index).addClass('on')

}

hover（）是一种代替mouseenter和mouseleave的方法，听说比较好用。trigger（）来触发当前对象的一个状态，这里要先触发一次mouseleave的状态来初始化计时器，因为这里的设定是当鼠标移到$("#banner")上就销毁定时器，锁定当前图片，移开鼠标就重新添加定时器。<pre name="code" class="javascript"> $("#banner_img").animate({

"marginLeft":-adwidth*index+"px"

},1000)

这了就是对jquery中animation方法的使用，通过传进来的index来改变banner_img的margin，这里是margin-left，所以图片就会从右往左刷（需要设置浮动），如果需要从下往上刷就设置margin-top就好了，还有我发现js中动态添加margin是不能触发css的transition的。