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
js原生带缩略图的图片切换效果相关推荐
- CSS+JS带缩略图随机切换方式的图片切换效果
<html> <head> <title>CSS+JS带缩略图随机切换方式的图片切换效果丨芯晴网页特效丨CsrCode.Cn</title> <s ...
- html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
- html+css+jquery,html+css+js(+JQuery)制作扑克牌图片切换效果
先把静态页面写出来: index.html jquery制作扑克牌图片切换效果 此时的效果是这样的: 分析: 背景颜色 图片的位置 图片的边框.圆角以及阴影 让图片动起来 index.css代码: * ...
- php幻灯片切换,JavaScript_JS实现FLASH幻灯片图片切换效果的方法,本文实例讲述了JS实现FLASH幻灯 - phpStudy...
JS实现FLASH幻灯片图片切换效果的方法 本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: JS模拟FLASH幻灯片图片切换效果 /* ul,li{ ...
- html图片轮播怎么写,用js和CSS写图片切换效果(轮播图)
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果 对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
- html5滚动文字切换效果代码,js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了 ...
- 腾讯首页js图片切换效果
很漂亮的腾讯网图片切换效果 代码 < HTML > < HEAD > < TITLE > 腾讯软件 - 图片滑动效果,阿里西西整理收集. < / TITLE& ...
- Midnight.js – 实现奇妙的固定头部切换效果
Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换 ...
- html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...
jQuery插件Slider Revolution实现响应动画滑动图片切换效果 2018-12-31 编程之家 https://www.jb51.cc 这是一款非常强大的内容切换插件,它基于jQuer ...
最新文章
- ecshop affiche.php,affiche.php
- 六数码问题(广搜_队列)
- R语言实战应用精讲50篇(十九)-R语言gganimate函数应用案例:静态图变成动态,让你的图表更酷炫
- MNIST手写数字识别
- 全国计算机等级考试题库二级C操作题100套(第22套)
- 希尔伯特旅馆实验(文末送书)
- jquery-选择器-筛选器
- 基于Hmily实现TCC分布式事务解决方案
- BZOJ1127 POI2008KUP(悬线法)
- day 21 模块 和 包
- 把握linux内核设计思想系列【转】
- 如何从知网下载学位论文的PDF?
- 飘云阁15周年逆向破解教程
- 利用Python和OpenCV进行面部表情识别
- 西部数据硬盘不同色彩的含义
- 《鸟哥Linux私房菜之基础篇》(第四版)学习笔记 —— 1、Linux是什么与如何学习
- 松翰单片机定时器c语言,松翰T0 定时器中断
- python平行四边形的构造_css平行四边形与菱形变换
- 北冥乘海生:996其实没什么卵用
- java lambda 反射_反射调用与Lambda表达式调用
热门文章
- ldconfig mysql_ldconfig命令介绍
- vue - cli 脚手架安装
- kubernetes-dashboard(1.8.3)部署与踩坑
- jqGrid 常用方法
- 设计模式(中介者模式-对象去耦)
- 转收藏:Git常用命令速查表
- struts2与struts1整合,java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory
- Windows Phone性能优化建议
- mysql my.cnf在哪里_my.cnf配置文件在哪
- pycharm写python字典_pythonpycharm安装基础语法