javascriptでサムネイルを押すと大きな写真が変わるスライドショーを作っています。
現在、サムネイルをクリックするとサムネイル(押下したリンク部分)周りに点線が出てしまいますが、点線が出ないようにしたいです。
どのように修正すれば出なくなるでしょうか。教えて頂けますと幸いです。
javascript
1<script type="text/javascript"> 2$(function(){ 3 $('#viewer div img').each(function(i){ 4 $(this).css({opacity:'0'}).attr('id','view' + (i + 1).toString()); 5 $('#viewer div img:first').css({opacity:'1',zIndex:'99'}); 6 }); 7 8 $('#viewer ul li').click(function(){ 9 var connectCont = $('#viewer ul li').index(this); 10 var showCont = connectCont+1; 11 12 $('#viewer div img#view' + (showCont)).siblings().stop().animate({opacity:'0'},1000); 13 $('#viewer div img#view' + (showCont)).stop().animate({opacity:'1'},1000); 14 15 $(this).addClass('active'); 16 $(this).siblings().removeClass('active'); 17 }); 18 19 $('#viewer ul li:not(.active)').hover(function(){ 20 $(this).stop().animate({opacity:'1'},200); 21 },function(){ 22 $(this).stop().animate({opacity:'0.5'},200); 23 }); 24 25 $('#viewer ul li').css({opacity:'0.5'}); 26 $('#viewer ul li:first').addClass('active'); 27}); 28</script>
HTML
1<div id="container"> 2<div id="viewer"> 3<ul> 4<li><a href="javascript:void(0);"><img src="../../img/sum1.png" width="160" alt="" /></a></li> 5<li><a href="javascript:void(0);"><img src="../../img/sum2.png" width="160" alt="" /></a></li> 6<li><a href="javascript:void(0);"><img src="../../img/sum3.png" width="160" alt="" /></a></li> 7</ul> 8 9<div> 10<img src="../../img/slid1.png" width="960" alt="" /> 11<img src="../../img/slid2.png" width="960" alt="" /> 12<img src="../../img/slid3.png" width="960" alt="" /> 13</div>
回答3件
あなたの回答
tips
プレビュー