jquery图片轮播-插件

更新内容:

1. 页面结构和css样式必定类似下边放置

2. 点击左右按钮，实现左右滑动。

3. 这一般用于多个图片轮播使用，简化并优化代码.

若因不同需求，均可自行将插件scrollimgplus.js进行相应的改造。

使用方法就不详述了, 请参见源码及相关注释:查看Demo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本材料</title>
<style>
*{margin: 0; padding: 0;}
body{
    font-family: '微软雅黑';
    font-size:12px;
    color: #393939;
    line-height: 1.5;
}
.clear {zoom:1;}
.clear:after {content:""; display:block; height:0; visibility:visible; clear:both;}

.abtn{
    width:11px;
    height:17px;
}
.aleft{
    background:url(theme_3/img/CL/left.png) no-repeat 0 0; 
    position:absolute; 
    left:0; 
    top:65px;
}
.aright{
    background:url(theme_3/img/CL/right.png) no-repeat 0 0;
    position:absolute; 
    right:0; 
    top:65px;
}
.options{
    width: 98%;
    margin: 1% auto;
}
#slide_2{
    width:816px; 
    position:relative; 
    margin:10px 10px; 
    padding-right:16px;
}
.imglist_1{
    width:816px;
    height:200px; 
    overflow:hidden;
}
.imglist li{
    float:left;
    width:120px;
    margin-left:16px; 
    display:inline;
    position:relative;
}
.imglist li img{
    width:120px;
    height:159px;
}
.imglist li p{ 
    font-size:12px;
    text-align:center;  
    margin:0;
    line-height: 10px;
}
</style>
</head>

<body>
    <div class="options jc_pic clear" id="slide_2">
            <a id="jc_left" class="abtn aleft" href="#left" title="左移"></a>
            <div class="imglist_1">
                    <ul id="jc_picUl" class="imglist clear">
                        <li>
                            <img  alt="" src="../theme_3/img/CL/example/u910.png">
                            <p>检测封面</p>
                        </li>
                        <li>
                            <img  alt="" src="../theme_3/img/CL/example/u912.png">
                            <p>检测页1</p>
                        </li>
                        <li>
                            <img  alt="" src="../theme_3/img/CL/example/u916.jpg">
                            <p>检测页2</p>
                        </li>
                        <li>
                            <img  alt="" src="../theme_3/img/CL/example/u910.png">
                            <p>检测封面</p>
                        </li>
                        <li>
                            <img  alt="" src="../theme_3/img/CL/example/u912.png">
                            <p>检测页3</p>
                        </li>
                        <li>
                            <img  alt="" src="../theme_3/img/CL/example/u916.jpg">
                            <p>检测页4</p>
                        </li>
                        <li>
                            <img  alt="" src="../theme_3/img/CL/example/u910.png">
                            <p>检测页5</p>
                        </li>
                        <li>
                            <img  alt="" src="../theme_3/img/CL/example/u912.png">
                            <p>检测页6</p>
                        </li>
                        <li>
                            <img  alt="" src="../theme_3/img/CL/example/u916.jpg">
                            <p>检测页7</p>
                        </li>
            
                       </ul>
                </div>
                <a id="jc_right" class="abtn  aright" href="#right" title="右移"></a>
            </div>
    </div>

       <script type="text/javascript" src="theme_3/js/jquery-1.8.3.min.js"></script>
    <script src="theme_3/js/addScrolljs.js"></script>
    <script>
    $(function(){
        doAddscroll($("#slide_2"), 0, 6);

    })
    </script>
    
</body>


</html>

posted on 2015-01-05 11:11 雨为我停阅读(255) 评论(0) 编辑收藏举报