图片自动轮播及点击图标切换图片

本案例两个功能:  第一,默认是自动图片轮播; 第二,hover到图片下面的不同数字,切换到数字对应的图片, 鼠标移出数字,动画从当前位置开始继续循环播放

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #d{position: relative;top: -30px;}
        label{margin: -5px;}
        .one{width: 10px;height: 10px;border: 1px solid black; background-color: red;}
    </style>

    <script>
        var n =0;//图片下标 label下标
        var t=0;// 清除动画用

        function init(){
            //1.默认进来自动播放轮播图
            switchImgs();

            //2. 当鼠标移入移出不同的label切换不同的图片.
            var img = document.getElementById("img");
            var labels =document.getElementsByTagName("label");//拿到所有的label标签对象

            for(var i=0;i<labels.length;i++){//给每个label标签注册一个hover事件
                labels[i].onmouseover=function(){
                    clearTimeout(t);//停止动画
                    var b= this.innerText*1;//拿到标签上的数字
                    img.src="images/photo_0"+b+".jpg";//显示对应的图片
                    clearStyle();//清除label上的样式
                    this.className="one";//让当前的label的样式变化
                }

                labels[i].onmouseout=function(){//鼠标移出动画开始,动画从当前的图片开始动画
                    n=this.innerText*1;//获取当前label上的数字并转换成整型
                    switchImgs();
                }
            }

        }

        //默认动画,图片轮播,每个1秒切换
        function switchImgs(){
            n++;
            if(n==7){n=1;}//到达末尾的时候跳转到第一张
            var img = document.getElementById("img");
            img.src="images/photo_0"+n+".jpg";
            clearStyle();//当图片到第二张的时候,要把label1的样式清除,
            document.getElementById("i"+n).className="one";
            t=setTimeout("switchImgs()",1000);
        }

        //清除label的所有的样式
        function clearStyle(){
               var labels= document.getElementsByTagName("label");
                for(var i=0;i<labels.length;i++){
                    labels[i].className="";//让label表的classname置为空
                }
        }

    </script>
</head>
<body >
    <div align="center">
        <img src="images/photo_01.jpg" width="400" height="500" id="img">
        <div id="d">
            <label id="i1">&nbsp;1&nbsp;</label>
            <label id="i2">&nbsp;2&nbsp;</label>
            <label id="i3">&nbsp;3&nbsp;</label>
            <label id="i4">&nbsp;4&nbsp;</label>
            <label id="i5">&nbsp;5&nbsp;</label>
            <label id="i6">&nbsp;6&nbsp;</label>
        </div>
    </div>
</body>
</html>
时间: 2024-09-29 04:05:58

图片自动轮播及点击图标切换图片的相关文章

JQuery移动动画实现点击按钮切换图片--JQuery基础

直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

【前端积累】点击链接切换图片显示

1 <!DOCTYPE html> 2 <html><!--树根--> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>Image Gallery</title> 8 <meta name=&q

jQuery演示10种不同的切换图片列表动画效果

经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 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 47 48 49 50 <!DOCTYPE html> <html lang="en" class="no-

CSS鼠标点击式变化图片透明度

今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css透明度属性. 如何改变呢?一种是纯css,一种使用jquery或者javascript代码控制.第一种使用:hover伪类选择器,本示例使用第二种. 先看最后效果: 第一步:放置图片 <ul id="test">        <li>            <

Android学习笔记之Button的点击事件切换点击图片

<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_parent" android:paddingBo

原生js解决图片点击左右切换(简单轮播图)

想写一个综合性的小案例,主要会运用到数组和判断以及我前面几篇博客所复习到的js的知识.今天案例想要实现的效果图如下图所示: 效果是:点击"循环切换"按钮,那么"一号"位置的文案就要写入"图片可以循环",而下面的左右箭头在点击过程中可以循环点击,并且"二号"和"三号"要响应切换到相对应的数字和文字内容:否则,点击"顺序切换"按钮,那么"一号"位置的文案就要写入"

Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在ViewPager中添加多张网络请求图片的情况下,不能进行复用,导致每次都要重新去求情已经请求过的数据致使流量数据过大 自定义的数据结构解决了这个问题,固定传递的图片数据之后进行统一请求,完成后进行页面切换数据复用 代码中涉及网络请求是用的Volley网络请求框架 PicCarousel是网络数据请求的U

【转】Android android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)

首先我们还是看一些示例:(网易,新浪,百度)      下面我简单的介绍下实现方法:其实就是listview addHeaderView.只不过这个view是一个可以切换图片的view,至于这个view怎么做,就要根据自己的喜爱了,实现有多种方法,下面我简单介绍一下. 第一种:ViewFlipper+GestureDetector 主布局就是一个listview,这里就不介绍了,我介绍下切换图片布局head_iamge.xml 1 <span style="font-size:12px;&

使用定时器通过改变图片的src来切换图片

点击以后开始自动切换图片 $("#page3_cover_1_back").click(function(){ var i=3; var haha=setInterval(function(){ $(".page3_cover_1").addClass('none'); $(".daojishi").removeClass("none"); var aaa="page3_"+parseInt(i);