This example describes the jquery focus diagram instance code. Share to everyone for your reference. Specifically as follows:
For many of the friends of the station, the focus map is not unfamiliar, the general Enterprise station, portal station will use the focus map. We usually write HTML code, a lot of people in order to save time and effort, for the focus of the map are on the Internet to download some people write good code, directly set up can be, many times I am the same way. Because a focus map has HTML layouts, CSS style debugging, and the most critical JavaScript statements written. These are all a very troublesome process.
Today I'll give you an example of how to write a jquery focus diagram. jquery is the framework of JS package, so that JS syntax becomes simple, many well-known sites are using this framework. Here, the star for the simple grammar, so that most users can read, but also cited the jquery framework.
To make a long story short, I posted the source code and the corresponding annotation directly. The specific code is as follows:
<! DOCTYPE html>
<title>focus code Powered by boyxing.com</title>
<script type= "Text/javascript" src= "js/jquery.js" ></script><!--referencing the jquery framework-->
<!--CSS definition, you can define your own--> according to your needs
<style type= "Text/css" >
body,ul,li{margin:0; padding:0}
ul,li{List-style:none;}
. focus{margin:0 Auto; height:320px; width:980px; overflow:hidden; position:relative; padding:0;
. focus. bigpic{position:absolute;padding:0}
. focus. Bigpic li{width:980px;float:left;padding:0}
. focus. btn{Overflow:hidden; height:30px;position:absolute; bottom:3px; left:50%; margin-left:-100px;}
. focus. btn li{Float:left; margin:0 10px; padding:5px; Cursor:pointer; Background: #fff; border:1px #900 solid;border-radius:12px; height:12px; width:12px; Overflow:hidden; Text-align:center; line-height:12px;opacity:0.6; Float:left;}
. focus. BTN li.on{background: #990000; color: #FFFFFF;}
</style>
<body>
<!--focus Map div section begins-->
<div class= "Focus" >
<div class= "Focuscon" >
<ul class= "Bigpic" >
<li><a href= "#" ></a></li >
<li><a href= "#" ></a></li >
<li><a href= "#" ></a></li >
<li><a href= "#" ></a></li ><!--The number of focus maps is not limited to-->
</ul>
</div>
</div>
<!--focus Graph div section ends-->
</body>
<script type= "Text/javascript" >
$ (document). Ready (function () {
var num=$ (". Bigpic li"). length;//get the number of focus graphs
var fwidth=$ (". Bigpic li"). width ();//Get the widths of each focus graph
var sec=4000;//time switch interval
var btn = ' <ul class= ' btn ' ><li class= ' on ' >1</li> ';
var btnend = ' </ul> ';
for (i=2;i<=num;i++) {btn + = ' <li> ' +i+ ' </li> ';};
BTN + = Btnend;
if (num = = 1) {btn = null};
$ (". Focus"). Append (btn); automatically adds a toggle button based on the number of focal figures, if only one picture does not display a toggle button.
$ (". Bigpic"). CSS ("width", fwidth*num);//Set the width of the large drawing set, that is, the width of all the focus graphs.
$ (". Btn li"). Bind ("MouseOver", function () {
$ (this). addclass (' on '). Siblings (). Removeclass ("on");
var i=$ (". btn li"). index (this); var marginl=fwidth*i;
$ (". Bigpic"). Animate ({"Left":-marginl},500);}
//Mouse point button, Focus diagram switch to the corresponding position, the button style changes. MouseOver is the mouse through, here can also be changed to click, by clicking the switch focus.
Pictimer = SetInterval (timeset,sec); Specifies the SEC millisecond after the Timeset function is executed.
function Timeset () {
var j = $ (". Btn li"). Index ($ (". on");//Gets the position of the current focus diagram, which is the ordinal number on which class is on.
var Timew = fwidth* (j+1);
if (j = = Num-1) {$ (". Btn li"). EQ (0). addclass (' on '). Siblings (). Removeclass ("on"), $ (". Bigpic"). Animate ({"Left": 0},500 );}
else{$ (". btn li"). EQ (j+1). addclass (' on '). Siblings (). Removeclass ("on"), $ (". Bigpic"). Animate ({"Left":-timew},500) ;};
};
$ (". Focus"). MouseOver (function () {clearinterval (Pictimer);});
$ (". Focus"). Bind ("Mouseout", function () {Pictimer = SetInterval (timeset,sec);}
/////When the mouse points to the focus or toggle button, the timer clears, that is, the automatic switch is not performed and the mouse is left to resume automatic switching.
})
</script>
I hope this article will help you with your jquery programming.
