A concise example of the effect of a carousel diagram in jquery _jquery

This article illustrates the simplicity of jquery's carousel graph effect. Share to everyone for your reference, specific as follows:

Html:

<div class= "ppt" > <a href= "###" ></a> <a href= "###"
  Style= "Display:none;" ></a> <a href= "###" style= "Display:none"
  ; ></a> <a href= "###" style= "Display:none"
  ; ></a>
  <div class= "Pptnum" >
    <span class= "Normal" >4< /SPAN>
    <span class= "normal" >3</span>
    <span class= "normal" >2</span>
    < span class= "cur" >1</span>
  </div>
</div>

Css:

* * Slide/*
ppt{width:270px; height:330px border:1px solid #ccc; position:relative;
ppt img{position:absolute; top:10px; left:7px; width:255px; height:310px; overflow:hidden;}
. pptnum{position:absolute; height:13px; line-height:14px; bottom:12px; right:10px;
Pptnum span{font-size:12px; font-weight:400; color: #FFF; float:right; display:block; width:24px; text-align:center ; Background: #000; Border-left:solid 1px #FFF; Cursor:pointer;
pptnum. normal{color: #FFF; background: #000; Filter:alpha (opacity=50); opacity:. 5;}
. Pptnum. cur{background: #ce0609; color: #FFF;}

Js:

Call JQ:

<script type= "Text/javascript" src= "js/jquery-1.10.1.min.js" ></script>
<script type= "text/" JavaScript "src=" Js/ppt.js ></script>

Effect Chart:

More interested readers of jquery-related content can view this site: "jquery switching effects and tips summary", "jquery extension Techniques Summary", "jquery common Plug-ins and Usage summary", "jquery drag and drop effects and tips summary", "jquery Table" ( Table) Summary of operational techniques, "Summary of Ajax usage in jquery", "jquery common Classic Effects Summary", "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"

I hope this article will help you with the jquery program design.