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

怎么用html5+css3 实现图片轮播,第1张

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

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

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

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

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

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

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

<!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的。

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

bootstrap也提供轮播模板。

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11638780.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存