码迷,mamicode.com
首页 > Web开发 > 详细

84JS插件:jQuery版轮播图

时间:2019-06-03 14:13:33      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:transform   err   ref   point   直接   back   doc   后退   dex   

一、代码分两个部分: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>
```

84JS插件:jQuery版轮播图

标签:transform   err   ref   point   直接   back   doc   后退   dex   

原文地址:https://www.cnblogs.com/gushixianqiancheng/p/10967124.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!