手机自动轮播图 html5,HTML5 轮播图

效果图

效果图.png

ACTION

/**

* 轮播图

*/

@RequestMapping(value = "toShopping", method = RequestMethod.GET)

public Object toShopping(String meid) {

ModelAndView mv = null;

try {

List imgList = new ArrayList();

imgList.add("http://g.hiphotos.baidu.com/baike/c0%3Dbaike60%2C5%2C5%2C60%2C20%3Bt%3Dgif/sign=413a474a35fae6cd18b9a3336eda6441/b17eca8065380cd747320490a144ad345982819b.jpg");

imgList.add("http://imgsrc.baidu.com/imgad/pic/item/83025aafa40f4bfb6ad1fc5c094f78f0f73618b0.jpg");

imgList.add("http://f8.topitme.com/8/1a/3f/1110239301cf63f1a8o.jpg");

imgList.add("http://imgsrc.baidu.com/imgad/pic/item/241f95cad1c8a786de2be62a6d09c93d70cf5094.jpg");

mv = new ModelAndView("/shopping/commodityDetails");

mv.addObject("imgList", imgList);

} catch (Exception e) {

}

return mv;

}

HTML

0)>


#list>

#if>

0)>

#if>

#list>

#if>

JS

var t = n = 0,

count;

$(document).ready(function() {

// 获取图片标签长度

count = $("#banner_list a").length;

// 不是当前显示的图片隐藏

$("#banner_list a:not(:first-child)").hide();

// 点击切换图片

$("#banner li").click(function(e) {

var target = e.target; //获取对应目标元素

var children = $("#ul").children(); //获取ul里面的所有li元素集合

var index = 0;

for(i = 0;i

if(target == children[i]) { //对比目标元素和li集合元素

index = i; //输出目标元素的下标

break;

}

}

n = index;

if (index >= count) return;

moveNext(index);

});

// 轮播间隔时间

t = setInterval("showAuto()", 10000);

// 切换图片

function moveNext(val){

// 淡入淡出效果

$("#banner_list a").filter(":visible").fadeOut(0).parent().children().eq(val).fadeIn(500);

// 响应点击

$("#ul").children().eq(val).toggleClass("on");

// 切换按钮的时候让上一个按钮回归原来的样式

$("#ul").children().eq(val).siblings().removeAttr("class");

}

//手机触摸效果

var startX,endX,moveX;

function touchStart(event){

var touch = event.touches[0];

startX = touch.pageX;

}

function touchMove(event){

var touch = event.touches[0];

endX = touch.pageX;

}

function touchEnd(event){

moveX = startX - endX;

if(moveX>50){

if (n >= (count-1)){

n = 0;

moveNext(n);

}else{

++n;

moveNext(n);

}

}else if(moveX

if (n <= 0){

n = count-1;

moveNext(n);

}else{

--n;

moveNext(n);

}

}

}

document.getElementById("banner_list").addEventListener("touchstart",touchStart,false);

document.getElementById("banner_list").addEventListener("touchmove",touchMove,false);

document.getElementById("banner_list").addEventListener("touchend",touchEnd,false);

});

$("#banner").hover(

function() {

clearInterval(t)

},

function() {

t = setInterval("showAuto()", 10000);

}

);

// 自动轮播

function showAuto() {

n = n >= count ? 0 : ++n;

$("#banner li").eq(n).trigger('click');

}

CSS

body {

background: rgba(165, 165, 165, 0.16);

padding: 0;

margin: 0;

width: 100%;

height: auto;

}

#banner {

position: relative;

}

#banner_list {

width: 100%;

height: 400px;

overflow: hidden;

}

img {

width: 100%;

height: 400px;

padding: 0;

margin: 0 auto;

}

ul {

width: 33%;

margin-top: 0;

margin-bottom: 10px;

position: absolute;

bottom: 10px;

margin: auto 33%;

list-style-type: none;

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: center;

}

li {

margin-right: 20px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

width: 15px;

height: 15px;

background: rgba(255, 255, 255, .38);

border: 1px solid rgba(0, 0, 255, .1);

cursor: pointer;

}

.on {

background: #FFF;

}