BxCarousel is a Jquery picture scroll plug-in with thousands of configuration and easy to use, the main features are:
pieces can be specified according to elements of the total number of pieces
you can specify each time the number of elements in the rolling pieces
automatic playback mode pieces
a before/after a picture button control flow parameter meaning

<Ul>
<Li> The first piece of content

<Li> The second piece of content

<Li> Third piece of content

<Li> The fourth piece of content

<Li> BxCarousel can accept an unlimited number of elements

</ul>

jQuery代码需要符合以下格式
$(document).ready(function(){
$('ul').bxCarousel({
display_num: 4,//number of elements to be visible
move: 4,//number of elements to the shift the slides
speed: 500,//number in milliseconds it takes to finish slide animation
margin:0,//right margin to be applied to each

  • element (in pixels, although do not include "px")
    auto: false,//automatically play slides without a user click
    auto_interval: 2000,//the amount of time in milliseconds between each auto animation
    auto_dir: 'next',//direction of auto slideshow (options: 'next', 'prev')
    auto_hover: false,//determines if the slideshow will stop when user hovers over slideshow
    next_text: 'next',//text to be used for the 'next' control
    next_image: '',//image to be used for the 'next' control
    prev_text: 'prev',//text to be used for the 'prev' control
    prev_image: '',//image to be used for the 'prev' control
    controls: true//determines if controls will be displayed
    });
    });

    div. Bx_container and div. The HTML element such as bx_wrap is js generation plus, when using bxCarousel plug-ins, in order to achieve visual aesthetic feeling, remember to div. Bx_container and div., bx_wrap and its child elements within set CSS Style you need.
    also note that the
    bxCarousel is an infinite loop mechanism, keep clicking the next button to see what changes have taken place in HTML!!!!!
    bxCarousel not only for images, for any other HTML elements play a role.
    if open auto attribute, pay attention to make sure the speed attribute value is smaller than last time.

    instance code <! DOCTYPE html>
    <Html>
    <Head>
    <Meta content="text/HTML; charset=utf-8" HTTP - equiv="content-type >"
    <Title> </title>
    <Script type="text/javascript 'SRC=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "></script>
    <Script type="text/javascript 'SRC=" http://www.script-home.com//article/js/bxCarousel.js "></script>
    <The script type="text/javascript" >
    jQuery (function () {
    jQuery (' #not '). BxCarousel ({
    display_num: 4,//
    move: 1,
    auto: true,
    controls: false,//here is false, said don't display left and right arrow control button
    margin: 10,
    auto_hover: true//mouse hovering round to planting area, whether to stop them by picture
    });
    jQuery (' #demo2). BxCarousel ({
    display_num: 4,
    move: 4,
    margin: 10
    });
    });
    </script>
    <Script type="text/javascript 'SRC=" http://www.script-home.com//article/video/js/mootools.js "></script>
    <Script type="text/javascript 'SRC=" http://www.script-home.com//article/video/js/swfobject.js "></script>
    <Script type="text/javascript 'SRC=" http://www.script-home.com//article/video/js/videobox.js "></script>
    <Link rel="stylesheet" type="text/CSS" href="http://www.script-home.com//article/video/css/videobox.css" >
    <Style type="text/CSS" >
    . PIC,. Vd {
    width: 200px;
    height: 200px;
    margin: 0 auto;

    }. PIC a, vd a {
    display: block;
    width: 200px;
    height: 200px;
    text - align: center;
    margin: 0 auto;

    }. PIC {
    background: url (" http://i0.sinaimg.cn/home/2013/0513/U2727P30DT20130513082202.jpg "), the no - repeat scroll 0 0 transparent;

    }. Vd {
    background: url (" http://i0.sinaimg.cn/home/2013/0512/U1345P30DT20130512114119.jpg "), the no - repeat scroll 0 0 transparent;

    }. Nav,. The main,. Imgcollc,. Footer {
    width: 910px;
    margin: 0 auto;
    text - align: center;
    }
    /* if you want to use the direction button navigation, you need to set up. Bx_wrap Amy polumbo and rev. Bx_wrap a.n ext style. */
    a {color: #424242; The text - decoration: none; }
    ul, ol li, {padding: 0; Margin: 0; The list - style: none; }
    bx_wrap {margin - left: 30px; Margin - top: 10px; }
    bx_wrap ul img {#2px solid border: DDD; }
    bx_wrap ul li {text - align: center; Float: left; Width: 140px; Height: 119px; Overflow: hidden; }
    bx_wrap ul li a: hover {text - decoration: none; Color: #f30; }
    bx_wrap Amy polumbo rev {width: 20px; Height: 24px; The line - height: 24px; The outline - style: none; The outline - width: 0; Position: absolute; Top: 45px; Left: 5px; Em text text-indent: - 999; Background: url (img/arr_left. GIF) no - repeat; }
    bx_wrap a.n ext {width: 20px; Height: 24px; The line - height: 24px; Left: 623px; Position: absolute; Top: 45px; Em text text-indent: - 999; Background: url (' img/arr_right. GIF) no - repeat; }
    demo {width: 650px; Height: 134px; Margin: 40px auto; Position: relative; Border: 1px solid #d3d3d3; Overflow: hidden;
    }
    </style>
    </head>
    <Body>
    <Div class="nav" >

    </div>
    <Div class="main" >
    <H2 class="top_title >" <A href="http://www.feiliu.com/" >JQuery implementation of the video window scaling, picture scroll switch effect </a> </h2 >
    <Div class="PIC" >
    <A id="img" href="http://imgsrc.baidu.com/forum/pic/item/ed178044ad345982578b3fa90cf431adcaef84d7.jpg" rel="vidbox 640 376" title="test" JPG ></a>
    </div>
    <Div class="DVD" >
    <A id="DVD" href="http://www.novelstudios.com/media/Visions_CellPhone.mov" rel="vidbox 640 376" title="test" video ></a>
    </div>
    </div>
    <Div class="imgcollc >"
    <Div class="demo" >
    <Ul id="not" >
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s1.jpg" ><Br/>Picture 1 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s2.jpg" ><Br/>Picture 2 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s3.jpg" ><Br/>Picture 3 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s4.jpg" ><Br/>Photo 4 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s5.jpg" ><Br/>Image 5 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s6.jpg" ><Br/>Picture 6 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s7.jpg" ><Br/>Picture 7 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s1.jpg" ><Br/>Picture 1 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s2.jpg" ><Br/>Picture 2 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s3.jpg" ><Br/>Picture 3 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s4.jpg" ><Br/>Photo 4 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s5.jpg" ><Br/>Image 5 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s6.jpg" ><Br/>Picture 6 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s7.jpg" ><Br/>Picture 7 </a> </li>
    </ul>
    </div>
    <Div class="demo" >
    <Ul id="demo2 >"
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s1.jpg" ><Br/>Picture 1 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s2.jpg" ><Br/>Picture 2 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s3.jpg" ><Br/>Picture 3 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s4.jpg" ><Br/>Photo 4 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s5.jpg" ><Br/>Image 5 </a> </li>
    <Li> <A href="http://www.script-home.com//article/#" ><Img Alt="#" width="140" height="94" SRC="http://www.script-home.com//article/img/s6.jpg" ><Br/>Picture 6 </a> </li>
    </ul>
    </div>
    </div>
    <Div class="footer" >Mobile