<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Slide's Focus chart </title>
<script src= "Webui/js/jquery-1.4.1.min.js" type= "Text/javascript" charset= "Utf-8" ></script>
/***************** need to introduce the js***********************************************************/
<script type= "Text/javascript" src= "Webui/js/focus.js" charset= "Utf-8" ></script>
<style type= "Text/css" >
. container{width:100%;height:500px;margin:100px auto 0px;}
. focus{width:1200px;height:100%;margin:0px auto; overflow:hidden;position:relative;}
The size of the/******************ul is a little more convenient to store more than one picture ***************************************/
. focus ul{width:8000px;height:100%;margin:0px;padding:0px;}
. focus ul Li{width:1200px;height:100%;list-style:none;float:left; Overflow:hidden;}
/**************** Click the style of the button *****************************/
. Btn_ape,.btn_pre{width:50px;height:50px;position:absolute;z-index:100;top:225px;cursor:pointer;}
. Btn_pre{left:50px;background:url (Webui/images/icons_cb372887.png) no-repeat left top;}
. Btn_ape{right:50px;background:url (Webui/images/icons_cb372887.png) No-repeat right top;}
</style>
/******************* transparent picture in the IE6 will still have a gray shadow, plus the following statement can be compatible with ie6,pngfix.js on the internet to find their own, the rest of the original writing can ******************************* **************/
<!--[if IE 6]>
<script src= "Pngfix.js" mce_src= "Pngfix.js" ></script>
<script type= "Text/javascript" >dd_belatedpng.fix (' * ');</script>
<! [endif]-->
<body>
<div class= "Container" >
<div class= "Focus" >
<ul>
/*************************** to show the picture *****************************************/
<li>
<a href= "javascript://" ></a>
</li>
<li>
<a href= "javascript://" ></a>
</li>
<li>
<a href= "javascript://" ></a>
</li>
<li>
<a href= "javascript://" ></a>
</li>
<li>
<a href= "javascript://" ></a>
</li>
</ul>
/****************** Two-click button *****************************************/
<div class= "Btn_pre" ></div>
<div class= "Btn_ape" ></div>
</div>
</div>
</body>
/*****************************focus.js***********************************/
$ (function () {
Animate (); Function call
/************ left button click event ************************************/
$ (". Btn_pre"). Click (function () {
if (!isrun) {
_index--;
Focus ();
}
});
/******************* Right button click event ******************************************/
$ (". Btn_ape"). Click (function () {
if (!isrun) {
_index++;
Focus ();
}
});
/********************** Mouse Hover Stop carousel, the mouse left to continue the carousel, this is not very sensitive (more mobile mouse to be effective), in the search for reasons ******************************/
$ (". Focus ul"). MouseOver (function () {
Cleartimeout (interval);
}). MouseLeave (function () {
Cleartimeout (interval);
Animate ();
});
});
/****************************** Defining global Variables *******************************************/
var _index = 0;
var _length = 5;
var isrun = false;
Window.interval;
function Animate () {
/***********************settimeout is performed only once and SetInterval is interval 2000ms (set by itself) loop execution **************************/
Interval = setinterval (function () {
if (!isrun) {
_index++;
Focus (); Calling functions
}
}, 2000);
}
function Focus () {
Cleartimeout (interval);
/** clears the setinterval loop ***/
Isrun = true;
var first = 0;
/************ if it is the first picture, the picture is switched to the left *******************/
/*************** principle is when the picture is the first and this time you have to click on the left button to let it go from right to left, this time add an Li in the ul Li in the last side, and then let the entire UL move to the left, so that can compensate for the gap between the switch ************/
if (_index = =-1) {
$ (". Focus ul"). CSS ("Margin-left", -1200 * _length + "px");
$ (". Focus ul"). Append ("<li>" + $ (". Focus ul Li:first"). HTML () + "</li>");
_index = _length-1;
First = 1;
}
/********************* If this is the last picture ***************************************/
/*************** principle is when the picture is the last one and this time you have to click on the right button to go from left to right or auto-walk, this time add a Li in the top of the UL Li, and then let the entire UL move to the right, so that can compensate for the gap between the switch ******* *********/
if (_index = = _length) {
$ (". Focus ul"). CSS ("Margin-left", 0);
$ (". Focus ul"). Prepend ("<li>" + $ (". Focus ul Li:last"). HTML () + "</li>");
_index = 1;
First = 2;
}
/*********************************** let the picture move in animated form, where 500ms is the time of the picture switching process ********************************************/
$ (". Focus ul"). Animate ({
"Margin-left": ( -1200 * _index) + "px"
}, the function () {
Isrun = false;
Animate ();
if (first = = 1) {
/***************** remove the added Li ********************************/
$ (". Focus ul Li:last"). Remove ();
}
if (first = = 2) {
if (_index = = 1) {
_index = 0;
$ (". Focus ul"). CSS ("Margin-left", "0px");
}
/***************** remove the added Li ********************************/
$ (". Focus ul Li:first"). Remove ();
$ (". Focus ul"). CSS ("Margin-left", "0px");
}
});
}
Clickable Focus Chart
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
