WebApp圖片輪播banner
阿新 • • 發佈：2018-12-22
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebApp圖片輪播</title> <script src="js/jquery-1.8.3.min.js"></script> </head> <!--圖片輪播css--> <style type="text/css"> img { border:0; *display:inline; } li { border:0; list-style-type :none; } ul { list-style:none; margin:0; padding:0; } body{ overflow-x:hidden; margin:0 auto; padding:0; width: 100%; height: 100%; } .WSCSlideWrapper{ width:100%; position: relative; margin:0 auto; //cursor:move; } #WSCSlideWrapperTwo{ width:50%; position: relative; margin:10px auto; //cursor:move; } </style> <body> <div class="WSCSlideWrapper" id="WSCSlideWrapper" style="height: hidden;"> <div style="position: absolute; z-index: 1; overflow: hidden; " id="bannerimages"> </div> <div class="navimgs" style=" display: block; width: 100%; min-height: 2em; padding: 0.5em 1em; position: absolute; z-index: 2; bottom: 0; background-color: rgba(0,0,0,0); color: #FFF;"> <span style="display: block; width: 100%; min-height: 2em; position: absolute; bottom: 0; background-color: rgba(0,0,0,0); color: #FFF;" id="bannerjieshao"></span> <div class="circlewrapper" style="overflow: hidden; height: 2em; float: right; width:40%;margin-top:.5em; display:block;"></div></div> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $('.WSCSlideWrapper').height($('.WSCSlideWrapper').width()*0.4); $('#WSCSlideWrapperTwo').height($('#WSCSlideWrapperTwo').width()*1.5); $('.WSCSlideWrapper').touchslide({timecontrol:3000,animatetime:300,direction:'left',navshow:true,canvassuport:true}); }); </script> <script type="text/javascript"> /* * touchslide 1.1 * Copyright (c) 2014 BowenLuo http://www.luobo.com/ * Date: 2014-06-08 * Example:$('.WSCSlideWrapper').touchslide({timecontrol:3000,animatetime:300,direction:'left',navshow:true,canvassuport:true}); * Update:增加對IE9+等非Safari核心瀏覽器的滑鼠拖動圖片功能 */ (function ($) { $.fn.touchslide = function (options) { //初始化圖片 var textstr = ""; textstr += "<a href=\"#\" style=\"position: relative; overflow: hidden; float: left; width: 100%; height: 16em;\" ><img src=\"imgs/5.jpg\" style=\"position: relative; z-index: 1; width: 100%; height: 16em;\"><span style=\"display: block; width: 100%; min-height: 2em;position: absolute; bottom: 0; background-color: rgba(0,0,0,0);color: #FFF; z-index:180;\">中國人5</span></a>"; textstr += "<a href=\"#\" style=\"position: relative; overflow: hidden; float: left; width: 100%; height: 16em;\" ><img src=\"imgs/1.jpg\" style=\"position: relative; z-index: 1; width: 100%; height: 16em;\"><span style=\"display: block; width: 100%; min-height: 2em;position: absolute; bottom: 0; background-color: rgba(0,0,0,0);color: #FFF; z-index:180;\">中國人1</span></a>"; textstr += "<a href=\"#\" style=\"position: relative; overflow: hidden; float: left; width: 100%; height: 16em;\" ><img src=\"imgs/2.jpg\" style=\"position: relative; z-index: 1; width: 100%; height: 16em;\"><span style=\"display: block; width: 100%; min-height: 2em;position: absolute; bottom: 0; background-color: rgba(0,0,0,0);color: #FFF; z-index:180;\">中國人4</span></a>"; textstr += "<a href=\"#\" style=\"position: relative; overflow: hidden; float: left; width: 100%; height: 16em;\" ><img src=\"imgs/3.jpg\" style=\"position: relative; z-index: 1; width: 100%; height: 16em;\"><span style=\"display: block; width: 100%; min-height: 2em;position: absolute; bottom: 0; background-color: rgba(0,0,0,0);color: #FFF; z-index:180;\">中國人2</span></a>"; textstr += "<a href=\"#\" style=\"position: relative; overflow: hidden; float: left; width: 100%; height: 16em;\" ><img src=\"imgs/4.jpg\" style=\"position: relative; z-index: 1; width: 100%; height: 16em;\"><span style=\"display: block; width: 100%; min-height: 2em;position: absolute; bottom: 0; background-color: rgba(0,0,0,0);color: #FFF; z-index:180;\">中國人3</span></a>"; $("#bannerimages").append(textstr); var defaults = { timecontrol: 3000, //圖片停留時間 animatetime: 300, //圖片滑動所需時間 direction: 'left', //輪播方向 navshow: true, //是否顯示圖片導航欄 canvassuport: true//圖片導航欄是否開啟cavas繪製圓 } var options = $.extend(defaults, options); var timecontrol = options.timecontrol || 3000; var animatetime = options.animatetime || 300; var direction = options.direction || 'left'; var navshow = options.navshow; this.each(function () { var slideWrapper = $(this); var slideImgWrapper = slideWrapper.children('div:first'); var slideAs = slideImgWrapper.children('a'); var slideImgs = slideAs.children('img'); var imgcount = slideImgs.length; var imgcountrealy = slideImgs.length; var navimgs; var circlewrapper; var circles; var canvassuport = true; var circler = 0; var navimgsbuttom = 0; if (imgcount > 1) { $((slideImgWrapper.html().split("/a>")[0] + "/a>" + slideImgWrapper.html().split("/a>")[1] + "/a>")).insertAfter(slideAs.last()); debugger; //$((slideImgWrapper.html().split("/a>")[0] + "/a>" + slideImgWrapper.html().split("/a>")[1] + "/a>")).insertBefore(slideAs.last()); if (navshow) { $("<div class='navimgs'></div>").insertAfter(slideImgWrapper); navimgs = slideWrapper.children('div:last'); navimgs.append("<div class='circlewrapper'></div>"); circlewrapper = navimgs.children('div:first'); for (var i = 0; i < imgcountrealy; i++) { circlewrapper.append("<canvas class='circle' width='15' height='15'></canvas>"); } circles = circlewrapper.children('canvas'); var myCanvas = circles[1]; if (!myCanvas.getContext) { canvassuport = false; } else { canvassuport = options.canvassuport; } } } slideAs = slideImgWrapper.children('a'); slideImgs = slideAs.children('img'); imgcount = slideImgs.length; var slideWrapperWidth = slideWrapper.width(); var slideWrapperHeight = slideWrapper.height(); slideWrapper.css({ "overflow": "hidden", "width": slideWrapperWidth, "height": slideWrapperHeight }); slideImgWrapper.css({ 'position': "absolute", "z-index": "1", "overflow": "hidden", "width": slideWrapperWidth * imgcount, "height": slideWrapperHeight }); slideAs.css({ 'position': "relative", "overflow": "hidden", "float": "left", "width": slideWrapperWidth, "height": slideWrapperHeight }); slideImgs.css({ 'position': "relative", "z-index": "1", "width": slideWrapperWidth, "height": slideWrapperHeight }); if (typeof (navimgs) !== 'undefined') { if (navshow) { if (slideWrapperWidth * 0.03 > 15) { circler = 15; } else { circler = slideWrapperWidth * 0.03; } if (slideWrapperHeight > 360) { navimgsbuttom = 8; } else if (slideWrapperHeight > 240) { navimgsbuttom = 6; } else if (slideWrapperHeight > 120) { navimgsbuttom = 4; } else { navimgsbuttom = 2; } navimgs.css({ "position": "absolute", "z-index": "3", "overflow": "hidden", "display": "block", "width": slideWrapperWidth, "height": circler, "bottom": navimgsbuttom }); circlewrapper.css({ "position": "relative", "overflow": "hidden", "width": (slideWrapperWidth * 0.05 * imgcountrealy), "height": circler, "margin-top": ".5em" }); circles.css({ 'position': "relative", "float": "left", "max-width": 15, "max-height": 15, "margin-left": slideWrapperWidth * 0.01 }); circles.attr("width", circler); circles.attr("height", circler); canvacircle(0); for (var i = 0; i < circles.length; i++) { navclick(i); } } else { navimgs.css({ "display": "none" }); } } if (imgcount < 4) { return; } slideImgWrapper.css({ 'left': -slideWrapperWidth }); var st; var sts; sts = setTimeout(function () { timedCount(); }, timecontrol); slideWrapper.hover(function () { stopAll(); }, function () { sts = setTimeout(function () { timedCount(); }, timecontrol); }); mouseDrag(slideWrapper); touchDrag(slideWrapper); function timedCount() { if (direction == 'left') { turnleft(); } if (direction == 'right') { turnright(); } clearTimeout(st); st = setTimeout(function () { timedCount(); }, timecontrol); } function stopCount() { if (st != "") { clearTimeout(st); } } function stopAll() { stopCount(); clearTimeout(sts); slideImgWrapper.stop(true); } function navclick(navnum) { circlewrapper.children('canvas:eq(' + navnum + ')').click(function (e) { scideimgskip(navnum + 1); }) } function scideimgskip(imgnum) { stopAll(); turnleftwidth = imgnum * slideWrapperWidth; slideImgWrapper.stop(true).animate({ left: -turnleftwidth }, animatetime, function () { var imgnum = turnleftwidth / slideWrapperWidth - 1; if (imgnum == 0) { imgnum = imgcountrealy; } if ((imgnum - imgcountrealy) == 0) { imgnum = 0; } canvacircle(imgnum); }); } function canvacircle(canvanum) { circles.attr("width", circler); circles.attr("height", circler); for (var i = 0; i < circles.length; i++) { if (canvassuport) { var navCanvas = circles[i]; var cxt = navCanvas.getContext("2d"); if (i == canvanum) { cxt.fillStyle = "#0182D7"; } else { cxt.fillStyle = "#ddd"; } cxt.arc(circler * 0.5, circler * 0.5, circler * 0.5, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); } else { circles.css("background", "#ddd"); circlewrapper.children('canvas:eq(' + canvanum + ')').css("background", "#0182D7"); } } } var turnleftwidth = slideWrapperWidth; function turnleft() { turnleftwidth = turnleftwidth + slideWrapperWidth; if (turnleftwidth > (imgcount - 2) * slideWrapperWidth) { slideImgWrapper.css({ 'left': 0 }); turnleftwidth = slideWrapperWidth; } slideImgWrapper.stop(true).animate({ left: -turnleftwidth }, animatetime, function () { var imgnum = turnleftwidth / slideWrapperWidth - 1; if (imgnum == 0) { imgnum = imgcountrealy; } if ((imgnum - imgcountrealy) == 0) { imgnum = 0; } canvacircle(imgnum); }); } function turnright() { turnleftwidth = turnleftwidth - slideWrapperWidth; if (turnleftwidth == 0) { slideImgWrapper.css({ 'left': -slideWrapperWidth * (imgcount - 1) }); turnleftwidth = slideWrapperWidth * (imgcount - 2); } slideImgWrapper.stop(true).animate({ left: -turnleftwidth }, animatetime, function () { var imgnum = turnleftwidth / slideWrapperWidth - 1; if (imgnum == 0) { imgnum = imgcountrealy; } if ((imgnum - imgcountrealy) == 0) { imgnum = 0; } canvacircle(imgnum); }); } var distanceX = 0; function toLeft() { if (turnleftwidth > (imgcount - 3) * slideWrapperWidth) { slideImgWrapper.css({ "left": distanceX }); turnleftwidth = 0; } turnleft(); sts = setTimeout(function () { timedCount(); }, timecontrol); } function toRight() { if (turnleftwidth == slideWrapperWidth) { slideImgWrapper.css({ 'left': -slideWrapperWidth * (imgcount - 1) + distanceX }); turnleftwidth = slideWrapperWidth * (imgcount - 1); } turnright(); sts = setTimeout(function () { timedCount(); }, timecontrol); } function mouseDrag($element) { var eventEle = $element; var stx = etx = curX = 0; var MAction = false; var ahrefs = []; for (var i = 0; i < slideAs.length; i++) { if (typeof (slideImgWrapper.children('a:eq(' + i + ')').attr('href')) !== 'undefined') { ahrefs.push(slideImgWrapper.children('a:eq(' + i + ')').attr('href')); } } eventEle.mouseover(function () { for (var i = 0; i < slideAs.length; i++) { if (typeof (slideImgWrapper.children('a:eq(' + i + ')').attr('href')) !== 'undefined') { slideImgWrapper.children('a:eq(' + i + ')').attr('href', ahrefs[i]); } } }); eventEle.mousemove(function (event) { if (MAction) { var changeX = event.pageX - stx; slideImgWrapper.css({ "left": -turnleftwidth + changeX }); distanceX = changeX; } event.preventDefault(); }).mousedown(function (event) { stopAll(); MAction = true; stx = event.pageX; event.preventDefault(); }); eventEle.mouseup(function (event) { etx = event.pageX; curX = etx - stx; MAction = false; if (curX > 5) { slideAs.attr("href", "javascript:void(0)"); toRight(); } if (curX < -5) { slideAs.attr("href", "javascript:void(0)"); toLeft(); } event.preventDefault(); }); } function touchDrag($element) { var gundongX = 0; var gundongY = 0; var moveEle = $element; var stx = sty = etx = ety = curX = curY = 0; var ImgWidth_arr = []; for (var i = 0; i < imgcount; i++) { ImgWidth_arr.push(i * slideWrapperWidth); } moveEle.on("touchstart", function (event) { //touchstart stopAll(); var event = event.originalEvent; gundongX = 0; gundongY = 0; //alert(etx); // 手指位置 stx = event.touches[0].pageX; sty = event.touches[0].pageY; }); moveEle.on("touchmove", function (event) { var event = event.originalEvent; // 防止拖動頁面 event.preventDefault(); // 手指位置 減去 元素當前位置 就是 要移動的距離 gundongX = event.touches[0].pageX - stx; gundongY = event.touches[0].pageY - sty; // 目標位置 就是 要移動的距離 加上 元素當前位置 slideImgWrapper.css({ "left": -turnleftwidth + gundongX }); distanceX = gundongX; }); moveEle.on("touchend", function (event) { if (Math.abs(gundongX) > 5) { event.preventDefault(); if (gundongX > 0) { // 右滑 toRight(); } else { // 左滑 toLeft(); } } }); } }); }; })(jQuery); </script> </html>