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>
时间: 2024-11-09 09:44:20

jquery图片轮播-插件的相关文章

12款经典的白富美型—jquery图片轮播插件—前端开发必备

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ?  16个独特的过渡效果?

Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ?  16个独特的过渡效果 ?  简洁和有效的标记 ?  加载参数设置 ?  内置方向和导航控制 ?  压缩版本大小只有12KB ?  支持链接图像 ?  支持 HTML 标题 ?  3套精美光滑的主题 ?  在MIT许可下免费使用 ?  支持响应式设计 插件下载     效果演示 您可能

最简单的jQuery图片轮播插件

//图片自己找哈 <!doctype html> <html ng-app><head><meta content="charset=utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">    <style typ

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

JQuery插件之图片轮播插件–slideBox

来源:http://www.ido321.com/852.html 今天偶然发现了一个比較好用的图片轮播插件-slideBox 先看看效果:http://slidebox.sinaapp.com/ 代码例如以下 1: <!doctype html> 2: <html> 3: <head> 4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

PgwSlideshow-基于Jquery的图片轮播插件

0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: 体验度很好的响应式设计 支持桌面及移动设备 身形矫健,压缩后的文件只有不到4KB 你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlideshow核

jquery实现轮播插件

这几天用jquery写了两个轮播的插件,功能很简单.第一次尝试写插件,有很多不足的地方,代码如下: 注:图片链接请替换掉,配置信息必须加上图片width和height. <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" hr

图片轮播插件FlexSlider

推荐一款万能图片轮播插件FlexSlider 先来看一下都能做出什么效果吧 轮播图方向控制按钮和底部的焦点按钮都是可以控制显示和隐藏,最厉害的一点是该插件支持手机触屏 具体参数设置当然还是github更权威https://github.com/woothemes/FlexSlider/ 友情提示:在github上下载的demo由于用的是google的CDN,由于google被墙可能导致无法运行,建议更改jQuery的调用地址 最后看一下支付宝官方网站上的对该插件的应用效果图

图片轮播插件

刚买了司徒大大的<Javascript框架设计>,准备开始研读.打算在读之前先随便写个图片轮播插件,到读完这本书再来看看现在的自己有多菜....... 顺便做图片轮播的时候用美女照片真影响效率..... 上代码! 先是如何使用: html: <div id='outer' style='width:591px;height:862px;overflow:hidden;margin-left:100px;'> <ul id='try-slide' style='list-sty