我们在做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. poj 1442 Black Box(优先队列&Treap)

    题目链接:http://poj.org/problem?id=1442 思路分析: <1>维护一个最小堆与最大堆,最大堆中存储最小的K个数,其余存储在最小堆中; <2>使用Tr ...

  2. SEO市场是在扩大还是缩小 Seoer终于会变成什么?

    近期有两件全然背道而驰的事情同一时候发生.第一件事情是以SEO业务为主要业务的业者逐渐降低,很多原本是SEO的业者都纷纷转向其它业务.SEO业务反而变成副业.第二件事情是中小企业的SEO需求添加了.而 ...

  3. c++中的 堆和栈

    /*用指针p存储堆中的空间时,在将第二块内存空间赋给p之前,我们要释放p原来指向的内存空间, 这样才不会造成内存泄漏,不然的话p原来记录的内存空间就找不到了,而且也无法再次利用 注意:你在使用new以 ...

  4. CentOS Linux使用crontab运行定时任务详解

    参考博文: (总结)CentOS Linux使用crontab运行定时任务详解

  5. IOS-TextField功能方法详解

    //初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, ...

  6. javascript入门视频第一天 小案例制作 零基础开始学习javascript

    JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...

  7. linux 学习:环境变量设置

    一.临时环境变量 临时环境变量,只对当前打开的shell生效,shell关闭后,环境变量失效. 设置方法一: 分两步 MYPARA=hello export MYPARA 设置方法二:一步完成 exp ...

  8. 转:CSS选择器笔记

    作者: 阮一峰 日期: 2009年3月12日 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查 ...

  9. 网页制作之JavaScript部分3--事件及事件传输方式(函数调用 练习题 )重要---持续更新中

    一. 事件:说白了就是调用函数的一种方式.它包括:事件源.事件数据.事件处理程序. JS事件 1.js事件通常和函数结合来使用,这样可以通过发生的事件来驱动函数的执行,从而引起html出现不同的效果. ...

  10. 关于php判断中文字符的问题

    在网上找了好多例子,还是这个靠谱点: UTF-8匹配: 在javascript中,要判断字符串是中文是很简单的.比如: var str = "php编程"; if (/^[\u4e ...