您的位置：首页 > Web前端 > JavaScript

图片切换效果，纯js

2016-02-16 15:00 489 查看
公司有个技术很牛x的“老腊肉”，我向他请教，他给了我个网址，上面蛮多效果的，于是乎~我决定照着效果看能不能自己敲出来，我要变大神X3，重要的事说3遍。

它完成的效果是这样的：



好吧，一步一步来，先把框架搭好

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
padding: 5em;
}
.frame{
margin:0 auto;
width: 968px;
}
.preview{
width: 786px;
height: 442px;
float: left;
}
.list{
float: right;
width: 173px;
}
.list ul{
margin:0;
padding:0;
list-style:none;
overflow: hidden;
}
.list ul li{
margin-bottom:9px;
cursor: pointer;
position: relative;
}
.list ul li>img{
display: block;
}
.list ul li:after{
background: rgba(0,0,0,.6);
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: background 0.2s linear;
}
.list ul li.active:after{
background: rgba(255,255,255,0);
box-sizing: border-box;
opacity: 1;
border:4px solid #fff;
transition: none;
}
.list ul li:hover:after{
background: rgba(255,255,255,0);
}
</style>
</head>
<body>
<div class="frame">
<div class="preview" id="preview">
<img src="wp_b0.jpg">
</div>
<div class="list" id="list">
<ul>
<li class="active">
<img src="wp_t0.jpg">
</li>
<li>
<img src="wp_t1.jpg">
</li>
<li>
<img src="wp_t2.jpg">
</li>
<li>
<img src="wp_t3.jpg">
</li>
</ul>
</div>
</div>
</body>
</html>


上面的代码仅仅完成了静态显示效果，鼠标移上去有个背景由暗变亮的过渡效果，但是还不能切换图片，接下来我们把这部分完成：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var links=document.getElementById("list").getElementsByTagName("li");
for(var i=0;i<links.length;i++){
links[i].onclick=function(){
var preview=document.getElementById("preview");
var previewImg=preview.getElementsByTagName("img")[0];
// var pre_src=previewImg.getAttribute("src");
// console.log(pre_src);
var links_src=this.getElementsByTagName("img")[0].getAttribute("src");
// console.log(links_src);
var t=links_src.substr(4,1);
// var b=pre_src.substr(4,1);
// console.log(b);    //b=0
// console.log(t);//t=3
var pre_src="wp_b"+t+".jpg";
// console.log(pre_src);
previewImg.setAttribute("src",pre_src);
}
}
}
</script>
</head>
<body>
</body>
</html>


为了方便查看，我把这部分功能以外的html代码和css样式部分全部删掉了。注释部分是方便测试用的。代码还是比较简单的，现在我们的图片可以切换了。

注意，此时还有最后一个功能，即鼠标点击右侧导航小图，所点导航增加一个“active”类，其他兄弟导航不允许存在此类。如果用jq写，很简单，

$(document).ready(function() {
$("div ul li").click(function(){
$(this).addClass("add").siblings().removeClass("add");
});
});
这样就可以，但这里我们用js写，则麻烦的多
之前的增改了一下


window.onload=function(){
var links=document.getElementById("list").getElementsByTagName("li");
for(var i=0;i<links.length;i++){
links[i].onclick=function(e){
var preview=document.getElementById("preview");
var previewImg=preview.getElementsByTagName("img")[0];
var links_src=this.getElementsByTagName("img")[0].getAttribute("src");
var t=links_src.substr(4,1);
var pre_src="wp_b"+t+".jpg";
previewImg.setAttribute("src",pre_src);
　　　　　　　　　　//下面是激活项
e=e||window.event;
var target=e.srcElement||e.target;
for(var i=0,len=links.length;i<len;i++){
links[i].className=target==links[i]?"active":"";
}
}
}
}


其中还用到了传参。参数e主要为了监听，获取鼠标的状态;

e = e || window.event是js在事件处理兼容IE和非IE的写法;

e.srcElement是为了下面获取触发事件的className属性。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航