如何在购物网站上实现带有水平滚动条的图片展示?JS代码详解
最编程
2024-08-08 10:03:00
...
购物网站带横向滚动条的图片展示JS代码,今天在http://m.wmsexdolls.com/ 网站上发现一个比较不错的JS图片展示代码,这里分享给大家。
展示效果图:
function myEvent(obj, ev, fu){ obj.attachEvent ? obj.attachEvent('on' + ev, fu) : obj.addEventListener(ev, fu, false); } window.onload = function(){ var oBox = document.getElementById('ztbox'); var oLeft = document.getElementById('left'); var oRight = document.getElementById('right'); var oConter = document.getElementById('conter'); var oUl = oConter.getElementsByTagName('ul')[0]; var oLi = oConter.getElementsByTagName('li'); var oScroll = document.getElementById('scroll'); var oSpan = oScroll.getElementsByTagName('span')[0]; var i = 0; oUl.style.width = 1250 +'px'; //var iWidth = oScroll.offsetWidth/(oUl.offsetWidth / oConter.offsetWidth - 1) var iWidth=416; oLeft.onmouseover = oRight.onmouseover = function(){ this.className = 'hover'; //点击左侧按钮 oLeft.onclick = function(){ var butscroll = oSpan.offsetLeft - iWidth; oscroll(butscroll); }; //点击右侧按钮 oRight.onclick = function(){ var butscroll = oSpan.offsetLeft + iWidth; oscroll(butscroll); }; }; //点击滚动条 oScroll.onclick = function(e){ var oEvent = e || event; var butscroll = oEvent.clientX - oBox.offsetLeft - 53 - oSpan.offsetWidth / 2; oscroll(butscroll); }; oSpan.onclick = function(e){ var oEvent = e || event; oEvent.cancelBubble=true; } oLeft.onmouseout = oRight.onmouseout = function(){ this.className = ''; }; //拖拽滚动条 var iX = 0; oSpan.onmousedown = function(e){ var oEvent = e || event; iX = oEvent.clientX - oSpan.offsetLeft; document.onmousemove = function(e){ var oEvent = e || event; var l = oEvent.clientX - iX; td(l); return false; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; return false; }; //滚轮事件 function fuScroll(e){ var oEvent = e || event; var l = oSpan.offsetLeft; oEvent.wheelDelta ? (oEvent.wheelDelta > 0 ? l-=iWidth : l+=iWidth) : (oEvent.detail ? l+=iWidth : l-=iWidth); oscroll(l) if(oEvent.PreventDefault){ oEvent.PreventDefault(); } } myEvent(oConter, 'mousewheel', fuScroll); myEvent(oConter, 'DOMMouseScroll', fuScroll); //滚动事件 function oscroll(l){ if(l < 0){ l = 0; }else if(l > oScroll.offsetWidth - oSpan.offsetWidth){ l = oScroll.offsetWidth - oSpan.offsetWidth; } var scrol = l / (oScroll.offsetWidth - oSpan.offsetWidth); sMove(oSpan, 'left', Math.ceil(l)); sMove(oUl, 'left', '-'+Math.ceil((oUl.offsetWidth - (oConter.offsetWidth + 15)) * scrol)); } function td(l){ if(l < 0){ l = 0; }else if(l > oScroll.offsetWidth - oSpan.offsetWidth){ l = oScroll.offsetWidth - oSpan.offsetWidth; } var scrol = l / (oScroll.offsetWidth - oSpan.offsetWidth); oSpan.style.left = l+'px'; oUl.style.left = '-'+(oUl.offsetWidth - (oConter.offsetWidth + 15)) * scrol +'px'; } }; //运动框架 function getStyle(obj, attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; } function sMove(obj, attr, iT, onEnd){ clearInterval(obj.timer); obj.timer = setInterval(function(){ dMove(obj, attr, iT, onEnd); },30); } function dMove(obj, attr, iT, onEnd){ var iCur = 0; attr == 'opacity' ? iCur = parseInt(parseFloat(getStyle(obj, attr)*100)) : iCur = parseInt(getStyle(obj, attr)); var iS = (iT - iCur) / 5; iS = iS > 0 ? Math.ceil(iS) : Math.floor(iS); if(iCur == iT){ clearInterval(obj.timer); if(onEnd){ onEnd(); } }else{ if(attr == 'opacity'){ obj.style.ficter = 'alpha(opacity:'+(iCur + iS)+')'; obj.style.opacity = (iCur + iS) / 100; }else{ obj.style[attr] = iCur + iS +'px'; } } }
CSS代码:
*{ margin:0; padding:0; list-style:none;} img{ border:0;} a{color:#BBB} body{ background:#23375C; padding-top:150px;color:#BBB;font-size:14px;line-height:20px} #ztbox {width:970px; height:420px; margin:0 auto;} #ztbox #left { width:35px; height:63px; float:left; cursor:pointer;background:url(../images/banner_pre.jpg) no-repeat; margin-top:140px;} #ztbox #right{ width:35px; height:63px; float:left; cursor:pointer;background:url(../images/banner_next.jpg) no-repeat; margin-top:140px;} #ztbox #conter { width:880px; height:400px; float:left; display:inline; overflow:hidden; position:relative; margin:0px 10px;} #ztbox #conter ul { width:auto; height:357px; top:0px; left:0px; position:absolute; overflow:hidden;} #ztbox #conter li { width:167px; height:357px; float:left;padding:0px 5px; position:relative;} #ztbox #conter li img { width:167px; height:357px;} #ztbox #scroll { width:880px; height:18px; left:0px; bottom:8px; cursor:pointer; position:absolute; background:url(../images/banner_bg_xi.jpg) repeat-x left center; } #ztbox #scroll span { width:48px; height:18px; left:0px; bottom:0px; cursor:pointer; position:absolute; background:#FFEA00; }
HTML代码:
<div id="ztbox"> <div id="left"></div> <div id="conter"> <ul> <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b1.png" /></a></li> <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b2.png" /></a></li> <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b3.png" /></a></li> <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b4.png" /></a></li> <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b5.png" /></a></li> <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b6.png" /></a></li> <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b7.png" /></a></li> </ul> <div id="scroll"> <span></span> </div> </div> <div id="right"></div> </div>
本文参考:http://www.aid12580.com/
原文地址:https://www.cnblogs.com/cannovo/p/11359257.html