jquery special effects of the slide must be no stranger to it, the following for you to share a relatively good slide effect, with the source code, interested friends can learn ha
jquery effects slide effects, as shown below:
Copy Code code as follows:
<! DOCTYPE html>
<html>
<head>
<meta http-equiv= "Content-type" content= "text/html"; Charset=utf8 "/>
<title>jquery Special Effects </title>
<style>
/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{ margin:0;padding:0;border:0;}
Ul,ol,li{list-style:none;}
Input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:arial, Helvetica, Sans-serif; text-align:center; margin:0 auto;
table{border-collapse:collapse;border-spacing:0;}
a{color: #333; text-decoration:none;}
. box{width:420px; margin:20px auto; position:relative; overflow:hidden; text-align:left;}
. Box img{border:0px; width:420px;}
. big{width:100%; float:left; height:196px; overflow:hidden; margin-bottom:2px;
. Big a{Display:none;
. Big span{position:absolute left:0; top:167px; font-size:13px; color: #fff; z-index:11; height:30px; line-height:3 0px; Text-indent:1em; width:100%; )}
. num{width:424px; margin-right:-24px; float:left; height:53px; padding-top:2px;
. Num li{width:99px; padding-top:5px; padding-left:1px; cursor:pointer; float:left; margin-right:6px;height:48px;
. Num img{width:98px;}
. Num li.on{background:url (.. /images/bg01.gif) no-repeat 0 0;}
txtbg{Position:absolute; left:0 top:167px; width:100%; height:30px; background: #000; Opacity:0.5;filter:alpha ( OPACITY=50); Z-index:10;}
</style>
<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>
<script type= "Text/javascript" >
var timer;
var i=-1;
var offset=3000;
function Roll () {
i++;
if (i>3) {
i=0;
}
Slide (i);
timer=settimeout (Roll,offset)
}
function Slide (i) {
$ ('. Big a '). EQ (i). FadeIn (). Siblings (). Hide ();
$ ('. Num li '). EQ (i)-siblings (). Removeclass (' on ');
$ ('. Num li '). EQ (i)-addclass (' on ');
}
function Stopbig () {
$ ('. Big '). Hover (function () {
cleartimeout (timer);
},function () {
timer=settimeout (Roll,offset);
});
}
function Stoproll () {
$ ('. Num li '). Hover (function () {
cleartimeout (timer);
i=$ (This). index ();
Slide (i);
},function () {
timer=settimeout (Roll,offset);
})
}
$ (function () {
Roll ();
Stoproll ();
Stopbig ()
})
</script>
</head>
<body>
<div class= "box" >
<div class= "TXTBG" > </div>
<div class= "Big" >
<a href= "#" style= "Display:block" ><img src= "images/1.jpg"/><span> title 1</span></a>
<a href= "#" ><img src= "images/2.jpg"/><span> title 2</span></a>
<a href= "#" ><img src= "images/3.jpg"/><span> title 3</span></a>
<a href= "#" ><img src= "images/4.jpg"/><span> title 4/span></a>
</div>
<ul class= "num" >
<li class= "on" ><img src= "images/1s.jpg"/></li>
<li><img src= "images/2s.jpg"/></li>
<li><img src= "images/3s.jpg"/></li>
<li><img src= "images/4s.jpg"/></li>
</ul>
</div>
</body>
</html>