一、代码分两个部分:1、HTML部分,根据注释处理即可;2、基于jQuery的play.js插件部分,这里为了展示效果,直接写在<html></html>下的<script></script>标签里。3、效果包含:自动轮播,焦点对齐,前进后退,直走不返,鼠标进入、轮播停止且前进后退图标出现,鼠标离开、轮播重启且前进后退图标隐藏。4、这里可以预览效果。二、轮播图原理说明:(1)轮播图(假设)有7张图片,“一”字排列,把第1张图片复制一次,放到第8张的位置,这样共有8张图片;轮播开始后,(2)整个第2秒内,第2张图片从开始出现到完全出现,耗时700毫秒,完全出现后再停留300毫秒;(3)整个第3秒内,第3张图片从开始出现到完全出现,耗时700毫秒,完全出现后再停留300毫秒;以此类推(4)整个第8秒内,第8张图片从开始出现到完全出现,耗时700毫秒,完全出现后再停留300毫秒;注意(5)整个第9秒内,轮播图急速回到第1张图片完全出现的状态,耗时约0毫秒(即运行autoMove方法中if语句块的耗时),然后立即开始(2)步骤。三、也可以用命名空间的方式进行扩展:<script> $.myPlugin = { banner: function (width, height) {----插件代码---- } };</script><script> $.myPlugin.banner(‘500px‘, ‘250px‘);</script> ```html:run<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style>/*style标签及其内的内容,在实际项目中可以不要*/ * { margin: 0; padding: 0; } </style></head><body><!--body标签里的内容,没说可以增减或更改的,不要增减或更改--><div id="box"> <div> <!--以下是可增减区域--> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" /></div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" /></div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" /> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" /> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg" /> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg" /> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg" /> </div> <!--以上是可增减区域--> </div></div></body></html><script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script><script> (function($){ $.fn.extend({ banner: function (width, height) { var $oBox = $("#box"); /*以下最外层div*/ $oBox.css({ "height": height, "width": width, "margin": "0 auto", "overflow": "hidden", "position": "relative" }); /*以下轮播区的div*/ var $oBoxInner = $oBox.children(‘div‘); var aDiv = $oBoxInner[0].innerHTML; /* 轮播区内部原来的值*/ var aDiv0 = $oBoxInner.children(‘div‘)[0].outerHTML; /*第一个轮播图片的外部*/ $oBoxInner.html(aDiv + aDiv0); /* 用jQuery的方法给轮播区内部重新赋值*/ var $width = parseFloat(width) * $oBoxInner.children(‘div‘).length + "px"; $oBoxInner.css({ "height": height, "width": $width, "position": "absolute", "left": 0, "right": 0, "float": "left" }); $oBoxInner = $oBox.children(‘div‘); var $aDiv = $oBoxInner.children("div"); $aDiv.css({"width": width, "height": height, "float": "left"}); $aDiv.children(‘img‘).css({"width": "100%", "height": "100%"}); /*以下是焦点区部分(定位在轮播区的右下方)*/ $oBox.append("<ul></ul>"); var $ul = $oBox.children("ul"); var $li = ""; $aDiv.each(function (index) { if (index < $aDiv.length - 1) { $li += ‘<li></li>‘; } }); $ul.append($li); $ul = $oBox.children("ul"); $ul.css({"position": "absolute", "right": "10px", "bottom": "10px"}); $li = $ul.children("li"); $li.css({ "width": "18px", "height": "18px", "float": "left", "listStyle": "none", "background": "green", "borderRadius": "50%", "marginLeft": "10px", "cursor": "pointer" }); /*以下是向左向右两个箭头式按钮*/ var $a = "<a href = ‘javascript:;‘></a><a href = ‘javascript:;‘></a>"; $oBox.append($a); /*以下是左按钮(点击它,图片向左运动)*/ var $oBtnL = $oBox.children(‘a‘).eq(0); $oBtnL.css({ "width": "30px", "height": "30px", "position": "absolute", "top": (parseFloat(height) / 2 - 15) + "px", "left": "30px", "border": "10px solid red", "borderLeft": "none", "borderBottom": "none", "opacity": 0.6, "filter ": "alpha(opacity=60)", "display": "none", "transform": "rotate(-135deg)" }); $oBtnL.click(function () { if ($step <= 0) { $step = $aDiv.length - 1; $oBoxInner.css(‘left‘, -$step * parseFloat(width)); } $step--; $oBoxInner.animate({left: -$step * parseFloat(width)}); $bannerTip(); }); /*以下是右按钮(点击它,图片向右运动)*/ var $oBtnR = $oBox.children(‘a‘).eq(1); $oBtnR.css({ "width": "30px", "height": "30px", "position": "absolute", "top": (parseFloat(height) / 2 - 15) + "px", "right": "30px", "border": "10px solid red", "borderLeft": "none", "borderBottom": "none", "opacity": 0.6, "filter": "alpha(opacity=60)", "display": "none", "transform": "rotate(45deg)" }); $oBtnR.click(function () { if ($step >= $aDiv.length - 1) { $step = 0; $oBoxInner.css(‘left‘, 0) } $step++; $oBoxInner.animate({left: -$step * parseFloat(width)}, 1000); $bannerTip(); }); var $step = 0;//记录每次运动 var $timer = null;//定时器 $init();//初始化轮播图 function $init() { /*1.开启自动轮播*/ $timer = setInterval(function () { $autoMove(); }, 2000); /*2.开启焦点,每个焦点与每张轮播图对应*/ $bannerTip(); /*3.鼠标移入轮播区,轮播暂停;鼠标移出轮播区,轮播恢复*/ $over_out(); } $li.each(function (index) { $(this).on(‘click‘, function () { $step = index; $oBoxInner.animate({left: -$step * parseFloat(width)}, 1000); $bannerTip(); }) }); function $autoMove() { if ($step >= $aDiv.length - 1) { $step = 0; $oBoxInner.css(‘left‘, 0) } $step++; $oBoxInner.animate({left: -$step * parseFloat(width)}, 1000); $bannerTip(); } function $bannerTip() { var tmpStep = $step >= $li.length ? 0 : $step; $li.each(function (index) { $li.eq(index).attr("class",index === tmpStep ? ‘on‘ : null); if ($li.eq(index).attr("class") === "on") { $li.eq(index).css("background","red"); } else { $li.eq(index).css("background","green"); } }) } function $over_out() { $oBox.mouseover(function () { clearInterval($timer); $oBtnL.css({"display": "block"}); $oBtnR.css({"display": "block"}); }); $oBox.mouseout(function () { $timer = setInterval(function () { $autoMove() }, 2000); $oBtnL.css({"display": "none"}); $oBtnR.css({"display": "none"}); }); } } }) })(jQuery)</script><script> $("#box").banner(‘500px‘, ‘250px‘);</script>```
原文地址:https://www.cnblogs.com/gushixianqiancheng/p/10967124.html
时间: 2024-10-15 07:28:14