怎么用html5+css3 实现图片轮播

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

2、这里是html文件，引入css和html代码文件，如图所示。

3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。

4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。

5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。

光是html的话很难实现轮播，轮播一般都是html+js才能完成。

给你一个最简单的html+js轮播例子：

html代码：

<div class="side" id = "lunbo">    

        <ul">    

            <li><img src="../images/1.jpg"></li>    

            <li><img src="../images/2.jpg"></li>    

            <li><img src="../images/3.jpg"></li>    

        </ul>    

</div>

js代码：

var li=document.getElementById('lunbo').getElementsByTagName("li")  

    var num=0  

    var len=li.length  

  

    setInterval(function(){  

        li[num].style.display="none"  

        num=++num==len?0:num  

        li[num].style.display="inline-block"  

  

},3000)//切换时间

(function ($) {

/* var i = 2

$(document).ready(function () {

var arry = ['images/headback/001.jpg', 'images/headback/002.jpg', 'images/headback/003.jpg', 'images/headback/004.jpg', 'images/headback/005.jpg', 'images/headback/006.jpg', ]

setInterval(

function () {

$("#div_pic").css("backgroundImage", "url(" + arry[i] + ")")

i++

if (i == 5) {

i = 0

}

}

, 5000)

})定时换背景图片的代码 */

//下面是图片切换代码

/*

var t

var speed = 2//图片切换速度

var nowlan = 0//图片开始时间

function changepic() {

var imglen = $("#div_pic").find("li").length

$("#div_pic").find("li").hide()

$("#div_pic").find("li").eq(nowlan).show()

nowlan = nowlan + 1 == imglen ? 0 : nowlan + 1

t = setTimeout("changepic()", speed * 1000)

}

onload = function () { changepic()}

$(document).ready(function ()

//鼠标在图片上悬停让切换暂停

$("#div_pic").hover(function () { clearInterval(t)})

//鼠标离开图片切换继续

$("#div_pic").mouseleave(function () { changepic()})

})

*/

//下面是图片轮播代码

/* var num = 0

$(function(){

$("#div_pic ol li").mouseover(function(e){

$(this).attr("class","current")

$(this).siblings().attr("class","")//兄弟节点的class属性设置为空

//alert($('ul').index())

num = $('ul').index() + 2

var index = $(this).index()//记录选定的li标签在ul中的索引

//图片会出现层叠现象为了显示当前的图片，把当前的图片的z-index 值设置为大于其他的兄弟元素

$("#div_pic ul li").eq(index).css({"left":"650px","zIndex":num})

$("#div_pic ul li").eq(index).siblings().css("zIndex",num-1)

//动画效果，图片从右侧飞入

$("#div_pic ul li").eq(index).animate({left:"0"},500)

})

})*/

//下面是可配置轮播动画代码

$.fn.slide=function(options){

var defaults= {

affect:1, //1：上下滚动2:幕布式3:左右滚动；4：淡入淡出

time: 5000, //间隔时间

speed:500,//动画快慢

dot_text:true,//按钮上有无序列号

}

var opts=$.extend(defaults,options)

var $this=$(this)

var ool=$("<div class='dot'><p></p></div>")

var $box=$this.find("ul")

var $li=$box.find("li")

var timer=null

var num=0

$this.append(ool)

$box.find("li").each(function(i){

ool.find("p").append($("<b></b>"))

if(opts.dot_text){

ool.find("b").eq(i).html(i+1)

}

})

ool.find("b").eq(0).addClass("cur")

switch(opts.affect){

case 1:

break

case 2:

$box.find("li").css("display","none")

break

case 3:

$box.css({"width":$li.eq(0).width()*$li.length})

$li.css("float","left")

break

case 4:

$box.find("li").css("display","none")

break

}

$box.find("li").eq(0).show(0)

ool.find("b").mouseover(function(){

num=$(this).index()

run ()

})

timer=setInterval(auto,opts.time)

function auto(){

num<$box.find("li").length-1?num++:num=0

run()

}

function run(){

ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur")

switch(opts.affect){

case 1:

$box.stop(true,false).animate({"top":-240*num},opts.speed)

break

case 2:

$box.find("li").css({"position":"absolute"})

$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed)

break

case 3:

$box.stop(true,false).animate({"left":-670*num},opts.speed)

break

case 4:

$box.find("li").css({"position":"absolute"})

$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed)

break

}

}

$this.mouseover(function(){

clearInterval(timer)

})

$this.mouseout(function(){

timer=setInterval(auto,opts.time)

})

}

}(jQuery))

---