<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>爱零工home</title> <link rel="stylesheet" type="text/css" href="styles/index.css"> <script type="text/javascript" src="scripts/min.js"></script> <script type="text/javascript" src="scripts/scroll.js"></script> <script type="text/javascript"> $(document).ready(function(){ //wap首页焦点图片滚动 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 = "f_ifocus_cur"; slide_01.arrLeftId = "sl_left"; //左箭头ID slide_01.arrRightId = "sl_right";//右箭头ID slide_01.frameWidth = 360; slide_01.pageWidth = 360; slide_01.upright = false; slide_01.speed = 10; slide_01.space = 30; slide_01.initialize(); //初始化 } }); </script> </head> <body> <div id="page"> <header class="header">首页</header> <!--banner--> <div class="m360 f_ifocus"> <div id="slide_01" class="f_ifocus_lis"> <div class="f_ifocus_con"> <a href="news/show_112688.html"><img src="http://oss-cn-shanghai.aliyuncs.com/taskdesc/211/1458696211.png"/></a> <!--<p><a href="news/show_112688.html">带屁股的小钢炮 试驾进口奥迪A3 40TFSI</a></p>--> </div> <div class="f_ifocus_con"> <a href="../www.fb.cn/daloorv"><img src="http://oss-cn-shanghai.aliyuncs.com/taskdesc/211/1458696211.png"/></a> <!--<p><a href="../www.fb.cn/daloorv">大陆房车</a></p>--> </div> <div class="f_ifocus_con"> <a href="news/show_90393.html"><img src="http://oss-cn-shanghai.aliyuncs.com/taskdesc/211/1458696211.png"/></a> <!--<p><a href="news/show_90393.html">合纵连横 话说发动机纵横时代（历史篇）</a></p>--> </div> <div class="f_ifocus_con"> <a href="news/show_113021.html"><img src="http://oss-cn-shanghai.aliyuncs.com/taskdesc/211/1458696211.png"/></a> <!--<p><a href="news/show_113021.html">对比试驾：路虎极光vs奔驰GLA</a></p>--> </div> </div> <div id="slide_01_dot" class="f_ifocus_btn"> </div> </div> </body> </html>
/*主页样式*/ /*通用样式*/ html {font-size:100%; -webkit-text-size-adjust:none;} body,textarea,input,select,option {font-size:12px;color:#000;font-family:'Microsoft Yahei','Lucida Grande','Helvetica','Arail','Verdana','sans-serif';} h1,h2,h3,h4,h5,h6 {font-size:100%;} body,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,dd,p,textarea,input,select,option,form {margin:0;} ol,ul,textarea,input,option,th,td {padding:0;} .clears:before,.clears:after {content:'';display:table;}.clears:after {clear:both;}.clears {*zoom:1;} .clear {clear:both;height:0;overflow:hidden;} a {text-decoration:none;color:#434343;} a:hover {text-decoration:none;} a,textarea,input {outline:none;} textarea {overflow:auto;resize:none;} a img {border:none;} .m360 {width:360px; margin:0 auto;} /*header*/ .header {width:100%;min-width:100%;height:40px; border-bottom:1px solid #A3A6AA; background-color:#ff9900; -webkit-background-size:360px 42px; text-align: center; align-content: center} /* f_ifocus **/ .f_ifocus {position:relative; height:163px; overflow:hidden; background-color: greenyellow} .f_ifocus_lis .f_ifocus_con {float:left; width:360px; height:163px; position:relative;} .f_ifocus_lis .f_ifocus_con img {display:block; width:360px; height:163px;} .f_ifocus_lis .f_ifocus_con p {position:absolute; left:0; bottom:0; width:100%; height:26px; line-height:26px; text-align:center; font-size:14px;} .f_ifocus_lis .f_ifocus_con p a {color:#fff;} .f_ifocus_btn {position:absolute; left:0; bottom:32px; width:100%; text-align:center; z-index:3;} .f_ifocus_btn span {display:inline-block; width:6px; height:6px; overflow:hidden; cursor:pointer; margin:0 6px; background-color:#cbcbc7; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;} .f_ifocus_btn span.f_ifocus_cur {background-color:#fff;}
切记引入jquery 跟 scroll.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}} };
<div class="bannerSlider red"> <div class="touchslider"> <div class="touchslider-viewport"> <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg01.jpg"/></a></div> <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg05.jpg"/></a></div> <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg03.jpg"/></a></div> <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg04.jpg"/></a></div> <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg06.jpg"/></a></div> </div> <div class="touchslider-navtag">
<!--<span class="touchslider-prev">←</span> -->
<span class="touchslider-nav-item touchslider-nav-item-current"></span>
<span class="touchslider-nav-item "></span>
<span class="touchslider-nav-item "></span>
<span class="touchslider-nav-item "></span>
<span class="touchslider-nav-item "></span>
<!-- <span class="touchslider-next">→</span> -->
</div>
</div>
$(".touchslider").touchSlider({mouseTouch:true, autoplay:true});//幻灯片轮播图
$(".touchslider").data("touchslider").stop(); // 结束滚动
$(".touchslider").data("touchslider").start(); // 开始滚动
jquery.touchslider.min.js用于移动网页图片滚动，同时适用于触摸、鼠标操作的幻灯片交互脚本，依赖 jQuery，需要导入jquery。插件默认会将第二页的内容隐藏