我们在做web开发的时候，前台的效果要求是很高的，因为对于不懂程序的用户来说，前台的视觉冲击，无疑是对我们产品的第一印象。

在完成web图片各种功能上，很多框架有很绚丽的效果，但今天我们来看看用原生的js如何简单的实现这些功能。欢迎大家交流指正。

1.相册左右点击翻页功能

实现步骤

1.需要一个HTML标签img，添加一张图片。

2.然后需要添加一个js事件onmouseover，使每次鼠标移到图片上指针都会随左右发生变化。

3.最后需要添加一个点击事件，根据鼠标的在左边还是右边，判断是应该上一页还是下一页翻动相册。

HTML代码:

<body>

        <div>

            <img src="img/pic1.jpg" id = "bigimg" onmouseover="upNext(this)" width="300" height="300">

        </div>

    </body>

JS代码:

<script type="text/javascript">

            var arr = new Array();

            arr[0] = "1.jpg";

            arr[1] = "2.jpg";

            arr[2] = "3.jpg";

            arr[3] = "4.jpg";

            arr[4] = "5.jpg";

            var index = 0;

            function upNext(bigimg) {

            var action;

            var width = bigimg.width;

            var height = bigimg.height;

            bigimg.onmousemove = function () {

                if (window.event.offsetX < width / 2) {

                    action = 'left'

                    bigimg.style.cursor = 'url(img/arr_left.cur),auto';//将鼠标指针更换成向左指向箭头

                }

                else {

                    bigimg.style.cursor = 'url(img/arr_right.cur),auto';

                    action = 'right';

                }

            }

            bigimg.onmouseup = function () {

                if (action == 'left') {

                   if(index==0)

                       return ;

                   else

                       index--;

                }

                else {

                  if(index == 4)

                    return;

                  else

                      index ++ ;

                }

                this.src = 'img/pic'+arr[index];

            }

        }

        </script>

！！此处需要注意，有些浏览器并不兼容event事件。

2.自动切换功能

实现步骤:

1.首先还是需要一个img标签，显示一张图片。

2.需要一个数组，记录每张图片的路径，设置，跳转间隔时间。

3.添加一个js方法，根据数组下标，更改图片src。利用setInterval方法循环执行。

HTML:

<body>

        <img src="img/pic1.jpg" width="427" height="219" id="showpic" />

</body>

js:

<script language =javascript >

        var curIndex=0;

        //时间间隔 单位毫秒

        var timeInterval=3000;

        var arr=new Array();

        arr[0]="1.jpg";

        arr[1]="2.jpg";

        arr[2]="3.jpg";

        arr[3]="4.jpg";

        arr[4]="5.jpg";

        setInterval(changeImg,timeInterval);//每隔timeInterval时间，执行一次changeImg事件

        function changeImg()

        {

            var obj=document.getElementById("showpic");

            if (curIndex==arr.length-1)

            {

                curIndex=0;

            }

            else

            {

                curIndex+=1;

            }

            obj.src="img/pic"+arr[curIndex];

        }

    </script>

3.循环滚动功能(右移)

实现步骤:

1.我们需要对html进行布局，将所有要显示的图片都放在一行以内。此处注意:行内所有图片的宽度需大于外部容器的大小，否则不能达到预想效果。

2.设置滚动事件，宽度，滚动方向。此处注意,滚动速度，数字越大，滚动的越慢(每间隔一段时间执行，数字越大间隔时间越长，滚动速度越慢)；滚动的方向其实就是if else中的

简单的逻辑判断以及自增自减实现的。

3.第三部分，我们需要添加js事件，让鼠标放到滚动图片上时，时滚动终止；鼠标离开时，继续滚动。

HTML:

!!此处添加需要展示的所有图片。布局不仅限于table标签，多种html标签都能实现。

<div id=demo style="overflow:hidden;width: 300px; height: 100px;">

            <table>

                <tr>

                    <td id=demo1 valign=top>

                        <table align=left cellpadding=0 cellspace=0 border=0>

                            <tr>

                                <td>

                                    <img src="img/jg.jpg">

                                </td>

                                <td>

                                    <img src="img/fxz.jpg">

                                </td>

                                <td>

                                    <img src="img/gh.jpg">

                                </td>

                                <td>

                                    <img src="img/yj.jpg">

                                </td>

                                <td>

                                    <img src="img/zzh.jpg">

                                </td>

                            </tr>

                        </table>

                    </td>

                    <td id=demo2 valign=top ><td>

                </tr>

            </table>

        </div>

js:

<script>

            var speed=30 ;//设置滚动速度

            demo2.innerHTML=demo1.innerHTML ;

            demo.scrollLeft=demo.scrollWidth ;

            function Marquee(){

                if(demo.scrollLeft<=0)

                demo.scrollLeft+=demo2.offsetWidth;

                else{

                    demo.scrollLeft--;

                }

            }

            var MyMar=setInterval(Marquee,speed) ;

            demo.onmouseover=function() {clearInterval(MyMar);}

            demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}

</script>

4.相册简单轮播实现

实现步骤:

1.首先对html进行图片布局，使得上面一个有一个大的img标签，下面排列若干个小的img标签。

2.我们需要添加两个js事件，分别在鼠标移到小img标签和移出小img标签时产生效果。

3.在鼠标移到小img标签上时，使大的img图片src变化，并且使小img标签的border属性值颜色发生改变，在鼠标移出时颜色改变回来。

！！此处注意，大家需要使用简单的css进行页面的排版与装饰，也可以躲在css上下些功夫，使页面更漂亮。

HTML:

<body>

        <div><img src="img/pic1.jpg" width="320" height="300" id="bigimg"></div>

        <div>

            <ul>

                <li><img src="img/pic1.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li>

                <li><img src="img/pic2.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li>

                <li><img src="img/pic3.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li>

                <li><img src="img/pic4.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li>

                <li><img src="img/pic5.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li>

            </ul>

        </div>

</body>

js:

<script type="text/javascript">

            function rep(obj){

                document.getElementById("bigimg").src = obj.src ;

                obj.style.border = "2px solid blue" ;

            }

            function recover(obj){

                obj.style.border = "2px solid black" ;

            }

</script>

js实现相册翻页，滚动，切换，轮播功能的更多相关文章

  1. Laya List翻页滚动方案 & List滚动源码解析

    Laya List翻页滚动方案 & List滚动源码解析 @author ixenos 2019-03-29 1.List翻页滚动方案 /** * 计算下一页的起始索引, 不足时补足 * @p ...

  2. js 滚轮事件 滚轮焦点图（轮播图）

    利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charse ...

  3. Android中使用ImageViewSwitcher实现图片切换轮播导航效果

    前面写过了使用ViewFlipper和ViewPager实现屏幕中视图切换的效果(ViewPager未实现轮播)附链接: Android中使用ViewFlipper实现屏幕切换 Android中使用V ...

  4. Android 通过ViewFlipper实现广告轮播功能并可以通过手势滑动进行广告切换

    为了实现广告轮播功能,在网上找了很多方法,有的效果很好,但是代码太麻烦,并且大多是用的viewpager,总之不是很满意. 于是看了一下sdk有个控件是ViewFlipper,使用比较方便,于是尝试了 ...

  5. HTML 自动、手动切换轮播 from：金水

    .自动.手动切换轮播 body代码: <div id="tuijian"> <div class="pages" id="p1&qu ...

  6. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

  7. 个人练习：使用HTML+CSS3制作图片轮播功能（不使用JavaScript）

    先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...

  8. 原生Js_使用setInterval() 方法实现图片轮播功能

    用javascript图片轮播功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. 通过jquery js 实现幻灯片切换轮播效果

    观察各个电商网址轮播图的效果,总结了一下主要突破点与难点 1.->封装函数的步骤与具体实现 2->this关键字的指向 3->jquery js函数熟练运用 如animate 4-& ...

随机推荐

  1. Qt程式异常崩溃处理技巧(Win)

    这篇文章谈的是 Qt4 程式在视窗系统下的异常崩溃处理技巧.所以须要在头文件里包括"#include <Windows.h>". 首先,程式难免会有异常崩溃的时候.重要 ...

  2. python学习（2）

    编码: 需要注意的是:python 没有字符的概念,但是比如a='abcd',当中字母a占用一个字节,通过 方法len我们可以求出这个字符变量a所有字符个数,如:print len(a)显示结果为:4 ...

  3. BZOJ 1734: [Usaco2005 feb]Aggressive cows 愤怒的牛( 二分答案 )

    最小最大...又是经典的二分答案做法.. -------------------------------------------------------------------------- #inc ...

  4. PHP使用纯真IP数据库

    #纯真数据库调用函数(需要下载纯真数据库文件) function convertip($ip) { $ip1num = 0; $ip2num = 0; $ipAddr1 =""; ...

  5. USACO Longest Prefix 【水】

    用Dp的思想解决了这道题目,也就是所谓的暴力= = 题意:给出一个集合,一个字符串,找出这个字符串的最长前缀,使得前缀可以划分为这个集合中的元素(集合中的元素可以不全部使用). 还不会Trie 树QA ...

  6. oracle数据库连接无响应的解决

    昨天中午时,查询到服务器的数据流水最晚记录是早上8点的,现场查看服务日志很奇怪,日志输出显示挂死在数据库连接这一步.多次调试无果,随后百度发现有资料显示oracle 10.2.1的版本有登录无响应的B ...

  7. iOS开发- 获取精确剩余电量

    [UIDevice currentDevice].batteryMonitoringEnabled = YES; double deviceLevel = [UIDevice currentDevic ...

  8. secureCRT登录不上ubuntu，Connection closed

    secureCRT登录不上ubuntu 1.第一个原因是sshd服务没开,或者防火墙没关.装好sshd并打开就好. http://www.cnblogs.com/mylinux/p/5101956.h ...

  9. ZOJ3768 夹逼查找【STL__lower_bound()_的应用】

    首先学习一下lower_bound() 函数lower_bound()在first和last中的前闭后开区间进行二分查找,返回大于或等于val的第一个元素位置.如果所有元素都小于val,则返回last ...

  10. Qt线程QThread简析（8个线程等级，在UI线程里可调用thread->wait()等待线程结束，exit()可直接退出线程，setStackSize设置线程堆栈，首次见到Qt::HANDLE，QThreadData和QThreadPrivate）

    QThread实例代表一个线程,我们可以重新实现QThread::run(),要新建一个线程,我们应该先继承QThread并重新实现run()函数. 需要注意的是: 1.必须在创建QThread对象之 ...