照片自动滑动

包含的文件

HTML代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">   <!--????IE?????-->
  <meta name="viewport" content="width=device-width,initial-scale=1">  <!---->
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script src="jquery-2.2.3.min.js"></script>
 <script src="bootstrap.min.js"></script>
  <style>
      #myCarousel{
         width:600px;
      }

  </style>
 </head>

 <body>
 <br/>
      <div class="container" id="myCarousel">
          <div id="carousel-example-generic" class="carousel slide">
              <ol class="carousel-indicators">
                 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                 <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                 <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
              </ol>
              <div class="carousel-inner">
                 <div class="item active">
                    <img src="1.jpg">
                    <div class="carousel-caption">
                       <h3>我的</h3>
                       <p>今天晚上能看见星星</p>
                    </div>
                 </div>

                  <div class="item ">
                    <img src="2.jpg">
                 </div>

                  <div class="item ">
                    <img src="3.jpg">
                 </div>
              </div>
              <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                 <span class="glyphicon glyphicon-chevron-left"></span>
              </a>

               <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                 <span class="glyphicon glyphicon-chevron-right"></span>
              </a>
          </div>
      </div>

     <script>
        $(".carousel").carousel({
            interval:2000
        })
     </script>

 </body>
</html>
 

时间: 2024-10-09 08:46:17

照片自动滑动的相关文章

仿优酷Android客户端图片左右滑动(自动滑动)

最终效果: 页面布局main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent

双击导航栏自动滑动ListView到顶部

有些app都实现了双击导航栏让页面的list自动滑动到顶部的feature. 先实现一个继承于OnTouchListener的监听多次点击事件的监听器,通过callback把连续点击的次数返回给客户代码,代码见gist:MultiTouchListener.java. https://gist.github.com/Viyu/d06eda19f9bcf7223f6b 然后给导航栏添加下面这个OnTouchListener的实现: OnMultiTouchListener mOnMultiTouc

ViewPager实现淘宝天面首页广告栏,支持左右滑动,自动滑动,带圆点指示器

原理:1.及根据当前viewpager的选中页面获取position,对其进行自增 2.之后调用:pager.setCurrentItem(currentpositon, true);进行页面切换 3.设置定时器每隔一段时间调用切换页面方法 核心代码如下: package com.dett.viewpagerautochange; import java.util.ArrayList; import java.util.Timer; import java.util.TimerTask; imp

tableview 自动滑动到某一行

NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow:10 inSection:0]; [[self tableView] scrollToRowAtIndexPath:scrollIndexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];tableview 自动滑动到某一行

【Android - 问题解决】之ScrollView嵌套ListView时总是自动滑动到ListView顶部的问题

最近做了一个项目,里面有一个ScrollView嵌套ListView的布局. 做出来之后发现,进入这个界面之后,总是自动滑动到ListView的顶部,而ScrollView中位于ListView上面的一些控件就被挤到屏幕外面去了. 解决这个问题的方法如下: 在JAVA代码中,调用ScrollView对象的这个方法: scrollView.smoothScrollTo(0, 0);

ScrollView(RecyclerView等)为什么会自动滚动原理分析,还有阻止自动滑动的解决方案

引言,有一天我在调试一个界面,xml布局里面包含Scroll View,里面嵌套了recyclerView的时候,界面一进去,就自动滚动到了recyclerView的那部分,百思不得其解,上网查了好多资料,大部分只是提到了解决的办法,但是对于为什么会这样,都没有一个很好的解释,本着对技术的负责的态度,花费了一点时间将前后理顺了下 1.首先在包含ScrollView的xml布局中,我们在一加载进来,ScrollView就自动滚动到获取焦点的子view的位置,那我们就需要看下我们activity的o

swiper 窗口宽度变化,页面宽度高度变化 导致自动滑动 解决方案

又又又又是swiper问题 背景: pc端项目,rem布局,swiper作为步骤条(上一步,下一步)的功能. 发现在屏幕拖动,宽高的变化,窗口大小的变化 会引起swiper自动滑动(到下一步). 在下载文件链接时候回轻微引起一点点宽高的变化,导致直接滑到下一步. Chrome浏览关闭底部下载内容时候也会导致滑动 思考: 1.刚开始以为是某个地方不小心多加了下一步的操作,一直在查找 2.然后以为是下载的方法导致的,更换了多种下载方案 3.实在没有找出,准备debugger的时候发现,屏幕变化也会引

pyqt5在textBrowser添加文本并自动滑动到底

pyqt5在textBrowser添加文本并自动滑动到底 说明: 1.按下按钮pushButton,把单行文本框lineEdit里的内容循环不断的添加到多行文本展示框textBrowser.2.必须要用线程做这件事,不然主程序会卡死.3.必须添加sleep(),不然主程序会卡死.4.用函数的闭包做这样的事情,效果很好. 信号与槽的连接: 1 self.pushButton_2.clicked.connect(MainWindow.slot1) 槽函数: 1 def slot1(self): 2

windows phone 8.1 FlipView 实现照片自动浏览

FlipView 控件也是一个集合控件,不过它和ListView等控件不同,ListView控件是一次显示多个项,而FlipView则是每次只显示一个项.在windows phone上通过默认的左右滑动来翻看项目,当然也可以上下滑动. 今天小梦就利用FlipView控件和定时器来给大家实现图片的自动浏览功能. 前台代码如下: <FlipView Name=”flipview”> <FlipView.ItemTemplate> <DataTemplate> <Ima