JavaScript--淘宝图片切换
css样式有点问题,但是主要是js逻辑:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
padding:0;
margin:0;
list-style:none;
}
img{
display: block;
}
.con{
width:360px;
height:432px;
border:1px solid #ccc;
margin:100px auto;
background:url(img/taobao/01big.jpg) no-repeat;
}
.con ul{
overflow: hidden;
}
.con li{
float:left;
cursor:pointer;
/* 默认就有一个透明的边框 */
border: 1px solid transparent;
}
.con li:hover,
.con li.on{
/* 鼠标移入只是把透明颜色变成了彩色 */
border-color: #900;
}
</style>
</head> <body>
<div class="con">
<img id="bigImg" src="img/taobao/01big.jpg" alt="">
<ul>
<li class="on"><img src="img/taobao/01.jpg" data-src="img/taobao/01big.jpg" width="70" height="70" /></li>
<li><img src="img/taobao/02.jpg" data-src="img/taobao/02big.jpg" width="70" height="70" /></li>
<li><img src="img/taobao/03.jpg" data-src="img/taobao/03big.jpg" width="70" height="70" /></li>
<li><img src="img/taobao/04.jpg" data-src="img/taobao/04big.jpg" width="70" height="70" /></li>
<li><img src="img/taobao/05.jpg" data-src="img/taobao/05big.jpg" width="70" height="70" /></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
// 获取缩略图和大图事件源
// 1.先查找li
// 2.全部的li都要添加事件
var smallImg = document.getElementsByTagName('li');
var bigImg = document.getElementById('bigImg');
var bigImgs = [
'img/taobao/01big.jpg',
'img/taobao/02big.jpg',
'img/taobao/03big.jpg',
'img/taobao/04big.jpg',
'img/taobao/05big.jpg'];
for (var i = 0 ; i < smallImg.length ; i++) {
// 记录每个缩略图的下标
smallImg[i].index = i;
smallImg[i].onmouseover = function () {
// 鼠标盖住缩略图时候选择缩略图边框变色,排他思想
for (var j = 0 ; j < smallImg.length ; j++ ) {
smallImg[j].className = "";
}
this.className = "on";
// 修改大图
bigImg.src = bigImgs[this.index];
}
} </script>
JavaScript--淘宝图片切换的更多相关文章
- 原生js实现淘宝图片切换
这个淘宝图片切换具体效果就是:鼠标移上底部一行中的小图片,上面大图片区域就会显示对应的图片. gif图片看起来还挺酷的,其实实现很简单,用原生js绑定事件改变大图片区域的src. 上代码,html部分 ...
- 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果
实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- JavaScript实现多栏目切换效果
效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...
- chrome 显示图片遇到的问题,与 淘宝图片服务器 缓存 有关系
最近发现使用淘宝的jae环境,一个 abc.jsp 地址,随机跳转到淘宝图片空间里任意的一张图片. 但在chrome浏览器发现一个奇怪的问题: 用户第一次访问 abc.jsp -> 302 f ...
- JavaScript 实现 标签页 切换效果
JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...
- 每天一个JavaScript实例-tab标签切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- javascript马赛克遮罩图片切换效果:XMosaic.js(转)
新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...
- JavaScript简单的tabel切换2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 7、JavaScript总结——实现选项卡切换的效果
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
随机推荐
- 洛谷p1605--迷宫 经典dfs
https://www.luogu.org/problemnew/show/P1605 用这种题来复习一下dfs 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和终点坐标,问 ...
- JavaScript 的 WebAssembly
本周发布的 Firefox 52 加入了对 WebAssembly 的支持,成为第一个支持 WebAssembly 标准的浏览器,而其它浏览器如 Chrome 57.Safari 和 Edge 也都会 ...
- osg如何设置抗锯齿(反走样,反锯齿)
首先抗锯齿是什么? 举个最简单的例子 你用windows画图软件画一根直线(准确说这个叫做线段),当水平或者垂直的时候,如下图,这是绝对完美的 但是当线段出现倾斜时,就无法做到完美了此时就会出现锯齿 ...
- Luogu P2764 最小路径覆盖问题(二分图匹配)
P2764 最小路径覆盖问题 题面 题目描述 «问题描述: 给定有向图 \(G=(V,E)\) .设 \(P\) 是 \(G\) 的一个简单路(顶点不相交)的集合.如果 \(V\) 中每个顶点恰好在 ...
- 【python之路40】Python 作用域
python的作用域与javaScript是一样的,参考:http://www.cnblogs.com/sunshuhai/p/9112578.html 一.python是以函数作为作用域的 if 1 ...
- vue/npm 错误提示&解决
1,下图的报错为没有系统权限 解决: P.S. 用管理打开后的命令行默认是window/system32,从system32退回到桌面的路径如下图 2, vuex 报错 “unknown mutati ...
- 沙雕去死吧! 劳资终于弄好了toimcat9 apt和ssl配置
搜一下吧,要不就是不用apr模式,也不用nio模式,直接用bio模式跑的,麻烦问一下,您们都是傻屌吗? APR模式必须要用!!!!! 然后全他妈的用jks证书,然后再提取公钥*.cer,然后再转换为* ...
- 使用junit单元测试,报Cannot instantiate test(s): java.lang.SecurityException: Prohibited package name: java.com.com.test
在测试类中不能一级包名不能以java开头, 将包改为com.com.test就好了.
- 007-使用python统计代码行数,空行以及注释
# 自己写过的程序,统计一下你写过多少行代码.包括空行和注释,但是要分别列出来 1.打开文件方法 1.1 以读文件的模式打开一个文件对象,使用Python内置的open()函数,传入文件名和标示符 f ...
- 2019.9.27 csp-s模拟测试53 反思总结
这个起名方式居然还有后续?! 为什么起名不是连续的?! T1想了半天,搞出来了,结果数组开小[其实是没注意范围].T2概率期望直接跳,后来翻回来写发现自己整个理解错了期望的含义[何].T3错误想到赛道 ...