A code in two parts: 1, HTML part, according to annotation processing; 2, based play.js jQuery insert portion, where in order to demonstrate the effect of directly written in the <html> </ html> The <script> </ script> tag. 3, the effect includes: automatically rotate, align the focus, forward and back, do not go straight back, into the mouse, the carousel stops and forward and back icon, mouse leave, to restart the carousel and forward and back icons hidden. 4, where you can preview the effect.
Second, the rotation principle described in FIG:
(1) FIG rotation (assuming) 7 pictures, "one" arrangement, the images of the first copy once, into a position of 8, so that a total of eight images; after the rotation begins,
(2) the entire 2 seconds, the two images appear from the beginning to fully emerge, took 700 milliseconds, 300 milliseconds to stay fully appear before;
(3) throughout the first three seconds, the first three pictures appear completely from beginning to appear, took 700 milliseconds, 300 milliseconds to stay fully appear before; so
within (4) throughout the first 8 seconds, 8 pictures appear completely from beginning to appear, took 700 milliseconds, completely appears after 300 milliseconds residence; note that
the inner (5) of the whole 9 seconds, FIG rapid rotation back to the first state of a complete image appears, it takes about 0 milliseconds (i.e., time-consuming operation of autoMove if block method) and then begin immediately (2) step.
Third, the embodiment may also be extended with namespace:
<Script>
$ = {.myPlugin Banner: function (width, height) {}} ---- plug-in code ----;
</ Script>
<Script>
$ .myPlugin.banner ( '500px', '250px');
</ Script>
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> </ title>
<style> content / * in style tags and, in the actual project can not * /
* {
margin: 0;
padding: 0;
}
</ style>
</ head>
<body>
! <- the contents of the tag body, may be increased or decreased or changed did not say, decrease or do not change ->
<div ID = "Box">
<div>
<-! the following is an increase or decrease in area ->
<div> <IMG the src = "http://img.pconline.com.cn/images/upload /upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg "Alt =" "/> </ div>
http://img.pconline.com <div> <IMG the src =."E / images / upload / upc / TX / photoblog / 1509/06 / c5 / 12226915_12226915_1441517841171_mthumb.jpg "alt =" "/> </ div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg" alt=""/>
</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 the rotation area * /
var $ oBoxInner oBox.children = $ ( 'div');
var = $ ADIV oBoxInner [0] .innerHTML;
/ * Rotation Area inside the original value * /
var aDiv0 oBoxInner.children = $ ( 'div') [0] .outerHTML;
/ * first external carousel image * /
$ oBoxInner.html (aDiv0 ADIV +);
/ * in jQuery the method of the internal region reassigned rotation * /
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"
});
/ * The following are two left or right arrow buttons * /
var A $ = "<a'javascript:;'> </a> the href = <a'javascript:;'> the href = </ A > ";
$ oBox.append ($ A);
/ * the following is the left button (click on it, the picture moves to the left) * /
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();
});
/ * The following is the right button (click on it, the picture moves to the right) * /
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; // record each movement
var $ timer = null; // timer
$ init (); / / carousel FIG initialization
function $ the init () {
/ * open the automatic rotation. 1 * /.
$ Timer = the setInterval (function () {
$ Automove ();
}, 2000);
/ * Open focal 2, each focus with each rotation corresponding to FIG. * /.
$ BannerTip ();
. /. 3 * mouse zone into rotation, rotation pause; mouse out of the rotation area, wheel sowing recovery * /
$ over_out ();
}
$ li.each (function (index) {
$ (the this) .on ( 'the Click', function () {
$ STEP = index;
$ oBoxInner.animate ({left: - $ * parseFloat STEP (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 plug-in: jQuery version Carousel Figure
Guess you like
Origin www.cnblogs.com/gushixianqiancheng/p/10967124.html
Recommended
Ranking