上下轮播

<body>

<div><img id="tu" src="lun1.jpg" width="800px" height="498px"></div>
<input type="button" onclick="pro()" value="上一张">
<input type="button" onclick="nex()" value="下一张">

</body>

<script>

var arr=["轮播1.jpg","轮播2.jpg","轮播3.jpg"];
var tu=document.getElementById("tu");

var num=0;
// 上一张
function pro(){
num--;
console.log(num);
if (num<0){
num=2;
}
if(num>=0&&num<=arr.length-1){
tu.setAttribute("src",arr[num]);
}
}

//下一张
function nex(){
num++;
console.log(num);
if (num>arr.length-1){
num=0;//从0开始
}
if(num<=arr.length-1){
tu.setAttribute("src",arr[num]);
}
}

var te=setInterval(nex,1000);
tu.onmouseover = function() {
window.clearInterval(te);
};
tu.onmouseout = function() {
te = setInterval(nex, 1000);
};

</script>

时间: 2024-08-09 02:20:51

上下轮播的相关文章

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

jQuery----无缝轮播图

1.效果 2.html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/iconfont.css"> <link rel="stylesh

Android自己定义控件之轮播图控件

背景 近期要做一个轮播图的效果.网上看了几篇文章.基本上都能找到实现,效果还挺不错,可是在写的时候感觉每次都要单独去又一次在Activity里写一堆代码.于是自己封装了一下.这里仅仅是做了下封装成一个控件,不必每次反复写代码了. 效果图 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还须要在以下加一个指示器来标示滑动到了第几张轮播图.指示器我们能够用一个线性布局来依据要展示的轮播图设置显示的View,我们要做这种一个控件没

CSS-用伪类制作小箭头(轮播图的左右切换btn)

先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作. 第一个是left按钮,即prev: .vmc-arrow-left:after { content: "\e079"; } 第二个是right按钮的,也就是next下一张的按钮: .vmc-arrow-right:after { content: "\e

Bootstrap 轮播(Carousel)插件

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引用该插件的功能,那么您需要引用 carousel.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js. 实例 下面是一个简单的幻灯片,使用 Bootstrap 轮播(Carousel)插件显示了一个循环播放元

js轮播特效

1.自动轮播 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片轮播--无限轮播</title> <style> #tuijian{ border:1px #000000 solid; width:640px; height:500px; background-repeat:no-rep

Jquery 实现轮播图

jq 轮播图 function banner_show(){ var left_btn = $("#banner_tag_left"); //获取左侧单击按钮 var right_btn = $("#banner_tag_right"); //获取右侧点击按钮 var Owidth = $("#banner ul li").width(); //获取单个图片宽度 var Oindex = $("#banner ul li");

iOS开发---轮播图模块(普通版)

// 用ScrollView实现图片轮播 // ViewController.m // Slider-轮播 // // Created by JamesXiang on 15/7/21. // Copyright (c) 2015年 JamesXiang. All rights reserved. // #import "ViewController.h" @interface ViewController () <UIScrollViewDelegate> @proper

UISCrollView —— 图片轮播器封装实现(三)——(第三讲)

1.分析 利用xib布局,然后自定义一个UIView,解析xib,然后利用控制器传入数据,将其加载到控制器的view上展示即可 2. 程序结构 3. 代码具体实现 1>  xib文件 2>  创建类 XMGPageView,然后将其与xib文件关联,选中xib文件,然后设置下文中 " custom class " 为定义的类,让其来管理xib 1>    (如图,设置xib与类关联) 2>  XMGPageView.h 文件中,声明分页图片数组属性,及其一个快速

UIScrollView UIPageController NSTimer 图片轮播

实现轮播视图的思路. 1 创建一个UIScrollView 设置他的滚动范围为3张要显示的图片的宽度. 2 图片的显示次序为: 前一张图片,  当前的图片,  后一张图片. 3 当通过手势偏移了一个图片,重新加载3张图片.显示次序同第二步. 具体步骤,先移除UIScrollView上的所有子视图. 接着, 调用方法重新加载这三张图片.  最后设置UIScrollView的偏移量为一张图片的便宜量,注意不能使用动画. demo名为PagedScrollView-可以点击的滚动视图.zip 在文件中