常见的手机端头部banner切换代码设置

常见的手机端头部banner切换代码一
HTML代码部分：

<!-- begain头部banner图片切换 -->
<style>
.banner{ width:100%; height:auto; overflow:hidden; position:relative;}
.banner img{ width:100%;}
.banner div{ width:100%; height:auto; overflow:hidden; position:relative;}
.banner div p{ width:100%; height:auto; overflow:hidden; float:left; position:relative;}
.synav{ width:100%; height: auto; overflow:hidden; position:absolute; bottom:2%; left:2%;}
.synav ul{  margin:0 auto; display:block;}
.synav ul li{ width:1em; height:1em; margin-right:1%; border-radius:0.5; background:#CCCCCC; float:left; cursor:pointer;}
.synav ul li.on{ width:1em; height:1em; border-radius:0.5; background:#1365BE;}
</style>
<div class="banner"><div id="mySwipe"><div><p><a href=""><img src="./img/ban1.jpg" /></a></p><p><a href=""><img src="./img/ban2.jpg" /></a></p></div></div><nav class="synav"><ul id="position"><li class="on"></li><li></li></ul></nav>
</div>
<script type="text/javascript" src="./js/swipe.js"></script>
<!-- end头部banner图片切换 -->

JS代码部分：

这里写代码片

常见的手机端头部banner切换代码二
HTML代码部分：

<!-- begain头部banner图片切换 -->
<script type="text/javascript" src="./js/phonecommon.js"></script>
<style>
.banner { overflow: hidden; zoom: 1; position: relative; z-index: 0; }
.banner_t { position: absolute; z-index: 1; bottom: 0.4rem; right: 0.2rem; }
.banner_t span { display: inline-block; margin: 0rem 0.3rem; background: #006ebb; border-radius: 0.4rem; width: 0.8rem; height: 0.8rem; cursor: pointer; }
.banner_t span.hover { background: #fff; }
.banner_c { overflow: hidden; zoom: 1;}
.banner_c ul li { position: relative; z-index: 0; overflow: hidden;}
.banner_c ul li b { position: absolute; z-index: 1; bottom: 0rem; left: 0rem;  opacity: 0.4; filter: alpha(opacity=40); background: #000; }
</style>
<div class="banner" id="banner"><div class="banner_t"> <span></span><span></span></div><div class="banner_c"><ul><li><div><a href=""><img src="./img/ban1.jpg"></a></div></li><li><div><a href=""><img src="./img/ban2.jpg"></a></div></li>    </ul></div>
</div>
<script type="text/javascript">
phonecommon({id: "#banner",titkj: ".banner_t span",contkj: ".banner_c ul",xiaoguo: "left",autoplay: true,cxtime: 200,jgtime: 4000,morenindex: 0,tjclass: "hover",autopage: false,leftarr: ".prev",rightarr: ".next",showpage: ".showpage",arrauto: "undefined",startfn: null,endfn: null,changeload: null
});
</script>
<!-- end头部banner图片切换 -->

JS代码部分：

这里写代码片

附件
JS代码swipe.js：

/** Swipe 2.0** Brad Birdsall* Copyright 2013, MIT License*
*/function Swipe(container, options) {"use strict";// utilitiesvar noop = function() {}; // simple no operation functionvar offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution// check browser capabilitiesvar browser = {addEventListener: !!window.addEventListener,touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,transitions: (function(temp) {var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition'];for ( var i in props ) if (temp.style[ props[i] ] !== undefined) return true;return false;})(document.createElement('swipe'))};// quit if no root elementif (!container) return;var element = container.children[0];var slides, slidePos, width, length;options = options || {};var index = parseInt(options.startSlide, 10) || 0;var speed = options.speed || 300;options.continuous = options.continuous !== undefined ? options.continuous : true;function setup() {// cache slidesslides = element.children;length = slides.length;// set continuous to false if only one slideif (slides.length < 2) options.continuous = false;//special case if two slidesif (browser.transitions && options.continuous && slides.length < 3) {element.appendChild(slides[0].cloneNode(true));element.appendChild(element.children[1].cloneNode(true));slides = element.children;}// create an array to store current positions of each slideslidePos = new Array(slides.length);// determine width of each slidewidth = container.getBoundingClientRect().width || container.offsetWidth;element.style.width = (slides.length * width) + 'px';// stack elementsvar pos = slides.length;while(pos--) {var slide = slides[pos];slide.style.width = width + 'px';slide.setAttribute('data-index', pos);if (browser.transitions) {slide.style.left = (pos * -width) + 'px';move(pos, index > pos ? -width : (index < pos ? width : 0), 0);}}// reposition elements before and after indexif (options.continuous && browser.transitions) {move(circle(index-1), -width, 0);move(circle(index+1), width, 0);}if (!browser.transitions) element.style.left = (index * -width) + 'px';container.style.visibility = 'visible';}function prev() {if (options.continuous) slide(index-1);else if (index) slide(index-1);}function next() {if (options.continuous) slide(index+1);else if (index < slides.length - 1) slide(index+1);}function circle(index) {// a simple positive modulo using slides.lengthreturn (slides.length + (index % slides.length)) % slides.length;}function slide(to, slideSpeed) {// do nothing if already on requested slideif (index == to) return;if (browser.transitions) {var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward// get the actual position of the slideif (options.continuous) {var natural_direction = direction;direction = -slidePos[circle(to)] / width;// if going forward but to < index, use to = slides.length + to// if going backward but to > index, use to = -slides.length + toif (direction !== natural_direction) to =  -direction * slides.length + to;}var diff = Math.abs(index-to) - 1;// move all the slides between index and to in the right directionwhile (diff--) move( circle((to > index ? to : index) - diff - 1), width * direction, 0);to = circle(to);move(index, width * direction, slideSpeed || speed);move(to, 0, slideSpeed || speed);if (options.continuous) move(circle(to - direction), -(width * direction), 0); // we need to get the next in place} else {to = circle(to);animate(index * -width, to * -width, slideSpeed || speed);//no fallback for a circular continuous if the browser does not accept transitions}index = to;offloadFn(options.callback && options.callback(index, slides[index]));}function move(index, dist, speed) {translate(index, dist, speed);slidePos[index] = dist;}function translate(index, dist, speed) {var slide = slides[index];var style = slide && slide.style;if (!style) return;style.webkitTransitionDuration =style.MozTransitionDuration =style.msTransitionDuration =style.OTransitionDuration =style.transitionDuration = speed + 'ms';style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';style.msTransform =style.MozTransform =style.OTransform = 'translateX(' + dist + 'px)';}function animate(from, to, speed) {// if not an animation, just repositionif (!speed) {element.style.left = to + 'px';return;}var start = +new Date;var timer = setInterval(function() {var timeElap = +new Date - start;if (timeElap > speed) {element.style.left = to + 'px';if (delay) begin();options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);clearInterval(timer);return;}element.style.left = (( (to - from) * (Math.floor((timeElap / speed) * 100) / 100) ) + from) + 'px';}, 4);}// setup auto slideshowvar delay = options.auto || 0;var interval;function begin() {interval = setTimeout(next, delay);}function stop() {// delay = 0;delay = options.auto > 0 ? options.auto : 0;clearTimeout(interval);}// setup initial varsvar start = {};var delta = {};var isScrolling;// setup event capturingvar events = {handleEvent: function(event) {switch (event.type) {case 'touchstart': this.start(event); break;case 'touchmove': this.move(event); break;case 'touchend': offloadFn(this.end(event)); break;case 'webkitTransitionEnd':case 'msTransitionEnd':case 'oTransitionEnd':case 'otransitionend':case 'transitionend': offloadFn(this.transitionEnd(event)); break;case 'resize': offloadFn(setup); break;}if (options.stopPropagation) event.stopPropagation();},start: function(event) {var touches = event.touches[0];// measure start valuesstart = {// get initial touch coordsx: touches.pageX,y: touches.pageY,// store time to determine touch durationtime: +new Date};// used for testing first move eventisScrolling = undefined;// reset delta and end measurementsdelta = {};// attach touchmove and touchend listenerselement.addEventListener('touchmove', this, false);element.addEventListener('touchend', this, false);},move: function(event) {// ensure swiping with one touch and not pinchingif ( event.touches.length > 1 || event.scale && event.scale !== 1) returnif (options.disableScroll) event.preventDefault();var touches = event.touches[0];// measure change in x and ydelta = {x: touches.pageX - start.x,y: touches.pageY - start.y}// determine if scrolling test has run - one time testif ( typeof isScrolling == 'undefined') {isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) );}// if user is not trying to scroll verticallyif (!isScrolling) {// prevent native scrollingevent.preventDefault();// stop slideshowstop();// increase resistance if first or last slideif (options.continuous) { // we don't add resistance at the endtranslate(circle(index-1), delta.x + slidePos[circle(index-1)], 0);translate(index, delta.x + slidePos[index], 0);translate(circle(index+1), delta.x + slidePos[circle(index+1)], 0);} else {delta.x =delta.x /( (!index && delta.x > 0               // if first slide and sliding left|| index == slides.length - 1        // or if last slide and sliding right&& delta.x < 0                       // and if sliding at all) ?( Math.abs(delta.x) / width + 1 )      // determine resistance level: 1 );                                 // no resistance if false// translate 1:1translate(index-1, delta.x + slidePos[index-1], 0);translate(index, delta.x + slidePos[index], 0);translate(index+1, delta.x + slidePos[index+1], 0);}}},end: function(event) {// measure durationvar duration = +new Date - start.time;// determine if slide attempt triggers next/prev slidevar isValidSlide =Number(duration) < 250               // if slide duration is less than 250ms&& Math.abs(delta.x) > 20            // and if slide amt is greater than 20px|| Math.abs(delta.x) > width/2;      // or if slide amt is greater than half the width// determine if slide attempt is past start and endvar isPastBounds =!index && delta.x > 0                            // if first slide and slide amt is greater than 0|| index == slides.length - 1 && delta.x < 0;    // or if last slide and slide amt is less than 0if (options.continuous) isPastBounds = false;// determine direction of swipe (true:right, false:left)var direction = delta.x < 0;// if not scrolling verticallyif (!isScrolling) {if (isValidSlide && !isPastBounds) {if (direction) {if (options.continuous) { // we need to get the next in this direction in placemove(circle(index-1), -width, 0);move(circle(index+2), width, 0);} else {move(index-1, -width, 0);}move(index, slidePos[index]-width, speed);move(circle(index+1), slidePos[circle(index+1)]-width, speed);index = circle(index+1);} else {if (options.continuous) { // we need to get the next in this direction in placemove(circle(index+1), width, 0);move(circle(index-2), -width, 0);} else {move(index+1, width, 0);}move(index, slidePos[index]+width, speed);move(circle(index-1), slidePos[circle(index-1)]+width, speed);index = circle(index-1);}options.callback && options.callback(index, slides[index]);} else {if (options.continuous) {move(circle(index-1), -width, speed);move(index, 0, speed);move(circle(index+1), width, speed);} else {move(index-1, -width, speed);move(index, 0, speed);move(index+1, width, speed);}}}// kill touchmove and touchend event listeners until touchstart called againelement.removeEventListener('touchmove', events, false)element.removeEventListener('touchend', events, false)},transitionEnd: function(event) {if (parseInt(event.target.getAttribute('data-index'), 10) == index) {if (delay) begin();options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);}}}// trigger setupsetup();// start auto slideshow if applicableif (delay) begin();// add event listenersif (browser.addEventListener) {// set touchstart event on elementif (browser.touch) element.addEventListener('touchstart', events, false);if (browser.transitions) {element.addEventListener('webkitTransitionEnd', events, false);element.addEventListener('msTransitionEnd', events, false);element.addEventListener('oTransitionEnd', events, false);element.addEventListener('otransitionend', events, false);element.addEventListener('transitionend', events, false);}// set resize event on windowwindow.addEventListener('resize', events, false);} else {window.onresize = function () { setup() }; // to play nice with old IE}// expose the Swipe APIreturn {setup: function() {setup();},slide: function(to, speed) {// cancel slideshowstop();slide(to, speed);},prev: function() {// cancel slideshowstop();prev();},next: function() {// cancel slideshowstop();next();},stop: function() {// cancel slideshowstop();},getPos: function() {// return current index positionreturn index;},getNumSlides: function() {// return total number of slidesreturn length;},kill: function() {// cancel slideshowstop();// reset elementelement.style.width = '';element.style.left = '';// reset slidesvar pos = slides.length;while(pos--) {var slide = slides[pos];slide.style.width = '';slide.style.left = '';if (browser.transitions) translate(pos, 0, 0);}// removed event listenersif (browser.addEventListener) {// remove current event listenerselement.removeEventListener('touchstart', events, false);element.removeEventListener('webkitTransitionEnd', events, false);element.removeEventListener('msTransitionEnd', events, false);element.removeEventListener('oTransitionEnd', events, false);element.removeEventListener('otransitionend', events, false);element.removeEventListener('transitionend', events, false);window.removeEventListener('resize', events, false);}else {window.onresize = null;}}}}if ( window.jQuery || window.Zepto ) {(function($) {$.fn.Swipe = function(params) {return this.each(function() {$(this).data('Swipe', new Swipe($(this)[0], params));});}})( window.jQuery || window.Zepto )
}
var mySwipe= Swipe(document.getElementById('mySwipe'), {auto: 3000,continuous: true,disableScroll: true,stopPropagation: true,callback: function(index, element) {slideTab(index);}
});
var bullets = document.getElementById('position').getElementsByTagName('li');
for (var i=0; i < bullets.length; i++) {var elem = bullets[i];elem.setAttribute('data-tab', i);elem.onclick = function(){mySwipe.slide(parseInt(this.getAttribute('data-tab'), 10), 500);}
}
function slideTab(index){var i = bullets.length;while (i--) {bullets[i].className = bullets[i].className.replace('on',' ');}bullets[index].className = 'on';
};

JS代码phonecommon.js：

function set(name,cursel,n){for(i=1;i<=n;i++){var menu=document.getElementById(name+i);var con=document.getElementById("con"+name+i);menu.className=i==cursel?"hover":"";con.style.display=i==cursel?"block":"none"}}function setab(name,cursel,n,link){for(i=1;i<=n;i++){var menu=document.getElementById(name+i);var con=document.getElementById("con"+name+i);menu.className=i==cursel?"hover":"";con.style.display=i==cursel?"block":"none"};if(link!=null&&link!="")document.getElementById("TabLink"+name).href=link}function showList(id,num){if(num==1){document.getElementById(id).style.display="block"}else{document.getElementById(id).style.display="none"}}var phonecommon = function(a) {a = a || {};var b = {id: a.id,titkj: a.titkj,contkj: a.contkj,xiaoguo: a.xiaoguo,autoplay: a.autoplay,cxtime: a.cxtime,jgtime: a.jgtime,morenindex: a.morenindex,tjclass: a.tjclass,autopage: a.autopage,leftarr: a.leftarr,rightarr: a.rightarr,showpage: a.showpage,arrauto: "undefined" == a.arrauto ? true : a.arrauto,startfn: a.startfn,endfn: a.endfn,changeload: a.changeload,scale:a.scale },c = document.getElementById(b.id.replace("#", ""));if (!c) return ! 1;var d = function(a, b) {a = a.split(" ");var c = [];b = b || document;var d = [b];for (var e in a) 0 != a[e].length && c.push(a[e]);for (var e in c) {if (0 == d.length) return ! 1;var f = [];for (var g in d) if ("#" == c[e][0]) f.push(document.getElementById(c[e].replace("#", "")));else if ("." == c[e][0]) for (var h = d[g].getElementsByTagName("*"), i = 0; i < h.length; i++) {var j = h[i].className;j && -1 != j.search(new RegExp("\\b" + c[e].replace(".", "") + "\\b")) && f.push(h[i])} else for (var h = d[g].getElementsByTagName(c[e]), i = 0; i < h.length; i++) f.push(h[i]);d = f}return 0 == d.length || d[0] == b ? !1 : d},e = function(a, b) {var c = document.createElement("div");c.innerHTML = b,c = c.children[0];var d = a.cloneNode(!0);return c.appendChild(d),a.parentNode.replaceChild(c, a),m = d,c},g = function(a, b) { ! a || !b || a.className && -1 != a.className.search(new RegExp("\\b" + b + "\\b")) || (a.className += (a.className ? " ": "") + b)},h = function(a, b) { ! a || !b || a.className && -1 == a.className.search(new RegExp("\\b" + b + "\\b")) || (a.className = a.className.replace(new RegExp("\\s*\\b" + b + "\\b", "g"), ""))},i = b.xiaoguo,j = d(b.leftarr, c)[0],k = d(b.rightarr, c)[0],l = d(b.showpage)[0],m = d(b.contkj, c)[0];if (!m) return ! 1;var N, O, n = m.children.length,o = d(b.titkj, c),p = o ? o.length: n,q = b.changeload,r = parseInt(b.morenindex),s = parseInt(b.cxtime),t = parseInt(b.jgtime),u = "false" == b.autoplay || 0 == b.autoplay ? !1 : !0,v = "false" == b.autopage || 0 == b.autopage ? !1 : !0,w = "false" == b.arrauto || 0 == b.arrauto ? !1 : !0,x = r,y = null,z = null,A = null,B = 0,C = 0,D = 0,E = 0,G = /hp-tablet/gi.test(navigator.appVersion),H = "ontouchstart" in window && !G,I = H ? "touchstart": "mousedown",J = H ? "touchmove": "",K = H ? "touchend": "mouseup",M = m.parentNode.clientWidth,P = n;if (0 == p && (p = n), v) {p = n,o = o[0],o.innerHTML = "";var Q = "";if (1 == b.autopage || "true" == b.autopage) for (var R = 0; p > R; R++) Q += "<li>" + (R + 1) + "</li>";else for (var R = 0; p > R; R++) Q += b.autopage.replace("$", R + 1);o.innerHTML = Q,o = o.children}"leftauto" == i && (P += 2, m.appendChild(m.children[0].cloneNode(!0)), m.insertBefore(m.children[n - 1].cloneNode(!0), m.children[0])),N = e(m, '<div class="appendwrap" style="overflow:hidden; position:relative;"></div>'),m.style.cssText = "width:" + P * M + "px;" +"height:" + a.scale*M + "px;" + "position:relative;overflow:hidden;padding:0;margin:0;";for (var R = 0; P > R; R++) m.children[R].style.cssText = "display:table-cell;vertical-align:top;width:" + M + "px";var S = function() {"function" == typeof b.startfn && b.startfn(r, p)},T = function() {"function" == typeof b.endfn && b.endfn(r, p)},U = function(a) {var b = ("leftauto" == i ? r + 1 : r) + a,c = function(a) {for (var b = m.children[a].getElementsByTagName("img"), c = 0; c < b.length; c++) b[c].getAttribute(q) && (b[c].setAttribute("src", b[c].getAttribute(q)), b[c].removeAttribute(q))};if (c(b), "leftauto" == i) switch (b) {case 0:c(n);break;case 1:c(n + 1);break;case n:c(0);break;case n + 1 : c(1)}},V = function() {M = N.clientWidth,m.style.width = P * M + "px";for (var a = 0; P > a; a++) m.children[a].style.width = M + "px";var b = "leftauto" == i ? r + 1 : r;W( - b * M, 0)};window.addEventListener("resize", V, !1);var W = function(a, b, c) {c = c ? c.style: m.style,c.webkitTransitionDuration = c.MozTransitionDuration = c.msTransitionDuration = c.OTransitionDuration = c.transitionDuration = b + "ms",c.webkitTransform = "translate(" + a + "px,0)" + "translateZ(0)",c.msTransform = c.MozTransform = c.OTransform = "translateX(" + a + "px)"},X = function(a) {switch (i) {case "left":r >= p ? r = a ? r - 1 : 0 : 0 > r && (r = a ? 0 : p - 1),null != q && U(0),W( - r * M, s),x = r;break;case "leftauto":null != q && U(0),W( - (r + 1) * M, s),-1 == r ? (z = setTimeout(function() {W( - p * M, 0)},s), r = p - 1) : r == p && (z = setTimeout(function() {W( - M, 0)},s), r = 0),x = r}S(),A = setTimeout(function() {T()},s);for (var c = 0; p > c; c++) h(o[c], b.tjclass),c == r && g(o[c], b.tjclass);0 == w && (h(k, "nextStop"), h(j, "prevStop"), 0 == r ? g(j, "prevStop") : r == p - 1 && g(k, "nextStop")),l && (l.innerHTML = "<span>" + (r + 1) + "</span>/" + p)};if (X(), u && (y = setInterval(function() {r++,X()},t)), o) for (var R = 0; p > R; R++) !function() {var a = R;o[a].addEventListener("click",function() {clearTimeout(z),clearTimeout(A),r = a,X()})} ();k && k.addEventListener("click",function() { (1 == w || r != p - 1) && (clearTimeout(z), clearTimeout(A), r++, X())}),j && j.addEventListener("click",function() { (1 == w || 0 != r) && (clearTimeout(z), clearTimeout(A), r--, X())});var Y = function(a) {clearTimeout(z),clearTimeout(A),O = void 0,D = 0;var b = H ? a.touches[0] : a;B = b.pageX,C = b.pageY,m.addEventListener(J, Z, !1),m.addEventListener(K, $, !1)},Z = function(a) {if (!H || !(a.touches.length > 1 || a.scale && 1 !== a.scale)) {var b = H ? a.touches[0] : a;if (D = b.pageX - B, E = b.pageY - C, "undefined" == typeof O && (O = !!(O || Math.abs(D) < Math.abs(E))), !O) {switch (a.preventDefault(), u && clearInterval(y), i) {case "left":(0 == r && D > 0 || r >= p - 1 && 0 > D) && (D = .4 * D),W( - r * M + D, 0);break;case "leftauto":W( - (r + 1) * M + D, 0)}null != q && Math.abs(D) > M / 3 && U(D > -0 ? -1 : 1)}}},$ = function(a) {0 != D && (a.preventDefault(), O || (Math.abs(D) > M / 10 && (D > 0 ? r--:r++), X(!0), u && (y = setInterval(function() {r++,X()},t))), m.removeEventListener(J, Z, !1), m.removeEventListener(K, $, !1))};m.addEventListener(I, Y, !1)};function phoneMarquee(){this.ID=document.getElementById(arguments[0]);if(!this.ID){alert("您要设置的\""+arguments[0]+"\"初始化错误\r\n请检查标签ID设置是否正确!");this.ID=-1;return};this.Direction=this.Width=this.Height=this.DelayTime=this.WaitTime=this.CTL=this.StartID=this.Stop=this.MouseOver=0;this.Step=1;this.Timer=30;this.DirectionArray={"top":0,"up":0,"bottom":1,"down":1,"left":2,"right":3};if(typeof arguments[1]=="number"||typeof arguments[1]=="string")this.Direction=arguments[1];if(typeof arguments[2]=="number")this.Step=arguments[2];if(typeof arguments[3]=="number")this.Width=arguments[3];if(typeof arguments[4]=="number")this.Height=arguments[4];if(typeof arguments[5]=="number")this.Timer=arguments[5];if(typeof arguments[6]=="number")this.DelayTime=arguments[6];if(typeof arguments[7]=="number")this.WaitTime=arguments[7];if(typeof arguments[8]=="number")this.ScrollStep=arguments[8]*document.body.clientWidth/320;this.ID.style.overflow=this.ID.style.overflowX=this.ID.style.overflowY="hidden";this.ID.noWrap=true;this.IsNotOpera=(navigator.userAgent.toLowerCase().indexOf("opera")==-1);if(arguments.length>=7)this.Start()};phoneMarquee.prototype.Start=function(){if(this.ID==-1)return;if(this.WaitTime<800)this.WaitTime=800;if(this.Timer<20)this.Timer=20;if(this.Width==0)this.Width=parseInt(this.ID.style.width);if(this.Height==0)this.Height=parseInt(this.ID.style.height);if(typeof this.Direction=="string")this.Direction=this.DirectionArray[this.Direction.toString().toLowerCase()];this.HalfWidth=Math.round(this.Width/2);this.HalfHeight=Math.round(this.Height/2);this.BakStep=this.Step;this.ID.style.width=(this.Width/10)+"rem";this.ID.style.height=(this.Height/10)+"rem";if(typeof this.ScrollStep!="number")this.ScrollStep=this.Direction>1?this.Width:this.Height;var templateLeft="<table width='100%' cellspacing='0' cellpadding='0' style='border-collapse:collapse;display:inline;'><tr><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td></tr></table>";var templateTop="<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;'><tr><td>MSCLASS_TEMP_HTML</td></tr><tr><td>MSCLASS_TEMP_HTML</td></tr></table>";var msobj=this;msobj.tempHTML=msobj.ID.innerHTML;if(msobj.Direction<=1){msobj.ID.innerHTML=templateTop.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML)}else{if(msobj.ScrollStep==0&&msobj.DelayTime==0){msobj.ID.innerHTML+=msobj.ID.innerHTML}else{msobj.ID.innerHTML=templateLeft.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML)}};var timer=this.Timer;var delaytime=this.DelayTime;var waittime=this.WaitTime;msobj.StartID=function(){msobj.Scroll()};msobj.Continue=function(){if(msobj.MouseOver==1){setTimeout(msobj.Continue,delaytime)}else{clearInterval(msobj.TimerID);msobj.CTL=msobj.Stop=0;msobj.TimerID=setInterval(msobj.StartID,timer)}};msobj.Pause=function(){msobj.Stop=1;clearInterval(msobj.TimerID);setTimeout(msobj.Continue,delaytime)};msobj.Begin=function(){msobj.ClientScroll=msobj.Direction>1?msobj.ID.scrollWidth/2:msobj.ID.scrollHeight/2;if((msobj.Direction<=1&&msobj.ClientScroll<=msobj.Height+msobj.Step)||(msobj.Direction>1&&msobj.ClientScroll<=msobj.Width+msobj.Step)){msobj.ID.innerHTML=msobj.tempHTML;delete(msobj.tempHTML);return};delete(msobj.tempHTML);msobj.TimerID=setInterval(msobj.StartID,timer);if(msobj.ScrollStep<0)return;msobj.ID.onmousemove=function(event){if(msobj.ScrollStep==0&&msobj.Direction>1){var event=event||window.event;if(window.event){if(msobj.IsNotOpera){msobj.EventLeft=event.srcElement.id==msobj.ID.id?event.offsetX-msobj.ID.scrollLeft:event.srcElement.offsetLeft-msobj.ID.scrollLeft+event.offsetX}else{msobj.ScrollStep=null;return}}else{msobj.EventLeft=event.layerX-msobj.ID.scrollLeft};msobj.Direction=msobj.EventLeft>msobj.HalfWidth?3:2;msobj.AbsCenter=Math.abs(msobj.HalfWidth-msobj.EventLeft);msobj.Step=Math.round(msobj.AbsCenter*(msobj.BakStep*2)/msobj.HalfWidth)}};msobj.ID.onmouseover=function(){if(msobj.ScrollStep==0)return;msobj.MouseOver=1;clearInterval(msobj.TimerID)};msobj.ID.onmouseout=function(){if(msobj.ScrollStep==0){if(msobj.Step==0)msobj.Step=1;return};msobj.MouseOver=0;if(msobj.Stop==0){clearInterval(msobj.TimerID);msobj.TimerID=setInterval(msobj.StartID,timer)}}};setTimeout(msobj.Begin,waittime)};phoneMarquee.prototype.Scroll=function(){switch(this.Direction){case 0:this.CTL+=this.Step;if(this.CTL>=this.ScrollStep&&this.DelayTime>0){this.ID.scrollTop+=this.ScrollStep+this.Step-this.CTL;this.Pause();return}else{if(this.ID.scrollTop>=this.ClientScroll){this.ID.scrollTop-=this.ClientScroll};this.ID.scrollTop+=this.Step};break;case 1:this.CTL+=this.Step;if(this.CTL>=this.ScrollStep&&this.DelayTime>0){this.ID.scrollTop-=this.ScrollStep+this.Step-this.CTL;this.Pause();return}else{if(this.ID.scrollTop<=0){this.ID.scrollTop+=this.ClientScroll};this.ID.scrollTop-=this.Step};break;case 2:this.CTL+=this.Step;if(this.CTL>=this.ScrollStep&&this.DelayTime>0){this.ID.scrollLeft+=this.ScrollStep+this.Step-this.CTL;this.Pause();return}else{if(this.ID.scrollLeft>=this.ClientScroll){this.ID.scrollLeft-=this.ClientScroll};this.ID.scrollLeft+=this.Step};break;case 3:this.CTL+=this.Step;if(this.CTL>=this.ScrollStep&&this.DelayTime>0){this.ID.scrollLeft-=this.ScrollStep+this.Step-this.CTL;this.Pause();return}else{if(this.ID.scrollLeft<=0){this.ID.scrollLeft+=this.ClientScroll};this.ID.scrollLeft-=this.Step};break}}

常见的手机端头部banner切换代码设置相关推荐

手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效
jQuery仿京东商城手机端商品分类滑动切换特效一款仿京商城东手机移动端商品图片分类导航滑动效果,jQuery商品二级分类菜单切换特效. js代码 //设置cookie function setCo ...
手机端qq客服代码点击弹出qq聊天窗http://www.51xuediannao.com/jiqiao/1026.html
手机端qq客服代码点击弹出qq聊天窗来源:web前端开发作者: 懒人建站日期:2016-12-02 人气:5256 在手机端qq客服代码点击弹出qq聊天窗怎么实现那?其实和web端qq客服代码一 ...
手机端图片滑动切换效果
最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环 ...
手机端滑动banner代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" Content ...
html ul实现手机页面,手机端网页banner实现
效果是这样的:注意的是:要记得导入 jquery! jquery! jquery! 才能运行哦... 废话不多说直接上代码: html:banner.html js: demodata.js get ...
vue实现手机端，手势切换左右滑动的功能
背景: 需要在手机端实现图片预览,同时支持用户手势左右滑动时,图片可以进行切换查看. 技术实现: 实现思路事件主要是参照屏幕的触摸事件:touchstart.touchmove和 ...
ecshop手机端模板引擎切换到smarty3.1.30-之改造insert_ads
在网上下载的一个小京东的模板4.1的模板,原模板引擎是ecshop的,感觉不是很好用,切换到smarty吧, 选择了新版的smarty3.1.30使用,遇到的第一个问题就是有一些函数使用起来不对,所以 ...
html手机端下拉菜单代码,jQuery手机移动端下拉列表选择代码
js代码 $(function(){ $('.retrie dt a').click(function(){ var $t=$(this); if($t.hasClass('up')){ $(&quo ...
手机头部搜索栏html,手机端头部导航栏可滑动
发现 *{ margin: 0; padding: 0; -webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-overflow-scroll ...

常见的手机端头部banner切换代码设置

常见的手机端头部banner切换代码设置相关推荐

最新文章

热门文章