经验分享程序开发文档资料数据资源其它资源

wap网页手机触屏js图片滑动滑动滚动特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 wap网页手机触屏js图片滑动滑动滚动特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

wap网页手机触屏js图片滑动滑动滚动特效代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>wap网页手机触屏js图片滑动</title>
<script type="text/javascript" src="js/scroll.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.scroll{width:480px;height:181px;margin:20px auto 0 auto; position:relative;overflow:hidden;}
.mod_01{float:left;width:480px;}
.mod_01 img{display:block;width:480px;height:181px;}
.dotModule_new{padding:0 5px;height:11px;line-height:6px;-webkit-border-radius:11px;background:rgba(45,45,45,0.5);position:absolute;bottom:5px;right:10px;z-index:11;}
#slide_01_dot{text-align:center;margin:3px 0 0 0;}
#slide_01_dot span{display:inline-block;margin:0 3px;width:5px;height:5px;vertical-align:middle;background:#f7f7f7;-webkit-border-radius:5px;}
#slide_01_dot .selected{background:#66ff33;}
</style>

</head>
<body>

<div class="scroll">
	<div class="slide_01" id="slide_01">
		<div class="mod_01"><a href="#"><img src="images/51352100.jpg" alt="腾讯视频"></a></div>
		<div class="mod_01"><a href="#"><img src="images/50849300.jpg" alt="神雕侠侣【金庸正版】"></a></div>
		<div class="mod_01"><a href="#"><img src="images/54330800.jpg" alt="装机必备"></a></div>
		<div class="mod_01"><a href="#"><img src="images/21651800.jpg" alt="优酷视频播放器"></a></div>
		<div class="mod_01"><a href="#"><img src="images/52208700.jpg" alt="天翼精品"></a></div>
		<div class="mod_01"><a href="#"><img src="images/02856300.jpg" alt="梦想海贼王(送路飞)"></a></div>
		<div class="mod_01"><a href="#"><img src="images/92191400.jpg" alt="折800"></a></div>
		<div class="mod_01"><a href="#"><img src="images/44452000.jpg" alt="安全管家"></a></div>
	</div>
	<div class="dotModule_new">
		<div id="slide_01_dot"></div>
	</div>
</div>

<script type="text/javascript">
if(document.getElementById("slide_01")){
	var slide_01 = new ScrollPic();
	slide_01.scrollContId   = "slide_01"; //内容容器ID
	slide_01.dotListId      = "slide_01_dot";//点列表ID
	slide_01.dotOnClassName = "selected";
	slide_01.arrLeftId      = "sl_left"; //左箭头ID
	slide_01.arrRightId     = "sl_right";//右箭头ID
	slide_01.frameWidth     = 480;
	slide_01.pageWidth      = 480;
	slide_01.upright        = false;
	slide_01.speed          = 10;
	slide_01.space          = 30; 
	slide_01.initialize(); //初始化
}
</script>
</body>
</html>

JS代码(scroll.js):

//滚动图片构造函数function ScrollPic(scrollContId,arrLeftId,arrRightId,dotListId,listType){
	this.scrollContId = scrollContId;
	//内容容器ID this.arrLeftId = arrLeftId;
	//左箭头ID this.arrRightId = arrRightId;
	//右箭头ID this.dotListId = dotListId;
	//点列表ID this.listType = listType;
	//列表类型 this.dotClassName = "dotItem";
	//点className this.dotOnClassName = "dotItemOn";
	//当前点className this.dotObjArr = [];
	this.listEvent = "onclick";
	this.circularly = true;
	//循环滚动（无缝循环） this.pageWidth = 0;
	//翻页宽度 this.frameWidth = 0;
	//显示框宽度 this.speed = 10;
	//移动速度(单位毫秒，越小越快) this.space = 10;
	//每次移动像素(单位px，越大越快) this.scrollWidth = 5;
	//横向滚动宽度 this.upright = false;
	//垂直的滚动 this.pageIndex = 0;
	this.autoPlay = true;
	this.autoPlayTime = 2;
	//秒 this._autoTimeObj;
	this._scrollTimeObj;
	this._state = "ready";
	// ready | floating | stoping this.stripDiv = document.createElement("DIV");
	this.lDiv01 = document.createElement("DIV");
	this.lDiv02 = document.createElement("DIV");
}
;
	ScrollPic.prototype ={
	version:"1.41",author:"mengjia",pageLength:0,touch:true,initialize:function(){
	//初始化 var thisTemp = this;
	if(!this.scrollContId){
	throw new Error("必须指定scrollContId.");
	return;
}
;
	this.scDiv = this.$(this.scrollContId);
	if(!this.scDiv){
	throw new Error("scrollContId不是正确的对象.(scrollContId = \""+ this.scrollContId +"\")");
	return;
}
;
	this.scDiv.style[this.upright?'height':'width'] = this.frameWidth + "px";
	this.scDiv.style.overflow = "hidden";
	//HTML this.lDiv01.innerHTML = this.scDiv.innerHTML;
	this.scDiv.innerHTML = "";
	this.scDiv.appendChild(this.stripDiv);
	this.stripDiv.appendChild(this.lDiv01);
	if(this.circularly){
	//无缝循环 this.stripDiv.appendChild(this.lDiv02);
	this.lDiv02.innerHTML = this.lDiv01.innerHTML}
;
	this.stripDiv.style.overflow = "hidden";
	this.stripDiv.style.zoom = "1";
	this.stripDiv.style[this.upright?'height':'width'] = "32766px";
	if(!this.upright){
	this.lDiv01.style.cssFloat = "left";
	this.lDiv01.style.styleFloat = "left";
	this.lDiv01.style.overflow = "hidden";
}
;
	this.lDiv01.style.zoom = "1";
	if(this.circularly && !this.upright){
	//无缝循环设置CSS this.lDiv02.style.cssFloat = "left";
	this.lDiv02.style.styleFloat = "left";
	this.lDiv02.style.overflow = "hidden";
}
;
	this.lDiv02.style.zoom = "1";
	this.addEvent(this.scDiv,"mouseover",function(){
	thisTemp.stop()}
);
	this.addEvent(this.scDiv,"mouseout",function(){
	thisTemp.play()}
);
	//Arrowhead event //left if(this.arrLeftId){
	this.alObj = this.$(this.arrLeftId);
	if(this.alObj){
	this.addEvent(this.alObj,"mousedown",function(){
	thisTemp.rightMouseDown()}
);
	this.addEvent(this.alObj,"mouseup",function(){
	thisTemp.rightEnd()}
);
	this.addEvent(this.alObj,"mouseout",function(){
	thisTemp.rightEnd()}
);
}
;
}
;
	//right if(this.arrRightId){
	this.arObj = this.$(this.arrRightId);
	if(this.arObj){
	this.addEvent(this.arObj,"mousedown",function(){
	thisTemp.leftMouseDown()}
);
	this.addEvent(this.arObj,"mouseup",function(){
	thisTemp.leftEnd()}
);
	this.addEvent(this.arObj,"mouseout",function(){
	thisTemp.leftEnd()}
);
}
;
}
;
	var pages = Math.ceil(this.lDiv01[this.upright?'offsetHeight':'offsetWidth'] / this.frameWidth),i,tempObj;
	this.pageLength = pages;
	//dot if(this.dotListId){
	this.dotListObj = this.$(this.dotListId);
	this.dotListObj.innerHTML = "";
	if(this.dotListObj){
	for(i=0;
	i<pages;
	i++){
	tempObj = document.createElement("span");
	this.dotListObj.appendChild(tempObj);
	this.dotObjArr.push(tempObj);
	if(i==this.pageIndex){
	tempObj.className = this.dotOnClassName;
}
else{
	tempObj.className = this.dotClassName;
}
;
	if(this.listType == 'number'){
	tempObj.innerHTML = i+1;
}
else if(typeof (this.listType) =='string' ){
	tempObj.innerHTML = this.listType;
}
else{
	tempObj.innerHTML='';
}
;
	tempObj.title = "第" + (i+1) + "页";
	tempObj.num = i;
	tempObj[this.listEvent] = function(){
	thisTemp.pageTo(this.num)}
;
}
;
}
;
}
;
	this.scDiv[this.upright?'scrollTop':'scrollLeft'] = 0;
	//autoPlay if(this.autoPlay){
	this.play()}
;
	this._scroll = this.upright?'scrollTop':'scrollLeft';
	this._sWidth = this.upright?'scrollHeight':'scrollWidth';
	if(typeof(this.onpagechange) === 'function'){
	this.onpagechange();
}
;
	this.iPad();
}
,leftMouseDown:function(){
	if(this._state != "ready"){
	return}
;
	var thisTemp = this;
	this._state = "floating";
	clearInterval(this._scrollTimeObj);
	this.moveLeft();
	this._scrollTimeObj = setInterval(function(){
	thisTemp.moveLeft()}
,this.speed);
}
,rightMouseDown:function(){
	if(this._state != "ready"){
	return}
;
	var thisTemp = this;
	this._state = "floating";
	clearInterval(this._scrollTimeObj);
	this.moveRight();
	this._scrollTimeObj = setInterval(function(){
	thisTemp.moveRight()}
,this.speed);
}
,moveLeft:function(){
	if(this.circularly){
	//无缝循环 if(this.scDiv[this._scroll] + this.space >= this.lDiv01[this._sWidth]){
	this.scDiv[this._scroll] = this.scDiv[this._scroll] + this.space - this.lDiv01[this._sWidth];
}
else{
	this.scDiv[this._scroll] += this.space;
}
;
}
else{
	if(this.scDiv[this._scroll] + this.space >= this.lDiv01[this._sWidth] - this.frameWidth){
	this.scDiv[this._scroll] = this.lDiv01[this._sWidth] - this.frameWidth;
	//停 this.leftEnd();
}
else{
	this.scDiv[this._scroll] += this.space;
}
;
}
;
	this.accountPageIndex();
}
,moveRight:function(){
	if(this.circularly){
	//无缝循环 if(this.scDiv[this._scroll] - this.space <= 0){
	this.scDiv[this._scroll] = this.lDiv01[this._sWidth] + this.scDiv[this._scroll] - this.space;
}
else{
	this.scDiv[this._scroll] -= this.space;
}
;
}
else{
	if(this.scDiv[this._scroll] - this.space <= 0){
	this.scDiv[this._scroll] = 0;
	//停 this.rightEnd();
}
else{
	this.scDiv[this._scroll] -= this.space;
}
;
}
;
	this.accountPageIndex();
}
,leftEnd:function(){
	if(this._state != "floating" && this._state != 'touch'){
	return}
;
	this._state = "stoping";
	clearInterval(this._scrollTimeObj);
	var fill = this.pageWidth - this.scDiv[this._scroll] % this.pageWidth;
	this.move(fill);
}
,rightEnd:function(){
	if(this._state != "floating" && this._state != 'touch'){
	return}
;
	this._state = "stoping";
	clearInterval(this._scrollTimeObj);
	var fill = - this.scDiv[this._scroll] % this.pageWidth;
	this.move(fill);
}
,move:function(num,quick){
	var thisTemp = this;
	var thisMove = num/5;
	var theEnd = false;
	if(!quick){
	if(thisMove > this.space){
	thisMove = this.space}
;
	if(thisMove < -this.space){
	thisMove = -this.space}
;
}
;
	if(Math.abs(thisMove)<1 && thisMove!=0){
	thisMove = thisMove>=0?1:-1;
}
else{
	thisMove = Math.round(thisMove);
}
;
	var temp = this.scDiv[this._scroll] + thisMove;
	if(thisMove>0){
	if(this.circularly){
	//无缝循环 if(this.scDiv[this._scroll] + thisMove >= this.lDiv01[this._sWidth]){
	this.scDiv[this._scroll] = this.scDiv[this._scroll] + thisMove - this.lDiv01[this._sWidth];
}
else{
	this.scDiv[this._scroll] += thisMove;
}
;
}
else{
	if(this.scDiv[this._scroll] + thisMove >= this.lDiv01[this._sWidth] - this.frameWidth){
	this.scDiv[this._scroll] = this.lDiv01[this._sWidth] - this.frameWidth;
	this._state = "ready";
	theEnd = true;
	//return;
}
else{
	this.scDiv[this._scroll] += thisMove;
}
;
}
;
}
else{
	if(this.circularly){
	//无缝循环 if(this.scDiv[this._scroll] + thisMove < 0){
	this.scDiv[this._scroll] = this.lDiv01[this._sWidth] + this.scDiv[this._scroll] + thisMove;
}
else{
	this.scDiv[this._scroll] += thisMove;
}
;
}
else{
	if(this.scDiv[this._scroll] - thisMove < 0){
	this.scDiv[this._scroll] = 0;
	this._state = "ready";
	theEnd = true;
	//return;
}
else{
	this.scDiv[this._scroll] += thisMove;
}
;
}
;
}
;
	if(typeof(this.onpagechange) === 'function'){
	this.onpagechange();
}
;
	if(theEnd){
	return;
}
;
	num -= thisMove;
	if(Math.abs(num) == 0){
	this._state = "ready";
	if(this.autoPlay){
	this.play()}
;
	this.accountPageIndex();
	return;
}
else{
	this.accountPageIndex();
	this._scrollTimeObj = setTimeout(function(){
	thisTemp.move(num,quick)}
,this.speed)}
;
}
,pre:function(){
	if(this._state != "ready"){
	return}
;
	this._state = "stoping";
	this.pageTo(this.pageIndex - 1);
}
,next:function(reStar){
	if(this._state != "ready"){
	return}
;
	this._state = "stoping";
	if(this.circularly){
	this.pageTo(this.pageIndex + 1);
}
else{
	if(this.scDiv[this._scroll] >= this.lDiv01[this._sWidth] - this.frameWidth){
	this._state = "ready";
	if(reStar){
	this.pageTo(0)}
;
}
else{
	this.pageTo(this.pageIndex + 1);
}
;
}
;
}
,play:function(){
	var thisTemp = this;
	if(!this.autoPlay){
	return}
;
	clearInterval(this._autoTimeObj);
	this._autoTimeObj = setInterval(function(){
	thisTemp.next(true)}
,this.autoPlayTime * 1000);
}
,stop:function(){
	clearInterval(this._autoTimeObj);
}
,pageTo:function(num){
	if(this.pageIndex == num){
	return}
;
	if(num < 0){
	num = this.pageLength - 1}
;
	clearTimeout(this._scrollTimeObj);
	this._state = "stoping";
	var fill = num * this.frameWidth - this.scDiv[this._scroll];
	this.move(fill,true);
}
,accountPageIndex:function(){
	var pageIndex = Math.floor(this.scDiv[this._scroll] / this.frameWidth);
	if(pageIndex == this.pageIndex){
	return}
;
	this.pageIndex = pageIndex;
	if(this.pageIndex > Math.floor(this.lDiv01[this.upright?'offsetHeight':'offsetWidth'] / this.frameWidth )){
	this.pageIndex = 0}
;
	if(typeof(this.onnowpage) === 'function'){
	this.onnowpage(this.pageIndex);
}
var i;
	//alert(this.pageIndex);
	for(i=0;
	i<this.dotObjArr.length;
	i++){
	if(i==this.pageIndex){
	this.dotObjArr[i].className = this.dotOnClassName;
}
else{
	this.dotObjArr[i].className = this.dotClassName;
}
;
}
;
	if(typeof(this.onpagechange) === 'function'){
	this.onpagechange();
}
;
}
,iPadX:0,iPadLastX:0,iPadStatus:'ok',iPad:function(){
	if(typeof(window.ontouchstart) === 'undefined'){
	//不支持触屏 return;
}
;
	if(!this.touch){
	return}
;
	var tempThis = this;
	this.addEvent(this.scDiv,'touchstart',function(e){
	tempThis._touchstart(e)}
);
	this.addEvent(this.scDiv,'touchmove',function(e){
	tempThis._touchmove(e)}
);
	this.addEvent(this.scDiv,'touchend',function(e){
	tempThis._touchend(e)}
);
}
,_touchstart:function(e){
	//if(this._state != "ready"){
	return}
;
	//this._state = 'touch';
	this.stop();
	this.iPadX = e.touches[0].pageX;
	this.iPadScrollX = window.pageXOffset;
	this.iPadScrollY = window.pageYOffset;
	//用于判断页面是否滚动 this.scDivScrollLeft = this.scDiv[this._scroll];
}
,_touchmove:function(e){
	if(e.touches.length > 1){
	//多点触摸 this.iPadStatus = 'ok';
	return;
}
;
	this.iPadLastX = e.touches[0].pageX;
	var cX = this.iPadX - this.iPadLastX;
	if(this.iPadStatus == 'ok'){
	if(this.iPadScrollY == window.pageYOffset && this.iPadScrollX == window.pageXOffset && Math.abs(cX)>this.scrollWidth){
	//横向触摸 this.iPadStatus = 'touch';
}
else{
	return;
}
;
}
;
	this._state = 'touch';
	var scrollNum = this.scDivScrollLeft + cX;
	if(scrollNum >= this.lDiv01[this._sWidth]){
	scrollNum = scrollNum - this.lDiv01[this._sWidth];
}
;
	if(scrollNum < 0){
	scrollNum = scrollNum + this.lDiv01[this._sWidth];
}
;
	this.scDiv[this._scroll] = scrollNum;
	e.preventDefault();
}
,_touchend:function(e){
	if(this.iPadStatus != 'touch'){
	return}
;
	this.iPadStatus = 'ok';
	//this._state = 'ready';
	var cX = this.iPadX - this.iPadLastX;
	if(cX<0){
	this.rightEnd();
}
else{
	this.leftEnd();
}
;
	this.play();
}
,$:function(objName){
	if(document.getElementById){
	return eval('document.getElementById("'+objName+'")')}
else{
	return eval('document.all.'+objName)}
}
,isIE:navigator.appVersion.indexOf("MSIE")!=-1?true:false,//Event addEvent:function(obj,eventType,func){
	if(obj.attachEvent){
	obj.attachEvent("on" + eventType,func);
}
else{
	obj.addEventListener(eventType,func,false)}
}
,delEvent:function(obj,eventType,func){
	if(obj.detachEvent){
	obj.detachEvent("on" + eventType,func)}
else{
	obj.removeEventListener(eventType,func,false)}
}
,//Cookie readCookie:function(l){
	var i="",I=l+"=";
	if(document.cookie.length>0){
	var offset=document.cookie.indexOf(I);
	if(offset!=-1){
	offset+=I.length;
	var end=document.cookie.indexOf(";
	",offset);
	if(end==-1)end=document.cookie.length;
	i=unescape(document.cookie.substring(offset,end))}
}
;
	return i}
,writeCookie:function(O,o,l,I){
	var i="",c="";
	if(l!=null){
	i=new Date((new Date).getTime()+l*3600000);
	i=";
	expires="+i.toGMTString()}
;
	if(I!=null){
	c=";
	domain="+I}
;
	document.cookie=O+"="+escape(o)+i+c}
,//Style readStyle:function(i,I){
	if(i.style[I]){
	return i.style[I]}
else if(i.currentStyle){
	return i.currentStyle[I]}
else if(document.defaultView&&document.defaultView.getComputedStyle){
	var l=document.defaultView.getComputedStyle(i,null);
	return l.getPropertyValue(I)}
else{
	return null}
}
}
;
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
191.17 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
191.17 KB
立即下载
孙舒
了解
打赏作者 鼓励作者
Html 滑动滚动特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章