html5图片自动滑动,怎样实现H5+CSS3手指滑动切换图片的示例代码

包含3个文件：html、slider-H5.js、jquery.js。在html中可配置滑动参数。具体代码如下：

HTML代码：

/>

H5手指滑动切换图片

ul,li{margin:0;padding:0;} @media screen and (min-width:240px) { html,

body{ font-size:9px; } } @media screen and (min-width:320px) { html, body{

font-size:12px; } } @media screen and (min-width:480px) { html, body{ font-size:18px;

} } @media screen and (min-width:640px) { html, body{ font-size:24px; }

} @media screen and (min-width:960px) { html, body{ font-size:36px; } }

div.imgbox{width:25rem;height:16.5rem;overflow:hidden;margin:0 auto;} div.imgbox

ul{clear:both;width:75rem;display: inline-block;} div.imgbox ul li{float:left;width:25rem;height:16.5rem;overflow:hidden;text-align:center;}

div.imgbox ul li img{width:24rem;height:16.5rem;} #page{color:red;}

• 

• 

• 

这里通过回调显示当前滚动到多少页:

0

(function() {

/*

注意：$.mggScrollImg返回的scrollImg对象上有

next，prev，go三个方法，可以实现外部对滚动索引的控制。

如：scrollImg.next();//会切换到下一张图片

scrollImg.go(0);//会切换到第一张图片

*/

var scrollImg = $.mggScrollImg('.imgbox ul', {

loop: true,

//循环切换

auto: true,

//自动切换

auto_wait_time: 3000,

//轮播间隔

scroll_time: 300,

//滚动时长

callback: function(ind) { //这里传过来的是索引值

$('#page').text(ind + 1);

}