欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

点左右图片出现的焦点图功能

shiping1 的头像
js代码在   nsw_index.js附件  里   下载后 文件名后缀改成 .js

html代码 

<div class="slide_m fixed">
                        <a href="javascript:void(0);" title="上一页" id="Left_ding2" class="btn btn_l fl"></a>
                        <div id="ISL_Cont_1d2" class="slide_c fl">
                            <ul class="fixed">
                                <li class="fl shi-gongchang-li text-center">
                                    <a href="/a/pinpairuisidun/gongchanghuanjing/20150922/249.html" title="瑞斯顿工厂环境图" target="_blank">
                                        <img src="/uploads/allimg/150922/1-150922135424341-lp-241-241.jpg" alt="瑞斯顿工厂环境图" title="瑞斯顿工厂环境图" style="width:241px;height:241px;" /></a>
                                    <span class="shi-gongchang"><a href="/a/pinpairuisidun/gongchanghuanjing/20150922/249.html" title="瑞斯顿工厂环境图" target="_blank">瑞斯顿工厂环境图</a></span>
                                </li>
<li class="fl shi-gongchang-li text-center">
                                    <a href="/a/pinpairuisidun/gongchanghuanjing/20150922/248.html" title="瑞斯顿工厂环境图" target="_blank">
                                        <img src="/uploads/allimg/150922/1-150922135346354-lp-241-241.jpg" alt="瑞斯顿工厂环境图" title="瑞斯顿工厂环境图" style="width:241px;height:241px;" /></a>
                                    <span class="shi-gongchang"><a href="/a/pinpairuisidun/gongchanghuanjing/20150922/248.html" title="瑞斯顿工厂环境图" target="_blank">瑞斯顿工厂环境图</a></span>
                                </li>
<li class="fl shi-gongchang-li text-center">
                                    <a href="/a/pinpairuisidun/gongchanghuanjing/20150922/247.html" title="瑞斯顿工厂环境图" target="_blank">
                                        <img src="/uploads/allimg/150922/1-150922135331F3-lp-241-241.jpg" alt="瑞斯顿工厂环境图" title="瑞斯顿工厂环境图" style="width:241px;height:241px;" /></a>
                                    <span class="shi-gongchang"><a href="/a/pinpairuisidun/gongchanghuanjing/20150922/247.html" title="瑞斯顿工厂环境图" target="_blank">瑞斯顿工厂环境图</a></span>
                                </li>
<li class="fl shi-gongchang-li text-center">
                                    <a href="/a/pinpairuisidun/gongchanghuanjing/20150922/246.html" title="瑞斯顿工厂环境图" target="_blank">
                                        <img src="/uploads/allimg/150922/1-150922135315112-lp-241-241.jpg" alt="瑞斯顿工厂环境图" title="瑞斯顿工厂环境图" style="width:241px;height:241px;" /></a>
                                    <span class="shi-gongchang"><a href="/a/pinpairuisidun/gongchanghuanjing/20150922/246.html" title="瑞斯顿工厂环境图" target="_blank">瑞斯顿工厂环境图</a></span>
                                </li>
<li class="fl shi-gongchang-li text-center">
                                    <a href="/a/pinpairuisidun/gongchanghuanjing/20150922/245.html" title="瑞斯顿工厂环境图" target="_blank">
                                        <img src="/uploads/allimg/150922/1-150922135302143-lp-241-241.jpg" alt="瑞斯顿工厂环境图" title="瑞斯顿工厂环境图" style="width:241px;height:241px;" /></a>
                                    <span class="shi-gongchang"><a href="/a/pinpairuisidun/gongchanghuanjing/20150922/245.html" title="瑞斯顿工厂环境图" target="_blank">瑞斯顿工厂环境图</a></span>
                                </li>
<li class="fl shi-gongchang-li text-center">
                                    <a href="/a/pinpairuisidun/gongchanghuanjing/20150922/244.html" title="瑞斯顿工厂环境图" target="_blank">
                                        <img src="/uploads/allimg/150922/1-150922135250a9-lp-241-241.jpg" alt="瑞斯顿工厂环境图" title="瑞斯顿工厂环境图" style="width:241px;height:241px;" /></a>
                                    <span class="shi-gongchang"><a href="/a/pinpairuisidun/gongchanghuanjing/20150922/244.html" title="瑞斯顿工厂环境图" target="_blank">瑞斯顿工厂环境图</a></span>
                                </li>
 
                            </ul>
                        </div>
                        <a href="javascript:void(0);" title="下一页" id="Right_ding2" class="btn btn_r fl"></a>
                    </div>
                    <script language="javascript" type="text/javascript">
                        var scrollPic_02 = new ScrollPicleft();
                        scrollPic_02.scrollContId = "ISL_Cont_1d2"; // 内容容器ID""
                        scrollPic_02.arrLeftId = "Left_ding2"; //左箭头ID
                        scrollPic_02.arrRightId = "Right_ding2"; //右箭头ID
                        scrollPic_02.frameWidth = 241; //显示框宽度
                        scrollPic_02.pageWidth = 241; //翻页宽度
                        scrollPic_02.speed = 10; //移动速度(单位毫秒,越小越快)
                        scrollPic_02.space = 10; //每次移动像素(单位px,越大越快)
                        scrollPic_02.autoPlay = true; //自动播放
                        scrollPic_02.autoPlayTime = 3; //自动播放间隔时间(秒)
                        scrollPic_02.initialize(); //初始化
                    </script>
 
 
                    <script language="javascript" type="text/javascript">
                        var scrollPic_02 = new ScrollPicleft();
                        scrollPic_02.scrollContId = "ISL_Cont_1d2"; // 内容容器ID""
                        scrollPic_02.arrLeftId = "Left_ding2"; //左箭头ID
                        scrollPic_02.arrRightId = "Right_ding2"; //右箭头ID
                        scrollPic_02.frameWidth = 241; //显示框宽度
                        scrollPic_02.pageWidth = 241; //翻页宽度
                        scrollPic_02.speed = 10; //移动速度(单位毫秒,越小越快)
                        scrollPic_02.space = 10; //每次移动像素(单位px,越大越快)
                        scrollPic_02.autoPlay = true; //自动播放
                        scrollPic_02.autoPlayTime = 3; //自动播放间隔时间(秒)
                        scrollPic_02.initialize(); //初始化
                    </script>

css代码 
.fl {
    float: left;
}
 .btn_l {
    background: url(../images/btn_lf.gif) no-repeat 0 0;
}
 .btn_r {
    background: url(../images/btn_rt.gif) no-repeat 0 0;
}
 .slide_m .btn {
    margin-top: 100px;
    width: 15px;
    height: 41px;
}
.slide_c{
 margin-right: 10px;   
}
.slide_c ul,.slide_c ul li{
    list-style: none;
}
.slide_c span {
    display: block;
    margin-top: 12px;
}
ul.fixed{
 padding-left: 0;   
}
 

附件大小
Plain text icon nsw_index.js152.34 KB
普通分类: