zoukankan      html  css  js  c++  java
  • 大图滚动插件

    jQSlide.html

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" type="text/css" href="css/jQSlide.css"/>

    </head>

    <body>

    <div class="focus_box">

    <ul class="focus_bd">

    <li><img src="img/img01.jpg"/></li>

    <li><img src="img/img02.jpg"/></li>

    <li><img src="img/img03.jpg"/></li>

    <li><img src="img/img04.jpg"/></li>

    </ul>

    <ul class="focus_btn">

     

    </ul>

    </div>

    </body>

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript" src="js/jQSlide.js"></script>

    <script type="text/javascript">

    $(".focus_box").slide({

    isAuto: true,//是否自动轮播

    hasNext: true,//是否含有下一个按钮

    hasPrev: true,//是否含有上一个按钮

    activeIndex: 0,//当前展示图片索引,默认为0

    speed: 300,//动画速度

    time: 3000//间隔时间 

    });

    </script>

    </html>

    jQSlide.js

     

     

     

    (function($){

     

    $.fn.slide = function(config){

     

    var defaults = {

     

    isAuto: true,//是否自动轮播

     

    hasNext: true,//是否含有下一个按钮

     

    hasPrev: true,//是否含有上一个按钮

     

    activeIndex: 0,//当前展示图片索引,默认为0

     

    speed: 300,//动画速度

     

    time: 3000//间隔时间 

     

    };

     

     

     

    var config = $.extend(defaults, config);

     

    var that = $(this);

     

    var activeIndex = config.activeIndex;

     

    var oWidth = that.width();

     

    var picBox = that.find(".focus_bd");

     

    var btnBox;

     

    var picLists;

     

    var btnLists;

     

    var timer;

     

     

     

    //如果没有图片或者图片数量小于2返回

     

    if (!picBox.find("li") || picBox.find("li") < 2) {

     

    return;

     

    }

     

     

     

    //渲染DOM结构

     

    var render = function(){

     

    btnBox = that.find(".focus_btn");

     

    //添加触点

     

    var len = picBox.find("li").length;

     

    var str = "";

     

    for (var i = 0; i < len; i++) {

     

    str+="<li>" + (i+1) + "</li>";

     

    }

     

    btnBox.html(str);

     

    btnLists = btnBox.find("li");

     

    //为当前触点添加类名

     

    btnLists.eq(config.activeIndex).addClass("on");

     

    //图片列表设置样式

     

    picBox.css("width", oWidth* len);

     

    picLists = picBox.find("li");

     

    picLists.css("width", oWidth);

     

     

     

    //如果有上一个按钮则添加DOM结构

     

    if (config.hasPrev) {

     

    that.append("<a href='javascript:;' class='btn_prev'>&lt;</a>");

     

    }

     

    //如果有下一个按钮则添加DOM结构

     

    if (config.hasNext) {

     

    that.append("<a href='javascript:;' class='btn_next'>&gt;</a>");

     

    }

     

    };

     

    //滑动函数

     

    var move = function(index){

     

    btnLists.eq(index).addClass("on").siblings().removeClass("on");

     

    picBox.stop().animate({

     

    left: -index * oWidth

     

    },config.speed)

     

    activeIndex = index;

     

    };

     

    //开始滑动

     

    var startMove = function(){

     

    if (activeIndex == picLists.length-1) {

     

    activeIndex = 0;

     

    }else{

     

    activeIndex++;

     

    }

     

    console.log(activeIndex);

     

    move(activeIndex);

     

     

     

    };

     

    //自动播放

     

    var autoPlay = function(){

     

    timer = setInterval(startMove, config.time);

     

    };

     

     

     

    //事件绑定

     

    var bindEvent = function(){

     

    //鼠标滑到数字上的时候

     

    btnLists.mouseenter(function(){

     

    //这两句有用

     

    var that = $(this);

     

    console.log(that);

     

    activeIndex = that.index();

     

    console.log(activeIndex);

     

    move(activeIndex);

     

    });

     

     

     

    //鼠标移出轮播图区域,开始自动播放;移进轮播区域,停止自动播放

     

    if (config.isAuto) {

     

    that.mouseover(function(){

     

    clearInterval(timer);

     

    }).mouseout(function(){

     

    clearInterval(timer);

     

    autoPlay();

     

    });

     

    }

     

     

     

    //如果存在上一个按钮,则点击上一页切换到上一张

     

    if (config.hasPrev) {

     

    that.find(".btn_prev").on("click", function(){

     

    var toIndex = activeIndex - 1;

     

    toIndex = toIndex < 0 ? picLists.length-1 : toIndex;

     

    move(toIndex);

     

    });

     

    }

     

     

     

    //如果存在下一个按钮,则点击下一页切换到下一张

     

    if (config.hasNext) {

     

    that.find(".btn_next").on("click", function(){

     

    var toIndex = activeIndex + 1;

     

    toIndex = toIndex > picLists.length-1 ? 0 : toIndex;

     

    move(toIndex);

     

    });

     

    }

     

    };

     

     

     

    var init = function(){

     

    render();

     

    if (config.isAuto) {

     

    autoPlay();

     

    }

     

    bindEvent();

     

    };

     

    init();

     

    return this;

     

    }

     

    })(jQuery);

    jQSlide.css

     

    *{margin: 0; padding: 0;}

    ul{list-style: none;}

    .focus_box{position: relative; width: 400px; height: 400px; margin: 50px auto 0; overflow: hidden;}

    .focus_box .focus_bd,.focus_box .focus_btn{position: absolute;}

    .focus_box .focus_btn{bottom: 10px; right: 20px;}

    .focus_box .focus_btn li{float: left; width: 18px; height: 18px; line-height: 18px; text-align: center; background: #000; color: #999; cursor: pointer; margin-right: 5px; display: inline-block;}

    .focus_box .focus_btn li.on{color: #fff;}

    .focus_box .focus_bd{top: 0; left: 0;}

    .focus_box .focus_bd li{float: left; display: inline-block;}

    .focus_box .focus_bd img{display: block; width: 400px; height: 400px;

    /*a标签是行标签,但是定位后就可以设置宽高*/

    .focus_box .btn_prev,.focus_box .btn_next{position: absolute; width: 40px; height: 40px; line-height: 40px; background-color: rgba(0,0,0,0.5); color: #fff; top: 50%; margin-top: -20px; text-align: center; font-family: arial; font-size: 30px;}

    a{text-decoration: none;}

    .focus_box .btn_next{right: 0;}

    .focus_box .btn_prev{left: 0;}

     

  • 相关阅读:
    Proj THUDBFuzz Paper Reading: The Art, Science, and Engineering of Fuzzing: A Survey
    Proj THUDBFuzz Paper Reading: A systematic review of fuzzing based on machine learning techniques
    9.3 付费代理的使用
    11.1 Charles 的使用
    第十一章 APP 的爬取
    10.2 Cookies 池的搭建
    10.1 模拟登录并爬取 GitHub
    11.5 Appium 爬取微信朋友圈
    11.4 Appium 的基本使用
    11.3 mitmdump 爬取 “得到” App 电子书信息
  • 原文地址:https://www.cnblogs.com/luckyXcc/p/5776683.html
Copyright © 2011-2022 走看看