[DBW]大图轮播,可通过两种方法实现

通过在div中加入表格,实现大图轮播,代码如下:

整体的思路:

1。在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏

2.在js中定义一个变量接受left的值,并赋值为0px,即初始值

3设置函数 function  a()

{在函数中将接收到的值强制转化为数字,

然后在值中减掉一张图片的宽度,

}

3.延迟执行,设置需要延迟的代码及延迟的时间,最后回到表格中,加入一个调用方法


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<style type="text/css">                      //style固定格式,双标签

#a1{ width:800px; height:500px;left:150px; position:relative;  overflow:hidden; margin:50px;     //id为a1的div样式,超出部分隐藏

        }

#ta{ position:relative; left:0px; top:0px; transition:1s     //ta的样式,transition:1s 为渐变时间

</style>

</head>

<body>

<div id="a1">

<table id="ta" onclick="ff()" cellpadding="0" cellspacing="0" >    //在div中,创建一个表格,每一列中放入一个图片 oncleck=‘‘  调用方法

<tr>

<td><img  src="images/1.jpg" /></td>

<td><img  src="images/2.jpg"/></td>                                    // 五张图片的宽度均为800px

<td><img  src="images/3.jpg"/></td>

<td><img  src="images/4.jpg"/></td>

<td><img  src="images/5.jpg"/></td>

</tr>

</table>

</div>

</body>

</html>

<script language="javascript">            //javascrpt固定格式,双标签元素

document.getElementById("ta").style.left="0px"     //将0px这个值赋值给根据id找到的left的值

function ff()                                 //函数,不调用不执行

{

    var ta=parseInt( document.getElementById("ta").style.left);    // 定义一个值ta,将找到的值强制转换为整数

         if(ta>-3200)                                                   //判断,当ta>-3200时执行的操作

         {

      document.getElementById("ta").style.left=(ta-800)+"px"             //将ta的值减去800,(将left向左移动,原来的数是0,-800,即移动一张图的距离)

         }

         else                                                     //不满足ta>-3200时,即ta=3200时,走完五张图的时候

         {

            document.getElementById("ta").style.left="0px"     //跳回0px,即回到第一张图

         }window.setTimeout("ff()",2000)                          //延迟执行ff(),中的内容

}

   window.setTimeout("ff()",2000);                                       //延迟执行ff(),2s的时间,两秒钟换第一次图

</script>

时间: 2024-11-01 13:49:08

[DBW]大图轮播,可通过两种方法实现的相关文章

iOS 无限轮播图的两种实现

首先说一下实现的思想: 用UIScrollView实现,在scrollView上添加3个UIImageView,分别用来显示上一张图片,当前显示的图片,下一张图片.scrollView在不滑动的时候永远显示当前图片(第二张图片)即contentOffset = CGPointMake(scrollViewW,0),在滑动的时候可以预览部分上一张图片或下一张图片.现在以向左滑动为例,因为已经设置好三张图片,我们向左滑动可以看到下一张图片的一部分(此时屏幕显示着部分当前图片和部分下一张图片).如果完

自定义View之无限大图轮播ShufBanner

无限大图轮播–ShufBanner 轮播图作为一个app的宣传,展示等,往往占据着一个很重要的地位,大部分app都将其放在首页.那么通常的做法都是使用ViewPager,使其能够作用滑动,而无限轮播无外乎两种做法. - 第一种是将ViewPager的size定义为无限大,定义其初始显示的位置为中间,这样的话因为左或者右都有很多的页面,所以造成了一种可以无限轮播的假象.同时因为ViewPager的特性,其只是加载当前显示page以及左和右的三个页面,不用担心OOM. - 第二种是,将ViewPag

js自动轮播图片的两种循环方法(原创)

用5个div,布局从左到右5张图片,从左到右5个div分别指定ID为img1,img2,img3,img4,img5.(背景是relative,5个div是相对于背景absolute定位) 显示如下: 方法一:(把一个div直接赋值给另一个,轮播一次要for循环5下) 1 function autoplay(){ 2 var x,y,baoliu; 3 baoliu=document.getElementById("img5").style.backgroundImage; 4 for

大图轮播

之前有整理过用js做的大图轮播,相对来说看起来比较繁琐,今天来写一些用bootstrap做的大图轮播,看起来非常简单: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title> <link rel="stylesheet" href="h

JS对于导航栏、下拉菜单以及选项卡的切换操作、大图轮播(主要练习对于样式表的操作)

1.导航拦以及下拉菜单 css样式表代码 .div1 { width: 100px; height: 30px; background-color: red; float: left; margin-right: 10px; } .div1-div { width: 100%; height: 400px; background-color: green; margin-top: 30px; display: none; } JS脚本代码 <!DOCTYPE html> <html xm

bootstrap大图轮播手机端不能手指滑动解决办法

网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上就找到 toucher.js 可以实现,贴到博客,留作备用:  1 <script>   2     $(function(){   3         var myTouch = util.toucher(document.getElementById('carousel-index')); 

简单易懂实用的大图轮播

<head> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>大图轮播</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #container { width: 500px; h

例题:大图轮播

大图轮播 图片轮播 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)

CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 用CSS实现真的很简单很简单,下面我们来看一下第一种方法具体的代码: HTML代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <m