SOURCE download
Bxcarousel parameter Description:
Move: Scrolls the number of pictures each time, by default 4.
Display_num: Show the number of pictures, the default is 4.
Speed: Picture scrolling speed, defaults to 500 milliseconds.
margin: spacing between pictures, defaults to 0.
Auto: Automatically scrolls, default to False.
Auto_interval: When set to scroll automatically, the interval (in milliseconds) for each scrolling is 2000 milliseconds, or 2 seconds, by default.
Auto_dir: The direction of automatic scrolling, default to next, you can try the prev.
Next_image: Scroll to the right with the direction button picture, you can set it with CSS.
Prev_image: Roll Left direction button picture, you can use CSS settings.
Auto_hover: When scrolling, the mouse stops scrolling when the picture is on, and the default is False.
CONTROLS: Display the left and right scrolling button picture, default to True.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "keywords" content= "picture scrolling, jquery plugin"/>
<meta name= "description" content= Helloweba demo platform demonstrating XHTML, CSS, jquery, PHP cases, and examples "/>
<TITLE>JQUERY+CSS implementation of picture scrolling effect </title>
<style type= "Text/css" >
ul{margin:0;padding:0;}
. demo{width:650px;height:134px;margin:60px auto;clear:both;position:relative;border:1px Solid #d3d3d3}
. bx_wrap {margin-left:10px; margin-top:10px}
. Bx_wrap ul img {border:2px solid #ddd;}
. Bx_wrap ul Li{text-align:center}
. bx_wrap ul li A:hover{text-decoration:none color: #f30}
. bx_wrap A.prev {width:20px;height:24px;line-height:24px;outline-style:none;outline-width:0;position:absolute; top:45px; left:-2px; Text-indent:-999em; Background:url (Img/arr_left.gif) no-repeat;}
. bx_wrap A.next {width:20px;height:24px;line-height:24px; left:626px;position:absolute;top:45px; text-indent:- 999em; Background:url (Img/arr_right.gif) no-repeat;}
</style>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></ Script>
<script type= "Text/javascript" src= "Bxcarousel.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (' #demo1 '). Bxcarousel ({
Display_num:4,
Move:1,
Auto:true,
Controls:false,
Margin:10,
Auto_hover:true
});
$ (' #demo2 '). Bxcarousel ({
Display_num:4,
Move:4,
Margin:10
});
});
</script>
<body>
<div id= "Header" >
<div id= "logo" ></div>
<div id= "Main" >
<H2 class= "Top_title" ><a href= "http://www.helloweba.com/view-blog-139.html" >JQUERY+CSS implementation of the picture scrolling effect </ A><div class= "Demo" >
<div class= "Bx_wrap" >
<div class= "Bx_container" >
<ul id= "Demo1" >
<li><a href= "#" ><br/> photo 1</a> </li>
<li><a href= "#" ><br/> photo 2</a> </li>
<li><a href= "#" ><br/> photo 3</a> </li>
<li><a href= "#" ><br/> photo 4</a> </li>
<li><a href= "#" ><br/> photo 5</a> </li>
<li><a href= "#" ><br/> photo 6</a> </li>
<li><a href= "#" ><br/> photo 7</a> </li>
<li><a href= "#" ><br/> photo 1</a> </li>
<li><a href= "#" ><br/> photo 2</a> </li>
<li><a href= "#" ><br/> photo 3</a> </li>
<li><a href= "#" ><br/> photo 4</a> </li>
<li><a href= "#" ><br/> photo 5</a> </li>
<li><a href= "#" ><br/> photo 6</a> </li>
<li><a href= "#" ><br/> photo 7</a> </li>
</ul>
</div>
</div>
</div>
<div class= "Demo" >
<div class= "Bx_wrap" >
<div class= "Bx_container" >
<ul id= "Demo2" >
<li><a href= "#" ><br/> photo 1</a> </li>
<li><a href= "#" ><br/> photo 2</a> </li>
<li><a href= "#" ><br/> photo 3</a> </li>
<li><a href= "#" ><br/> photo 4</a> </li>
<li><a href= "#" ><br/> photo 5</a> </li>
<li><a href= "#" ><br/> photo 6</a> </li>
</ul>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div id= "Footer" >
<p>powered by helloweba.com allows to reprint, modify and use the site's demo, but please specify the source: <a href= "http://www.helloweba.com" > Www.helloweba.com</a></p>
</div>
</body>
