zoukankan      html  css  js  c++  java
  • Jquery 实现轮播图

    jq 轮播图 

    function banner_show(){
        var left_btn = $("#banner_tag_left");       //获取左侧单击按钮
        var right_btn = $("#banner_tag_right");     //获取右侧点击按钮
        var Owidth = $("#banner ul li").width();    //获取单个图片宽度
        var Oindex = $("#banner ul li");         //获取需要轮播的图片个数
        var banner_w = $("#banner").width();       //获取总宽度
         var index = 0; //定义当前的轮播图的位数
        $(left_btn).bind("click",function(){
            index++;
            if( index>(Oindex.length-1)){         //当位于最后一张图片时,位数重置
                index = 0;
            }
            $("#banner").animate({            //JQ动画方法
                left:-Owidth*index+"px",         //position定位,left 的值为负的 宽度乘以位数(width * index ) 
            },300)
        });
        $(right_btn).bind("click",function(){
            index--;
            if( index<0){
                index=Oindex.length-1;        //当位于第一张图时,位数变为最后一位
            }
            $("#banner").animate({
                left:-Owidth*index+"px",            //position定位。left 的值为负的 宽度乘以位数(width * index )
    },300) }); }
  • 相关阅读:
    C++ 派生类对象的构造与析构过程
    C++ lvalue(左值)和rvalue(右值)
    enum class 用法
    gcc 编译选项
    using用法总结
    const用法及与constexpr区别总结
    Lanbda表达式
    CMake 用法总结(转载)
    ElasticSearch学习文档
    Maven学习笔记
  • 原文地址:https://www.cnblogs.com/taoquns/p/5503527.html
Copyright © 2011-2022 走看看