精华内容
下载资源
问答
  • JS实现图片轮播效果(自动和手动)

    万次阅读 多人点赞 2018-05-30 16:45:06
    本次轮播效果图如下:具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换以下为实现代码:首先是html代码:<!DOCTYPE html> <html lang="en"...

    本次轮播效果图如下:

    具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换  3.底下小按钮切换

    ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS实现图片轮播效果

    以下为实现代码:

    首先是html代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>最简单的轮播效果</title>
    </head>
    <body>
    <div class="box" id="box">
        <div class="inner">
            <!--轮播图-->
            <ul>
                <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
            </ul>
            <ol class="bar">
                小按钮数量无法确定,由js动态生成
            </ol>
            <!--左右焦点-->
            <div id="arr">
                  <span id="left"> <</span>
                  <span id="right">></span>
            </div>
    
        </div>
    </div>
    
    </body>
    </html>
     

    接下来是css样式:

    <style>
            * {
                margin: 0;
                padding: 0
            }
            .box {
                width: 500px;
                height: 300px;
                border: 1px solid #ccc;
                margin: 100px auto;
                padding: 5px;
    
            }
            .inner{
                width: 500px;
                height: 300px;
                position: relative;
                overflow: hidden;
            }
            .inner img{
                width: 500px;
                height: 300px;
                vertical-align: top
            }
            ul {
                width: 1000%;
                position: absolute;
                list-style: none;
                left:0;
                top: 0;
            }
            .inner li{
                float: left;
    
            }
    
            ol {
                position: absolute;
                height: 20px;
                right: 20px;
                bottom: 20px;
                text-align: center;
                padding: 5px;
            }
            ol li{
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                background-color: #fff;
                margin: 5px;
                cursor: pointer;
    
            }
            ol .current{
                background-color: red;
            }
            #arr{
                display: none;
            }
            #arr span{
                width: 40px;
                height: 40px;
                position: absolute;
                left: 5px;
                top: 50%;
                margin-top: -20px;
                background: #fff;
                cursor: pointer;
                line-height: 40px;
                text-align: center;
                font-weight: bold;
                font-family: '黑体';
                font-size: 30px;
                color: #000;
                opacity: 0.5;
                border: 1px solid #fff;
            }
            #arr #right {
                right: 5px;
                left: auto;
            }

    第三部分是最主要的js代码:

    <script>
        /**
         *
         * @param id  传入元素的id
         * @returns {HTMLElement | null}  返回标签对象,方便获取元素
         */
        function my$(id) {
            return document.getElementById(id);
        }
    
        //获取各元素,方便操作
        var box=my$("box");
        var inner=box.children[0];
        var ulObj=inner.children[0];
        var list=ulObj.children;
        var olObj=inner.children[1];
        var arr=my$("arr");
        var imgWidth=inner.offsetWidth;
        var right=my$("right");
        var pic=0;
        //根据li个数,创建小按钮
        for(var i=0;i<list.length;i++){
            var liObj=document.createElement("li");
    
            olObj.appendChild(liObj);
            liObj.innerText=(i+1);
            liObj.setAttribute("index",i);
    
            //为按钮注册mouseover事件
            liObj.onmouseover=function () {
                //先清除所有按钮的样式
    
                for (var j=0;j<olObj.children.length;j++){
                    olObj.children[j].removeAttribute("class");
                }
                this.className="current";
                pic=this.getAttribute("index");
                animate(ulObj,-pic*imgWidth);
            }
    
        }
    
    
        //设置ol中第一个li有背景颜色
        olObj.children[0].className = "current";
        //克隆一个ul中第一个li,加入到ul中的最后=====克隆
        ulObj.appendChild(ulObj.children[0].cloneNode(true));
    
        var timeId=setInterval(onmouseclickHandle,1000);
        //左右焦点实现点击切换图片功能
        box.onmouseover=function () {
            arr.style.display="block";
            clearInterval(timeId);
        };
        box.onmouseout=function () {
            arr.style.display="none";
            timeId=setInterval(onmouseclickHandle,1000);
        };
    
        right.onclick=onmouseclickHandle;
        function onmouseclickHandle() {
            //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
            //所以,如果用户再次点击按钮,用户应该看到第二个图片
            if (pic == list.length - 1) {
                //如何从第6个图,跳转到第一个图
                pic = 0;//先设置pic=0
                ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
            }
            pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
            animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
            //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
            if (pic == list.length - 1) {
                //第五个按钮颜色干掉
                olObj.children[olObj.children.length - 1].className = "";
                //第一个按钮颜色设置上
                olObj.children[0].className = "current";
            } else {
                //干掉所有的小按钮的背景颜色
                for (var i = 0; i < olObj.children.length; i++) {
                    olObj.children[i].removeAttribute("class");
                }
                olObj.children[pic].className = "current";
            }
        }
        left.onclick=function () {
            if (pic==0){
                pic=list.length-1;
                ulObj.style.left=-pic*imgWidth+"px";
            }
            pic--;
            animate(ulObj,-pic*imgWidth);
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            //当前的pic索引对应的按钮设置颜色
            olObj.children[pic].className = "current";
        };
        
        //设置任意的一个元素,移动到指定的目标位置
        function animate(element, target) {
            clearInterval(element.timeId);
            //定时器的id值存储到对象的一个属性中
            element.timeId = setInterval(function () {
                //获取元素的当前的位置,数字类型
                var current = element.offsetLeft;
                //每次移动的距离
                var step = 10;
                step = current < target ? step : -step;
                //当前移动到位置
                current += step;
                if (Math.abs(current - target) > Math.abs(step)) {
                    element.style.left = current + "px";
                } else {
                    //清理定时器
                    clearInterval(element.timeId);
                    //直接到达目标
                    element.style.left = target + "px";
                }
            }, 10);
        }
    </script>

    所有用图片如下:

    1.jpg

    2.jpg

    3.jpg

    4.jpg

    5.jpg

    下面是完整的代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>最简单的轮播效果</title>
        <style>
            * {
                margin: 0;
                padding: 0
            }
            .box {
                width: 500px;
                height: 300px;
                border: 1px solid #ccc;
                margin: 100px auto;
                padding: 5px;
    
            }
            .inner{
                width: 500px;
                height: 300px;
                position: relative;
                overflow: hidden;
            }
            .inner img{
                width: 500px;
                height: 300px;
                vertical-align: top
            }
            ul {
                width: 1000%;
                position: absolute;
                list-style: none;
                left:0;
                top: 0;
            }
            .inner li{
                float: left;
    
            }
    
            ol {
                position: absolute;
                height: 20px;
                right: 20px;
                bottom: 20px;
                text-align: center;
                padding: 5px;
            }
            ol li{
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                background-color: #fff;
                margin: 5px;
                cursor: pointer;
    
            }
            ol .current{
                background-color: red;
            }
            #arr{
                display: none;
            }
            #arr span{
                width: 40px;
                height: 40px;
                position: absolute;
                left: 5px;
                top: 50%;
                margin-top: -20px;
                background: #fff;
                cursor: pointer;
                line-height: 40px;
                text-align: center;
                font-weight: bold;
                font-family: '黑体';
                font-size: 30px;
                color: #000;
                opacity: 0.5;
                border: 1px solid #fff;
            }
            #arr #right {
                right: 5px;
                left: auto;
            }
        </style>
    </head>
    <body>
    <div class="box" id="box">
        <div class="inner">
            <!--轮播图-->
            <ul>
                <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
    
            </ul>
    
            <ol class="bar">
    
            </ol>
            <!--左右焦点-->
            <div id="arr">
                        <span id="left">
                            <
                        </span>
                <span id="right">
                            >
                        </span>
            </div>
    
        </div>
    </div>
    <script>
        /**
         *
         * @param id  传入元素的id
         * @returns {HTMLElement | null}  返回标签对象,方便获取元素
         */
        function my$(id) {
            return document.getElementById(id);
        }
    
        //获取各元素,方便操作
        var box=my$("box");
        var inner=box.children[0];
        var ulObj=inner.children[0];
        var list=ulObj.children;
        var olObj=inner.children[1];
        var arr=my$("arr");
        var imgWidth=inner.offsetWidth;
        var right=my$("right");
        var pic=0;
        //根据li个数,创建小按钮
        for(var i=0;i<list.length;i++){
            var liObj=document.createElement("li");
    
            olObj.appendChild(liObj);
            liObj.innerText=(i+1);
            liObj.setAttribute("index",i);
    
            //为按钮注册mouseover事件
            liObj.onmouseover=function () {
                //先清除所有按钮的样式
    
                for (var j=0;j<olObj.children.length;j++){
                    olObj.children[j].removeAttribute("class");
                }
                this.className="current";
                pic=this.getAttribute("index");
                animate(ulObj,-pic*imgWidth);
            }
    
        }
    
    
        //设置ol中第一个li有背景颜色
        olObj.children[0].className = "current";
        //克隆一个ul中第一个li,加入到ul中的最后=====克隆
        ulObj.appendChild(ulObj.children[0].cloneNode(true));
    
        var timeId=setInterval(onmouseclickHandle,1000);
        //左右焦点实现点击切换图片功能
        box.onmouseover=function () {
            arr.style.display="block";
            clearInterval(timeId);
        };
        box.onmouseout=function () {
            arr.style.display="none";
            timeId=setInterval(onmouseclickHandle,1000);
        };
    
        right.onclick=onmouseclickHandle;
        function onmouseclickHandle() {
            //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
            //所以,如果用户再次点击按钮,用户应该看到第二个图片
            if (pic == list.length - 1) {
                //如何从第6个图,跳转到第一个图
                pic = 0;//先设置pic=0
                ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
            }
            pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
            animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
            //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
            if (pic == list.length - 1) {
                //第五个按钮颜色干掉
                olObj.children[olObj.children.length - 1].className = "";
                //第一个按钮颜色设置上
                olObj.children[0].className = "current";
            } else {
                //干掉所有的小按钮的背景颜色
                for (var i = 0; i < olObj.children.length; i++) {
                    olObj.children[i].removeAttribute("class");
                }
                olObj.children[pic].className = "current";
            }
        }
        left.onclick=function () {
            if (pic==0){
                pic=list.length-1;
                ulObj.style.left=-pic*imgWidth+"px";
            }
            pic--;
            animate(ulObj,-pic*imgWidth);
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            //当前的pic索引对应的按钮设置颜色
            olObj.children[pic].className = "current";
        };
    
        //设置任意的一个元素,移动到指定的目标位置
        function animate(element, target) {
            clearInterval(element.timeId);
            //定时器的id值存储到对象的一个属性中
            element.timeId = setInterval(function () {
                //获取元素的当前的位置,数字类型
                var current = element.offsetLeft;
                //每次移动的距离
                var step = 10;
                step = current < target ? step : -step;
                //当前移动到位置
                current += step;
                if (Math.abs(current - target) > Math.abs(step)) {
                    element.style.left = current + "px";
                } else {
                    //清理定时器
                    clearInterval(element.timeId);
                    //直接到达目标
                    element.style.left = target + "px";
                }
            }, 10);
        }
    </script>
    </body>
    </html>

     

    展开全文
  • 使用各种技术制作的轮播
  • 安卓图片显示轮播图,简单的图片轮播,适合跟我一样的菜鸟初学者,图片是自己服务器上的,服务器还有200天到期,到期之后可能图片就看不到了。
  • 消息轮播,最新消息的滚动轮播,还有垂直方向的消息滚动轮播
  • js原生实现轮播图无限轮播,支持手势操作
  • 轮播-源码

    2021-02-09 21:18:36
    轮播
  • 轮播图全屏 轮播图全屏 轮播图全屏 轮播图全屏 轮播图全屏
  • android轮播图简单实现 支持左右无限无缝轮播 自动轮播 ,android轮播图简单实现 支持左右无限无缝轮播 自动轮播
  • 图片轮播轮播

    2016-08-08 14:01:35
    图片轮播功能
  • 轮播图_轮播图_源码

    2021-10-01 17:56:28
    通过javaScript实现简单的自动轮播图,包括点击按钮轮播,自动轮播等功能
  • 安卓广告轮播效果

    千次下载 热门讨论 2014-10-11 14:08:00
    淘宝、京东 等网站的主页轮播广告图片效果。
  • 轮播轮播轮播图。.rar

    2019-08-18 00:18:15
    轮播图用到的js和css,加压后就能看到,将就看看呗,在里面截取自己需要的就欧了,在网上也能找到的。
  • 滚动轮播,文字轮播

    2018-01-31 14:56:23
    文字轮播,主要是横竖上下轮播,jquery手写滚动数据。自动添加尾部,再从头滚动。
  • android轮播

    2017-11-17 10:32:19
    安卓开发轮播图安卓开发轮播图安卓开发轮播图安卓开发轮播图安卓开发轮播
  • 图片轮播,自动轮播,点击暂停.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
  • android viewpager实现轮播

    万次阅读 2020-10-20 15:05:01
    本文是基于ViewPager实现的无限自动轮播banner 分为三步:第一部分是有限手动轮播;第二部分是无限轮播;第三部分是自动轮播;第四部分是指示器适配 有限手动轮播实现: 布局: <androidx.viewpager.widget....

    本文是基于ViewPager实现的无限自动轮播banner:

    分为四步去实现:

    第一步是有限手动轮播;

    第二步是无限轮播;

    第三步是自动轮播;

    第四步是指示器适配

    第一步:有限手动轮播实现

    布局:

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:layout_marginEnd="12dp" />

    adapter实现:

    public class BannerAdapter extends PagerAdapter {
        
        private List<String> bannerList;
    
        public BannerAdapter(List<String> bannerList) {
            this.bannerList = bannerList;
        }
    
        @Override
        public int getCount() {
            return bannerList.size();
        }
    
        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
            return view == object;
        }
    
        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            ImageView bannerImageView = new ImageView(container.getContext());
            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            bannerImageView.setLayoutParams(lp);
            bannerImageView.setScaleType(ImageView.ScaleType.FIT_XY);
            Glide.with(container.getContext()).load(bannerList.get(position)).into(bannerImageView);
    
            container.addView(bannerImageView);
            return bannerImageView;
        }
    
        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView((View) object);
        }
    }

    Activity中:

    // scrollview中viewpager一定要设置高度,此处根据图片的宽高比来设定高度
    
    int bannerWidth = (Utils.getScreenWidth(getContext()) - Utils.dip2pixel(getContext(), 24));
    LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) bannerView.getLayoutParams();
    lp.width = LinearLayout.LayoutParams.MATCH_PARENT;
    lp.height = (int) (bannerWidth * 90f / 345);
    bannerView.setLayoutParams(lp);
    
    bannerView.setAdapter(new BannerAdapter(getUrlList()));

    注意:ScrollView包裹ViewPager时,ViewPager的高度一定要有确定值,否则内容无法加载出来,可以在xml中指定,也可以代码设定,但一定要有确定值。

    第二步:无限轮播

    无限轮播只需要在有限轮播的基础上,做以下两个改动点,修改getCount返回值且在加载数据时获取正确的数据源即可

    public class BannerAdapter extends PagerAdapter {
    
        private List<String> bannerList;
    
        public BannerAdapter(List<String> bannerList) {
            this.bannerList = bannerList;
        }
    
        @Override
        public int getCount() {
    //        return bannerList.size();  // before
            return Integer.MAX_VALUE;   // now
        }
    
        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
            return view == object;
        }
    
        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            ImageView bannerImageView = new ImageView(container.getContext());
            int realPosition = position % bannerList.size(); // 获取要加载数据的真实位置
            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            bannerImageView.setLayoutParams(lp);
            bannerImageView.setScaleType(ImageView.ScaleType.FIT_XY);
    //        Glide.with(container.getContext()).load(bannerList.get(position)).into(bannerImageView); // before
            Glide.with(container.getContext()).load(bannerList.get(realPosition)).into(bannerImageView); // now
    
            container.addView(bannerImageView);
            return bannerImageView;
        }
    
        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView((View) object);
        }
    }

    修改完发现banner只能向右无限轮播,第一次左滑滑不动,这个时候我们强制设置viewpager位置在中间就可以解决这个问题了

    bannerView.setAdapter(new BannerAdapter(getUrlList()));
    bannerView.setCurrentItem(getUrlList().size() * 5);
    

    第三步:自动轮播

    handler每隔轮播间隔发送消息,设置viewpager为下一个位置

    private Runnable bannerRunnable = new Runnable() {
            @Override
            public void run() {
                bannerView.setCurrentItem(bannerView.getCurrentItem() + 1);
                mHandler.postDelayed(bannerRunnable, 3000);
            }
        };
    
    bannerView.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
                }
    
                @Override
                public void onPageSelected(int position) {
                    // 手滑动到某一位置,重新开始计时
                    start();
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
    
                }
            });
    
    private void start() {
            mHandler.removeCallbacksAndMessages(null);
            mHandler.postDelayed(bannerRunnable, 3000);
        }

    第四步:添加指示器

    指示器样式及表现可以自己去根据需求实现,以相对简单和常见的小圆圈指示器为例,添加和banner数量相同的小圆圈,小圆圈设置selector,在选中时为黑色选中样式,在非选中时为灰色默认样式,根据当前选中的banner的实际position,设置指示器的selected属性,从而展示不同的样式

    private void initIndicator() {
            for (int i = 0; i < getUrlList().size(); i++) {
                View view = new View(getActivity());
                LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(Utils.dip2pixel(getActivity(), 6), Utils.dip2pixel(getActivity(), 6));
                lp.rightMargin = Utils.dip2pixel(getActivity(), 8);
                view.setLayoutParams(lp);
                view.setBackgroundResource(R.drawable.selector_indicator_view);
                view.setSelected(i == 0);
                llIndicatorView.addView(view);
            }
        }
    
    
    private void initBannerView() {
            bannerView.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
                }
    
                @Override
                public void onPageSelected(int position) {
                    // 手滑动到某一位置,重新开始计时
                    realPosition = 0;
                    realPosition = position % getUrlList().size();
                    // 根据当前滑动到的banner设置指示器的状态
                    for (int i = 0; i < llIndicatorView.getChildCount(); i++) {
                        llIndicatorView.getChildAt(i).setSelected(i == realPosition);
                    }
                    start();
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
    
                }
            });
        }

    附:Utils文件

    public class Utils {
        public static void setFullScreen(Activity activity) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
                decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
                activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
            }
        }
    
        public static int dip2pixel(Context context, float n) {
            int value = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, n, context.getResources().getDisplayMetrics());
            return value;
        }
    
        /**
         * 获取屏幕宽度
         * @param context
         * @return 屏幕宽度
         */
        public static int getScreenWidth(Context context) {
            WindowManager wm = (WindowManager) context
                    .getSystemService(Context.WINDOW_SERVICE);
            DisplayMetrics outMetrics = new DisplayMetrics();
            wm.getDefaultDisplay().getMetrics(outMetrics);
            return outMetrics.widthPixels;
        }
    }

     

    展开全文
  • HTML5轮播图全代码

    万次阅读 多人点赞 2018-11-21 21:33:40
    轮播图原理大概是这样的,假定三张图片需要做轮播效果,首先需要将这三张图片并列放置,然后将这个整体并列向左移动,每当一张图片完整的从显示框走出,则将这张图片放置到最后面,循环往复就可以实现图片向左(或一...

    轮播图原理大概是这样的,假定三张图片需要做轮播效果,首先需要将这三张图片并列放置,然后将这个整体并列向左移动,每当一张图片完整的从显示框走出,则将这张图片放置到最后面,循环往复就可以实现图片向左(或一个方向)移动。然后,需要有两个定时器,一个定时器A控制三张图片整体左移速度,另一个定时器B控制每当一张完整的图片走进这个显示框就等待一到两秒得到更好的用户体验。
    我这里用三个div框当作轮播图来演示。
    在html的body中添加一个div作为显示框,然后在这个div内部添加三个子div作为图片显示。代码如下:

    <div id="box">
    	<div id="red" class="slide"></div>
    	<div id="green" class="slide"></div>
    	<div id="blue" class="slide"></div>
    </div>
    

    头部添加css样式:

    此时网页中应该是有一个黑色显示框div,内部有红、绿、蓝三个div框,三个框从上到下排列。
    第一步,需要将三张图片都并列显示。
    要实现将div挪动,且div比较方便控制每时每刻的位置(移动),只能使用相对定位,且为方便,三个子div位置移动应该是相对box,所以box应该作为相对的参照点。分别为box和slide代码添加position属性:

    #box{
    	width:100px;
    	height:100px;
    	border:1px solid black;
    	position:relative;
    }
    .slide{
    	width:100px;
    	height:100px;
    	position:absolute;
    }
    

    为整个页面添加onload加载完成事件,当浏览器打开并加载完并自动执行事件中的代码块。这部分js代码写在刚才css下面即可,保持同级结构。

      <script type="text/javascript">
    onload=function(){
    	var arr = document.getElementsByClassName("slide");
    	for(var i=0;i<arr.length;i++){
    		arr[i].style.left = i*100+"px";
    	}
    }
    </script>
    

    当页面加载完全,三个div应该并列在一起。
    接下来,需要实现将这三个div整体向左移动,使用定时器,即前面的定时器A。*onload同级下面添加如下代码:

    function LeftMove(){
    		var arr = document.getElementsByClassName("slide");//获取三个子div
    		for(var i=0;i<arr.length;i++){
    			var left = parseFloat(arr[i].style.left);
    			left-=2;
    			var width = 100;//图片的宽度
    			if(left<=-width){
    				left=(arr.length-1)*width;//当图片完全走出显示框,拼接到末尾
    			}
    			arr[i].style.left = left+"px";
    		}
    		}
    	moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器,并给自己取名
    **此时,三个div已经能够缓慢向左移动。现在需要再开启一个定时器B,并将A定时器装入到B定时器中,A的定时器时间间隔应该长于一个div完全走进显示框的时间,我这里设置为3秒。然后,将A定时器装入到方法divInterval中,B定时器调用这个方法。且为了用户体验效果更好,当一个div完全走入显示框后,应该等待一段时间,再开是移动。所以在LeftMove方法中,*if判断中还需关闭moveId这个定时器*,停止此时移动的div定时器。当3秒不到的时间后,定时器B又会开启一个新的定时器A。**
    	if处添加一句代码为:
    		
    
    if(left<=-width){
    				left=(arr.length-1)*width;//当图片完全走出显示框,拼接到末尾
    				clearInterval(moveId);
    			}
    		
    		function divInterval(){
    		moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器
    		}
    		timeId=setInterval(divInterval,3000);//设置一个3秒的定时器。
    

    到这里,轮播图基本已经实现了。然后,还需要在css样式中为box添加overflow,将超出显示框的div隐藏。

      	#box{
    width:100px;
    height:100px;
    border:1px solid black;
    position:relative;
    overflow:hidden;
    

    }

    然后为了解决当鼠标悬停在轮播图,轮播图停止轮播效果,需要在box上添加鼠标移入和移出事件。开始标签:

    <div id="box" onmouseover="stop()" onmouseout="start()">
    

    添加js代码:

    function stop(){
    	clearInterval(timeId);//鼠标停留关闭B定时器
    }
    function start(){
    	clearInterval(timeId);//重新打开一个定时前,先关闭之前定时器。
    	timeId=setInterval(divInterval,2000);//重启一个定时器
    }
    

    当浏览器窗口切出或页面切换到其他页面一段时间再回来时,轮播效果会有短暂加速(随切出时间加长而加长)。主要是因为虽然窗口切出去了,定时器依然在执行,但页面却没有将效果显示,所以切回来后会将之前的效果显示出来而加速轮播图。所以添加页面焦点事件:

    //页面失去焦点定时器停止
    onblur = function(){
    	stop();
    }
    //页面获取焦点时重启定时器
    onfocus = function(){
    	start();
    }
    

    全部代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">
    	#box{
    		width:100px;
    		height:100px;
    		border:1px solid black;
    		position:relative;
    		overflow:hidden;
    	}
    	#red{
    		background-color:red;
    		width:100px;
    	}
    	#green{
    		background-color:green;
    		width:100px;
    	}
    	#blue{
    		background-color:blue;
    		width:100px;
    	}
    	.slide{
    		width:100px;
    		height:100px;
    		position:absolute;
    	}
    </style>
    <script type="text/javascript">
    	onload=function(){
    		var arr = document.getElementsByClassName("slide");
    		for(var i=0;i<arr.length;i++){
    			arr[i].style.left = i*100+"px";
    		}
    	}
    	function LeftMove(){
    		var arr = document.getElementsByClassName("slide");//获取三个子div
    		for(var i=0;i<arr.length;i++){
    			var left = parseFloat(arr[i].style.left);
    			left-=2;
    			var width = 100;//图片的宽度
    			if(left<=-width){
    				left=(arr.length-1)*width;//当图片完全走出显示框,拼接到末尾
    				clearInterval(moveId);
    			}
    			arr[i].style.left = left+"px";
    		}
    	}
    	function divInterval(){
    		moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器
    	}
    	
    	
    	timeId=setInterval(divInterval,2000);//设置一个3秒的定时器。
    	
    	function stop(){
    		clearInterval(timeId);
    	}
    	function start(){
    		clearInterval(timeId);
    		timeId=setInterval(divInterval,2000);
    	}
    	
    	//页面失去焦点停止
    	onblur = function(){
    		stop();
    	}
    	//页面获取焦点时开始
    	onfocus = function(){
    		start();
    	}
    </script>
    </head>
    <body>
    	<div id="box" onmouseover="stop()" onmouseout="start()">
    		<div id="red" class="slide"></div>
    		<div id="green" class="slide"></div>
    		<div id="blue" class="slide"></div>
    	</div>
    </body>
    </html>
    
    展开全文
  • 轮播视频,左右轮播播放
  • 原生态图片轮播,能更好理解JQ的轮播函数是怎么实现的,如果要应用直接修改参数和图片路径就能用
  • 图片轮播 文字轮播 ImageSwitcher TextSwitcher
  • 移动端的(无缝/响应式/滑动)轮播 效果 demo git clone git@github.com:AngleTF/banner-js.git demo cd demo npm install npm run dev npm安装 npm install lif-phone-slider -D ES6 或 CommonJs使用 import i1 from ...
  • jquery轮播

    2019-03-23 14:55:35
    jquery轮播
  • 自动轮播

    2016-11-20 17:33:21
    自动轮播
  • 轮播+轮播插件

    2015-08-22 13:57:00
    主要实现轮播功能机制,用户可控制图片大小,控制所需图片,控制位置,简单调用。
  • 轮播插件轮播插件

    2015-05-08 10:02:38
    一款很不错的轮播插件,支持键盘左右键控制,体验完美。
  • 拥有弹性效果的轮播图,拥有弹性效果的轮播图,拥有弹性效果的轮播图,拥有弹性效果的轮播图,拥有弹性效果的轮播图,拥有弹性效果的轮播图,拥有弹性效果的轮播图,拥有弹性效果的轮播图,拥有弹性效果的轮播图,
  • 5.轮播图_轮播图_源码

    2021-10-01 10:53:27
    轮播图:一般用于商品展示等,可以用轮播插件来实现
  • 压缩包分为左右轮播和上下轮播两个工程,集成简单,实现逻辑清楚,可以学习思想并尝试自己实现
  • 简单的轮播实现,以及鼠标悬停在轮播图上,轮播轮播效果停止。
  • 轮播特效

    2016-03-24 16:16:03
    轮播模板

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 100,474
精华内容 40,189
关键字:

轮播