$(function () {
$("#simg1").addClass('imghover');
$("#simg1").mouseenter(function () {
$(this).addClass('imghover');
$("#simg2").removeClass('imghover');
$("#simg3").removeClass('imghover');
$("#bimg").attr("src", $("#simg1").attr("src"));
});
$("#simg2").mouseenter(function () {
$("#simg2").addClass('imghover');
$("#simg1").removeClass('imghover');
$("#simg3").removeClass('imghover');
$("#bimg").attr("src", $("#simg2").attr("src"));
});
$("#simg3").mouseenter(function () {
$("#simg3").addClass('imghover');
$("#simg2").removeClass('imghover');
$("#simg1").removeClass('imghover');
$("#bimg").attr("src", $("#simg3").attr("src"));
});
});
有3张小图片id为simg1,simg2,simg3
一张大图片,id为bimg
要求鼠标指着小图片,显示相应的大图片。
样式是这样的
<ul>
<li>simg1</li>
<li>simg2</li>
<li>simg3</li>
</ul>
<ul>
<li>bimg<li>
</ul>
这个效果是实现了,但是这代码太坑爹了
请大神们帮我优化一下。(不修改样式)jQuery图片新手问题
$("#simg1").addClass('imghover');
$("#simg1").mouseenter(function () {
$(this).addClass('imghover');
$("#simg2").removeClass('imghover');
$("#simg3").removeClass('imghover');
$("#bimg").attr("src", $("#simg1").attr("src"));
});
$("#simg2").mouseenter(function () {
$("#simg2").addClass('imghover');
$("#simg1").removeClass('imghover');
$("#simg3").removeClass('imghover');
$("#bimg").attr("src", $("#simg2").attr("src"));
});
$("#simg3").mouseenter(function () {
$("#simg3").addClass('imghover');
$("#simg2").removeClass('imghover');
$("#simg1").removeClass('imghover');
$("#bimg").attr("src", $("#simg3").attr("src"));
});
});
有3张小图片id为simg1,simg2,simg3
一张大图片,id为bimg
要求鼠标指着小图片,显示相应的大图片。
样式是这样的
<ul>
<li>simg1</li>
<li>simg2</li>
<li>simg3</li>
</ul>
<ul>
<li>bimg<li>
</ul>
这个效果是实现了,但是这代码太坑爹了
请大神们帮我优化一下。(不修改样式)jQuery图片新手问题
<script type="text/javascript">
$(function () {
$("li:eq(0)").addClass('imghover');
$("ul li").mouseenter(function (){
$("li").removeClass('imghover');
$(this).addClass('imghover');
$("ul:eq(1) li:eq(0)").attr("src", $(this).attr("src"));
});
})
</script>
<ul>
<li>simg1</li>
<li>simg2</li>
<li>simg3</li>
</ul>
<ul>
<li>bimg<li>
</ul>
<script type="text/javascript">
$(function () {
$("li:eq(0)").addClass('imghover');
$("ul li").mouseenter(function (){
$("li").removeClass('imghover');
$(this).addClass('imghover');
$("ul:eq(1) li:eq(0) img").attr("src", $(this).attr("src"));
});
})
</script>
<ul>
<li>simg1</li>
<li>simg2</li>
<li>simg3</li>
</ul>
<ul>
<li>bimg<li>
</ul>