图片自动轮播

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-2.1.4.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body style="padding:100px">
<div class="carousel slide" data-inteval="6666" data-ride="carousel" data-toggle="carousel" id="page" style="width:553px">
<div class="carousel-inner">
<div class="item active"><img src="风景/322135.jpg"></div>
<div class="item"><img src="风景/219014.jpg"></div>
<div class="item"><img src="风景/321429.jpg"></div>
<div class="item"><img src="风景/319968.jpg"></div>
<div class="item"><img src="风景/321568.jpg"></div>
<div class="item"><img src="风景/322050.jpg"></div>
</div>
<a href="#page" class="carousel-control left" data-slide="prev"></a>
<a href="#page" class="carousel-control right" data-slide="next"></a>
<ul class="carousel-indicators">
<li data-target="#page" data-slide-to="0" class="actove"></li>
<li data-target="#page" data-slide-to="1"></li>
<li data-target="#page" data-slide-to="2"></li>
<li data-target="#page" data-slide-to="3"></li>
<li data-target="#page" data-slide-to="4"></li>
<li data-target="#page" data-slide-to="5"></li>
</ul>
</div>

</body>
</html>

原文地址：https://www.cnblogs.com/niechuang/p/9639694.html

时间： 2024-10-15 21:50:43

图片自动轮播的相关文章

Viewpager图片自动轮播，网络图片加载，图片自动刷新

package com.teffy.viewpager; import java.util.ArrayList; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService; import java.util.concurrent.TimeUnit; import android.annotation.SuppressLint; import android.app.Act

简易图片自动轮播

根据前段时间学的大图轮播,自己做了一个简单的图片自动轮播 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #body { width: 90%; border: 1px solid red; height: 1000px; margin: 0px auto; } #stage { widt

ViewPager + Handler 实现的图片自动轮播

首先上图看效果 我也是在网上看各种大牛们做的效果,很多都是自定义重写了一些控件来实现这个效果的.我把其中的一位大牛写的ViewPager的效果加上了Handler实现了自动轮播效果,在此做个笔记来以后温习使用! 自动轮播的核心代码如下: private final int AUTO_MSG = 1; private final int HANDLE_MSG = AUTO_MSG + 1; private static final int PHOTO_CHANGE_TIME = 1000;//定时

js实现图片自动轮播

今天有人问我这个问题,我就顺便把这个记下来,分享给大伙. 如图,就是图片自己轮播,并且图中中下方的白点也发生变化,图片到哪,白点就到哪,就直接上代码了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

ViewPager图片自动轮播加原点

Layout_Xml activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_p

图片自动轮播（一）---2017-04-05

一张一换,其他的都隐藏着: 第一种:利用td表格: </head><style>*{ margin:0px; padding:0px;}#datu{ width:200px; height:100px; border: 1px solid #000; overflow:hidden; position:relative; margin: 50px 50px;}#aa{ position:relative; top:0px; left:0px; transition:0.5s;}&l

Wpf实现图片自动轮播自定义控件

近来,公司项目需要,需要写一个自定义控件,然后就有下面的控件产生.样式没有定义好,基本功能已经实现.1.创建为自定义控件的XAML页面.下面为后台代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading; using System.Windows; using System.Windows.Controls; using Syste

CSS3实现图片自动轮播效果

首先来看一下效果:(这部电影画风好温柔...) 1.先在<body>里把图片贴进来,每个li下面再给一个标题 1 <ul class="name"> 2 <li> 3 <span><img src="img/img01.jpg" alt="" /></span> 4 <div><h3>哈尔的移动城堡</h3></div> 5 &

ios 图片自动轮播

#import "NYViewController.h" #define kImageCount 5 @interface NYViewController () <UIScrollViewDelegate> @property (nonatomic, strong) UIScrollView *scrollView; @property (nonatomic, strong) UIPageControl *pageControl; @property (nonatomic