javascript手机轮播幻灯片

javascript手机轮播幻灯片

    现在用html5手机端的web的企业越来越多了,传统的PC版的轮播广告已经无法在手机端适用了,因为手机的触摸事件和PC端用鼠标操作的事件是不同的,所以我们就需要针对移动端的设备触摸事件做相应的轮播特效广告。大家可以去看下易迅的:http://m.yixun.com/t/ 和淘宝的http://m.taobao.com/ 他们的轮播刚刚就是针对手机做的,在手机观看下你触摸滑动屏幕就可以切换幻灯片,但是在电脑上就没办法操作。


    大概去年的是我做个一个跟淘宝手机版差不多的项目,当时就需要用到这个,所以上网找了下相关方面的插件,当时找到一个非常不错的javascript写的原生插件,代码写的非常标准简洁,压缩后的大小只有4k,调用方法也简单,在这里应该有人会问为什么不用Jquery的插件,其实一开始我自己用jquery就写了这个效果,但是后面觉得就单单为了这个效果就要加载jquery这个库90k+,对整个页面的大小造成了很大的负担,所以还是觉得用原生js写会好些,其实做手机版的网站,最好所有的js都用原生js写,因为这样整个前端页面就会控制在一个页面10k都可能不到的情况。可以完全适应我国坑爹的中国移动2G网络。

    作者的博客我是真的不知道,过了快一年了,完全忘记这个作者了博客地址,只知道他叫Brad Birdsall真心对不起作者!

 

html代码:

<div class="addWrap">
    <div class="swipe" id="mySwipe">
        <div class="swipe-wrap">
            <div><a href="javascript:;"><img src="images/1.jpg" width="300" height="150" /></a></div>
            <div><a href="javascript:;"><img src="images/2.jpg" width="300" height="150" /></a></div>
            <div><a href="javascript:;"><img src="images/3.jpg" width="300" height="150" /></a></div>
        </div>
    </div>
    <ul id="position">
      <li class="cur"></li>
      <li class=""></li>
      <li class=""></li>
    </ul>
</div>


css代码

.addWrap{width:300px;background:#fff;margin:auto;position:relative;}
.addWrap .swipe{height:150px;overflow: hidden;visibility: hidden;position:relative;}
.addWrap .swipe-wrap{overflow:hidden;position:relative;}
.addWrap .swipe-wrap > div {float: left;width: 100%;position:relative;}
#position{padding:0;text-align:center;}
#position li{width:10px;height:10px;margin:0 3px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:#AFAFAF;}
#position li.cur{background-color:#FF0000;}


由于js源码太长,我这里就直接写调用方法吧,源码我放在压缩包里,大家可以去里面查看,我也已经把自己的注释写进去了,希望能帮助一些能理解代码。(调用方法必须放在DOM后面,请注意

var bullets = document.getElementById('position').getElementsByTagName('li');
var banner = Swipe(document.getElementById('mySwipe'), {
	auto: 2000,
	continuous: true,
	disableScroll:false,
	callback: function(pos) {
		var i = bullets.length;
		while (i--) {
		  bullets[i].className = ' ';
		}
		bullets[pos].className = 'cur';
	}
});


github地址:https://github.com/owen-hong/mobile-slider 

下载地址:https://github.com/owen-hong/mobile-slider/archive/master.zip 


转载请注明来自 520UED http://www.520ued.com/article/53882be5b992a7c43f5c2049

comments powered by Disqus