• 自己做的轮播图插件


    <div class="slider_box">
                    <div class="slider_nav">
                        <div class="nav_box">
                            <a class="active" href="javascript:void(0)"></a>
                            <a href="javascript:void(0)"></a>
                            <a href="javascript:void(0)"></a>
                            <a href="javascript:void(0)"></a>
                            <a href="javascript:void(0)"></a>
                        </div>
                    </div>
                    <a href="javascript:void(0)" class="nav slider_left"></a>
                    <div class="pic_box clearfix">
                    <ul class="slider_list">
                        <li>
                            <div class="slider_li_box clearfix">
                                <div class="slider_picbox"><img src="images/temp/slider1.jpg" width="198" height="148"/></div>
                                <div class="slider_content">
                                    <h2 class="micro">1111个股启动前精准捕获,亚历山大择时组合策略逆市大幅获利</h2>
                                    <p>“病毒化内容的识别和可视化”技术展示提出了一种社会媒体病毒化的量化理念,例如选定一篇报道后,可以查看随时间推移的视频,表明该报道是如何从一个用户传播识别出这个过程中哪些用户具....</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="slider_li_box clearfix">
                                <div class="slider_picbox"><img src="images/temp/slider1.jpg" width="198" height="148"/></div>
                                <div class="slider_content">
                                    <h2 class="micro">2222个股启动前精准捕获,亚历山大择时组合策略逆市大幅获利</h2>
                                    <p>“病毒化内容的识别和可视化”技术展示提出了一种社会媒体病毒化的量化理念,例如选定一篇报道后,可以查看随时间推移的视频,表明该报道是如何从一个用户传播识别出这个过程中哪些用户具....</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="slider_li_box clearfix">
                                <div class="slider_picbox"><img src="images/temp/slider1.jpg" width="198" height="148"/></div>
                                <div class="slider_content">
                                    <h2 class="micro">3333个股启动前精准捕获,亚历山大择时组合策略逆市大幅获利</h2>
                                    <p>“病毒化内容的识别和可视化”技术展示提出了一种社会媒体病毒化的量化理念,例如选定一篇报道后,可以查看随时间推移的视频,表明该报道是如何从一个用户传播识别出这个过程中哪些用户具....</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="slider_li_box clearfix">
                                <div class="slider_picbox"><img src="images/temp/slider1.jpg" width="198" height="148"/></div>
                                <div class="slider_content">
                                    <h2 class="micro">444个股启动前精准捕获,亚历山大择时组合策略逆市大幅获利</h2>
                                    <p>“病毒化内容的识别和可视化”技术展示提出了一种社会媒体病毒化的量化理念,例如选定一篇报道后,可以查看随时间推移的视频,表明该报道是如何从一个用户传播识别出这个过程中哪些用户具....</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="slider_li_box clearfix">
                                <div class="slider_picbox"><img src="images/temp/slider1.jpg" width="198" height="148"/></div>
                                <div class="slider_content">
                                    <h2 class="micro"><a href="#">555个股启动前精准捕获,亚历山大择时组合策略逆市大幅获利</a></h2>
                                    <p>“病毒化内容的识别和可视化”技术展示提出了一种社会媒体病毒化的量化理念,例如选定一篇报道后,可以查看随时间推移的视频,表明该报道是如何从一个用户传播识别出这个过程中哪些用户具....</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    </div>
                    <a href="javascript:void(0)" class="nav slider_right"></a>
                </div>
    (function($){
        $.fn.slider = function(options){
            var defaults = {
                speed : 800,
                otime : 3000,
                autoplay : true
            }
            var options = $.extend(defaults, options);
            this.each(function(){
                var oNav_box = $(this).find(".nav_box a");
                var oArrow = $(this).find("a.nav");
                var oLeft = $(this).find("a.slider_left");
                var oRight = $(this).find("a.slider_right");
                var oNav = $(this).find(".slider_nav a");
                var oindex = 0;
                var oBox = $(this).find(".slider_list");
                var oLi = oBox.find("li");
                var oLi_width = oLi.width();
                var olen = oLi.length;
                
                /*箭头点击方法*/
                oArrow.bind('click', function() {
                    oindex = ($(this).hasClass('slider_right')==true)
                    ? oindex+1 : oindex-1;
                    manageNav(oindex);
                    navplay(oindex);
                    clearInterval(scrollTimmer);
                    moveSlide();
                    
                });
                
                /*索引处理方法*/
                var changePosition = function() {
                    if(oindex == olen - 1) {
                        oindex = 0;
                        manageNav(oindex);
                        navplay(oindex);
                    } else {
                        oindex++;
                        manageNav(oindex);
                        navplay(oindex);
                    }
                    moveSlide();
                }
                
                /*箭头显示和隐藏*/
                var manageNav = function(position) {
                    if(position==0)
                    {
                        oLeft.hide()
                    }
                    else { 
                        oLeft.show()
                    }
                    if(position==olen-1)
                    { 
                        oRight.hide() 
                    }
                    else { 
                        oRight.show() 
                    }
                }
                manageNav(oindex);
                
                /*索引添加样式*/
                var navplay = function(i){
                    oNav_box.removeClass("active").eq(i).addClass("active");
                }
    
                /*索引控制*/
                oNav.each(function(k){
                    $(this).bind('click',function(k){
                        oindex = $(this).index();
                        manageNav(oindex);
                        navplay(oindex);
                        moveSlide();
                        
                    });
                });
                
                /*滚动函数*/
                function moveSlide() {
                    oBox.animate({'marginLeft' : oLi_width*(-oindex)},options.speed);
                }
                if(options.autoplay){
                    scrollTimmer = setInterval(changePosition, options.otime);
                    $(this).hover(function(){
                        clearInterval(scrollTimmer);
                    },function(){
                        scrollTimmer = setInterval(changePosition,options.otime);
                    });
                }
                
            })
                
        };    
    })(jQuery);
  • 相关阅读:
    使用react native制作的一款网络音乐播放器
    swift3.0 简单直播和简单网络音乐播放器
    深入理解iOS开发中的BitCode功能
    react native 之 事件监听 和 回调函数
    swift简单处理调用高清大图导致内存暴涨的情况
    swift3.0 自定义键盘
    iOS原生和React-Native之间的交互2
    react native 之 获取键盘高度
    React Native项目集成iOS原生模块
    架构篇 | 带你轻松玩转 LAMP 网站架构平台(一)
  • 原文地址:https://www.cnblogs.com/dkwlxq/p/2961268.html
Copyright © 2020-2023  润新知