js原生带缩略图的图片切换效果

js原生带缩略图的图片切换效果

本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自《JavaScript DOM编程艺术(中文第二版)》一书第10章中有一段代码。(可以直接baidu)

左边是banner图,右边是缩略图,当鼠标滑入缩略图时,也会切换图片。

一、这段是html代码,可以直接拷贝,需要自己准备相同大小的banner图,例中图片都是500x300 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片轮播</title><script src="./js.js"></script><style>* {margin: 0;padding: 0;word-break: break-all;}body {background: #FFF;color: #333;font: 12px/1.6em Helvetica, Arial, sans-serif;}a {color: #0287CA;text-decoration: none;}a:hover {text-decoration: underline;}ul,li {list-style: none;}fieldset,img {border: none;}legend {display: none;}em,strong,cite,th {font-style: normal;font-weight: normal;}input,textarea,select,button {font: 12px Helvetica, Arial, sans-serif;}table {border-collapse: collapse;}html {overflow: -moz-scrollbars-vertical;}#ifocus {width: 620px;height: 320px;margin: 20px;border: 1px solid #DEDEDE;background: #F8F8F8;}#ifocus_pic {display: inline;position: relative;float: left;width: 500px;height: 300px;overflow: hidden;margin: 10px 0 0 10px;}#ifocus_piclist {position: absolute;}#ifocus_piclist li {width: 500px;height: 300px;overflow: hidden;}#ifocus_piclist img {width: 500px;height: 300px;}#ifocus_btn {display: inline;float: right;width: 94px;margin: 9px 9px 0 0;}#ifocus_btn li {width: 94px;height: 57px;cursor: pointer;opacity: 0.5;-moz-opacity: 0.5;filter: alpha(opacity=50);}#ifocus_btn img {width: 80px;height: 50px;margin: 7px 0 0 11px;}#ifocus_btn .current {/* background: url(i/ifocus_btn_bg.gif) no-repeat; */opacity: 1;-moz-opacity: 1;filter: alpha(opacity=100);}</style>
</head><body><div id="ifocus"><div id="ifocus_pic"><div id="ifocus_piclist" style="left:0; top:0;"><ul><li><a href="#"><img src="./images/1.jpg" alt="" /></a></li><li><a href="#"><img src="./images/2.jpg" alt="" /></a></li><li><a href="#"><img src="./images/3.jpg" alt="" /></a></li><li><a href="#"><img src="./images/4.jpg" alt="" /></a></li><li><a href="#"><img src="./images/5.jpg" alt="" /></a></li></ul></div></div><div id="ifocus_btn"><ul><li class="current"><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li></ul></div></div>
</body>
</html>
View Code

二、这段是js代码,其中用到了几个经典的js代码。在js中需要修改对应的id名字、图片移动的尺寸等。

function $(id) {return document.getElementById(id);
}function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {window.onload = function () {oldonload();func();}}
}function moveElement(elementID, final_x, final_y, interval) {if (!document.getElementById) return false;if (!document.getElementById(elementID)) return false;var elem = document.getElementById(elementID);if (elem.movement) {clearTimeout(elem.movement);}if (!elem.style.left) {elem.style.left = "0px";}if (!elem.style.top) {elem.style.top = "0px";}var xpos = parseInt(elem.style.left);var ypos = parseInt(elem.style.top);if (xpos == final_x && ypos == final_y) {return true;}if (xpos < final_x) {var dist = Math.ceil((final_x - xpos) / 10);xpos = xpos   dist;}if (xpos > final_x) {var dist = Math.ceil((xpos - final_x) / 10);xpos = xpos - dist;}if (ypos < final_y) {var dist = Math.ceil((final_y - ypos) / 10);ypos = ypos   dist;}if (ypos > final_y) {var dist = Math.ceil((ypos - final_y) / 10);ypos = ypos - dist;}elem.style.left = xpos   "px";elem.style.top = ypos   "px";var repeat = "moveElement('"   elementID   "',"   final_x   ","   final_y   ","   interval   ")";elem.movement = setTimeout(repeat, interval);
}function classNormal(iFocusBtnID) {var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');for (var i = 0; i < iFocusBtns.length; i  ) {iFocusBtns[i].className = 'normal';}
}function classCurrent(iFocusBtnID, n) {var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');iFocusBtns[n].className = 'current';
}function iFocusChange() {if (!$('ifocus')) return false;$('ifocus').onmouseover = function () {atuokey = true};$('ifocus').onmouseout = function () {atuokey = false};var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');var listLength = iFocusBtns.length;iFocusBtns[0].onmouseover = function () {moveElement('ifocus_piclist', 0, 0, 5);classNormal('ifocus_btn');classCurrent('ifocus_btn', 0);}if (listLength >= 2) {iFocusBtns[1].onmouseover = function () {moveElement('ifocus_piclist', 0, -300, 5);classNormal('ifocus_btn');classCurrent('ifocus_btn', 1);}}if (listLength >= 3) {iFocusBtns[2].onmouseover = function () {moveElement('ifocus_piclist', 0, -600, 5);classNormal('ifocus_btn');classCurrent('ifocus_btn', 2);}}if (listLength >= 4) {iFocusBtns[3].onmouseover = function () {moveElement('ifocus_piclist', 0, -900, 5);classNormal('ifocus_btn');classCurrent('ifocus_btn', 3);}}if (listLength >= 5) {iFocusBtns[4].onmouseover = function () {moveElement('ifocus_piclist', 0, -1200, 5);classNormal('ifocus_btn');classCurrent('ifocus_btn', 4);}}
}
setInterval('autoiFocus()', 3000);
var atuokey = false;function autoiFocus() {if (!$('ifocus')) return false;if (atuokey) return false;var focusBtnList = $('ifocus_btn').getElementsByTagName('li');var listLength = focusBtnList.length;for (var i = 0; i < listLength; i  ) {if (focusBtnList[i].className == 'current') var currentNum = i;}if (currentNum == 0 && listLength != 1) {moveElement('ifocus_piclist', 0, -300, 5);classNormal('ifocus_btn');classCurrent('ifocus_btn', 1);}if (currentNum == 1 && listLength != 2) {moveElement('ifocus_piclist', 0, -600, 5);classNormal('ifocus_btn');classCurrent('ifocus_btn',2);}if (currentNum == 2 && listLength != 3) {moveElement('ifocus_piclist', 0, -900, 5);classNormal('ifocus_btn');classCurrent('ifocus_btn',3);}if (currentNum == 3) {moveElement('ifocus_piclist', 0, -1200, 5);classNormal('ifocus_btn');classCurrent('ifocus_btn', 4);}if (currentNum == 4) {moveElement('ifocus_piclist', 0, 0, 5);classNormal('ifocus_btn');classCurrent('ifocus_btn',0);}}
addLoadEvent(iFocusChange);
View Code

 效果如下图

 

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364761.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux 基础10-磁盘配额管理

1. 基本概念 1.1 概念&#xff1a; 在linux系统中&#xff0c;由于是多人多任务的使用环境&#xff0c;所以会有多人共同使用一个硬盘空间的情况&#xff0c;如果其中少数几个人大量使用了硬盘空间的话&#xff0c;势必会压缩其他使用者的使用空间&#xff0c;因此管理员应该适…

java 全半角转换_Java 全半角转换

* 全角转半角的 转换函数* return String*/public static final String full2HalfChange(String QJstr){StringBuffer outStrBuf new StringBuffer("");String Tstr "";byte[] b null;for (int i 0; i < QJstr.length(); i) {Tstr QJstr.substring…

第九章:内存管理

内存管理 引用计数&#xff1a;垃圾回收机制的依据 a.变量的值被引用&#xff0c;该值的引用计数 1b.变量的值被解绑&#xff0c;该值的引用计数 -1c.引用计数为0时就会被垃圾回收机制回收​ 引用计数会出现循环引用问题&#xff1a;相互引用无法释放 a.两个变量引用其值&#…

Centos系统通过tar.gz包安装MySQL5.7

环境准备&#xff1a; 操作系统&#xff1a; http://vault.centos.org/6.5/isos/x86_64/ 下载 CentOS-6.5-x86_64-bin-DVD1.iso vmware workstation下安装系统 MySQL安装包连接地址&#xff1a; https://downloads.mysql.com/archives/community/ 下载 mysql-5…

java web转码_javaweb后台转码

为什么需要转码?客户端向服务器发送请求的四种情况:1、URL方式直接访问;2、页面链接(属于get请求);3、表单get提交;4、表单post提交1.url(url和页面链接):各大浏览器、各个操作系统对URL的URI、QueryString编码都可能存在不同.tomcat对URI的解码操作是首先获取Connector的解码…

微信小程序实战篇:商品属性联动选择(案例)

本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果&#xff0c;素材参考了一点点奶茶。 效果演示&#xff1a; 商品属性联动.gif代码示例 1、commodity.xml <!-- <view class"title">属性值联动选择</view> --> <!--…

使用Mockito在Java中进行模拟入门

我们都编写了单元测试&#xff0c;但是有时我们面临的挑战是被测单元可能依赖于其他组件。 并且配置其他组件进行单元测试绝对是一个过大的选择。 相反&#xff0c;我们可以使用Mocks代替其他组件&#xff0c;并继续进行单元测试。 为了说明如何使用模拟&#xff0c;我有一个数…

2.12 Hivet中order by,sort by、distribute by和cluster by

https://cwiki.apache.org/confluence/display/Hive/LanguageManualSortBy一、order by对全局数据的排序&#xff0c;仅仅只有一个reduce&#xff1b;Hive中的order by跟传统的sql语言中的order by作用是一样的&#xff0c;会对查询的结果做一次全局排序&#xff0c; 所以说&am…

如何相互转换逗号分隔的字符串和List【转】

将逗号分隔的字符串转换为List 方法 1&#xff1a; 利用JDK的Arrays类 String str "a,b,c"; List<String> result Arrays.asList(str.split(",")); 方法 2&#xff1a; 利用Guava的Splitter String str "a, b, c"; List<String&g…

禁用F12和鼠标右键,防止查看控制台代码

虽然是个治标不治本的办法&#xff0c;还是挺有用的 在禁用同时&#xff0c;自身的代码健壮性也需要加强 // 屏蔽F12document.onkeydown function () {//f12键if (window.event && window.event.keyCode 123) {event.keyCode 0;event.returnValue false;}// enter…

java 文件解析异常_java中异常的解析

Java Exception&#xff1a;1、Error2、Runtime Exception 运行时异常3、Exception4、throw 用户自定义异常异常类分两大类型&#xff1a;Error类代表了编译和系统的错误&#xff0c;不允许捕获&#xff1b;Exception类代表了标准Java库方法所激发的异常。Exception类还包含运行…

Spring JMS:处理事务中的消息

1.引言 这篇文章将向您展示在使用JMS异步接收消息期间&#xff0c;使用者执行过程中的错误如何导致消息丢失。 然后&#xff0c;我将解释如何使用本地事务解决此问题。 您还将看到这种解决方案在某些情况下可能导致消息重复&#xff08;例如&#xff0c;当它将消息保存到数据库…

OS X EI Captain 下解决 There was a problem confirming the ssl certificate 问题

参考&#xff1a; Problem Confirming the SSL Certificate - OSX OS X EI Captain 下解决 There was a problem confirming the ssl certificate 问题 在安装 matplotlib 时&#xff0c;出现以下错误&#xff1a; python3 -mpip install matplotlibCollecting matplotlibCould…

Linux下Python编译安装

1.安装python3 1.1下载python源码包 网址&#xff1a;https://www.python.org/downloads/release/python-362/ 下载地址&#xff1a;https://www.python.org/ftp/python/3.6.2/Python-3.6.2.tgz 1.1.1安装python前的库环境&#xff0c;非常重要 yum install gcc patch libffi-d…

call/apply以及this指向的理解

javascript是面向对象的语言&#xff0c;Function也是一种对象&#xff0c;有自己的属性和方法。call和apply就是js函数自带方法&#xff0c;挂在Fucntion.prototype上。一般调用某函数时&#xff0c;直接“函数名&#xff08;参数&#xff09;”的写法即可&#xff0c;函数内部…

Java排序算快速排序_Java排序算法 [快速排序]

package cn.com.dom4j.sort;public class QuickSort {/**快速排序在 Java中, 快速排序被用作基本数据类型的排序 (当然, 不只快速排序一种)快速排序是实践中的一种快速的排序算法, 在 C或对 Java基本类型的排序证特别有用.它的平均运行时间是 O(N logN), 该算法之所以特别快, 主…

Java Enterprise软件与应有的内容

许多开发人员在其职业生涯的某个阶段最终进入了Java“企业”世界。 我知道&#xff0c;仅此一个词就能引起各种反应&#xff0c;这是正确的。 通常&#xff0c;存在许多有趣的技术挑战的环境最终会成为那些没人愿意从事的环境&#xff0c;因为它们脆弱&#xff0c;难以处理且没…

OO第二单元作业总结

一&#xff1a;设计策略 第一次作业&#xff1a;第一次是单电梯傻瓜调度策略&#xff0c;因此我把调度器当作共享资源对象&#xff0c;有一个put和一个get方法&#xff0c;因为只有一个电梯&#xff0c;并且单次取出和投放一个请求&#xff0c;因此只需要同步控制一下这两个方法…

LESS+to+MCSS

此文已由作者郑海波授权网易云社区发布。欢迎访问网易云社区&#xff0c;了解更多网易技术产品运营经验一、前言虽然首页没有开始做&#xff0c;昨天仍决定将[MCSS](https://github.com/NetEaseWD/mcss)从身边的基友们开始向杭研推广了&#xff0c;从开始做这个直到现在推广遇到…

jmeter找不到java.dll_Windows下Jmeter安装出现Not able to find Java executable or version问题解决方案...

最近在做一个开放接口平台性能测试 , 指标是最少达到1000/s的并发 , 接口鉴权 百万级的表 在1s内完成..在众多压测工具中 ,,选择了Apache的jmeter ,于官网下载了最新版本http://jmeter.apache.org/download_jmeter.cgi (jmeter下载地址)由于jmeter运行是基于java的,所以需要…