首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

求大神赐教 关于jq 不懂

2013-08-09 
求大神指教 关于jq不懂本帖最后由 w5951569 于 2013-08-05 11:59:37 编辑这个貌似是点击小图然后触发时间

求大神指教 关于jq 不懂
本帖最后由 w5951569 于 2013-08-05 11:59:37 编辑 这个貌似是点击小图然后触发时间 把上面大图img里的东西换掉  我想在大图那加链接  然后点击小图将这个链接也给改了  肿么办


<div class="zoompic">
<img src="{dede:global.cfg_templets_skin/}/images/pic/1.jpg" width="550" height="250" alt="求大神赐教 关于jq 不懂" /></div><!--大图 想在这里加<A>标签-->
<div class="sliderbox";style="background-image:url({dede:global.cfg_templets_skin/}/images/slide_scroller.png)">
<div id="btn-left" class="arrow-btn dasabled"></div>
<div class="slider" id="thumbnail" >
<ul>
<li class="current"><!--小图部分 title原来为空 想把title放置a要变化的链接  然后在jq中实现动态的变化-->
  <a href="{dede:global.cfg_templets_skin/}/images/pic/1.jpg" title="{dede:global.cfg_cmsurl/}/zhongjianlunbowenzhang/2013/0730/44.html" target="_blank"><img src="{dede:global.cfg_templets_skin/}/images/pic/1.jpg" width="80" height="40" alt="求大神赐教 关于jq 不懂" /></a></li>
<li><a href="{dede:global.cfg_templets_skin/}/images/pic/2.jpg" title="{dede:global.cfg_cmsurl/}/zhongjianlunbowenzhang/2013/0730/44.html" target="_blank"><img src="{dede:global.cfg_templets_skin/}/images/pic/2.jpg" width="80" height="40" alt="求大神赐教 关于jq 不懂" /></a></li>
<li><a href="{dede:global.cfg_templets_skin/}/images/pic/3.jpg" title="{dede:global.cfg_cmsurl/}/zhongjianlunbowenzhang/2013/0730/44.html" target="_blank"><img src="{dede:global.cfg_templets_skin/}/images/pic/3.jpg" width="80" height="40" alt="求大神赐教 关于jq 不懂" /></a></li>
<li><a href="{dede:global.cfg_templets_skin/}/images/pic/4.jpg" title="{dede:global.cfg_cmsurl/}/zhongjianlunbowenzhang/2013/0730/44.html" target="_blank"><img src="{dede:global.cfg_templets_skin/}/images/pic/4.jpg" width="80" height="40" alt="求大神赐教 关于jq 不懂" /></a></li>
<li><a href="{dede:global.cfg_templets_skin/}/images/pic/5.jpg" title="{dede:global.cfg_cmsurl/}/zhongjianlunbowenzhang/2013/0730/44.html" target="_blank"><img src="{dede:global.cfg_templets_skin/}/images/pic/5.jpg" width="80" height="40" alt="求大神赐教 关于jq 不懂" /></a></li>
<li><a href="{dede:global.cfg_templets_skin/}/images/pic/6.jpg" title="{dede:global.cfg_cmsurl/}/zhongjianlunbowenzhang/2013/0730/44.html" target="_blank"><img src="{dede:global.cfg_templets_skin/}/images/pic/6.jpg" width="80" height="40" alt="求大神赐教 关于jq 不懂" /></a></li>
<li><a href="{dede:global.cfg_templets_skin/}/images/pic/7.jpg" title="{dede:global.cfg_cmsurl/}/zhongjianlunbowenzhang/2013/0730/44.html" target="_blank"><img src="{dede:global.cfg_templets_skin/}/images/pic/7.jpg" width="80" height="40" alt="求大神赐教 关于jq 不懂" /></a></li>


</ul>
</div>
<div id="btn-right" class="arrow-btn"></div>
</div>
</div>

<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/assets/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
//点击小图切换大图
$("#thumbnail li a").click(function(){
$(".zoompic img").hide().attr({ "src": $(this).attr("href")});
$("#thumbnail li.current").removeClass("current");
$(this).parents("li").addClass("current");
return false;
});
$(".zoompic>img").load(function(){
$(".zoompic>img:hidden").show();
});

//小图片左右滚动
var $slider = $('.slider ul');
var $slider_child_l = $('.slider ul li').length;
var $slider_width = $('.slider ul li').width();
$slider.width($slider_child_l * $slider_width);

var slider_count = 0;

if ($slider_child_l < 5) {
$('#btn-right').css({cursor: 'auto'});
$('#btn-right').removeClass("dasabled");
}

$('#btn-right').click(function() {
if ($slider_child_l < 5 || slider_count >= $slider_child_l - 5) {
return false;
}

slider_count++;
$slider.animate({left: '-=' + $slider_width + 'px'}, 'fast');
slider_pic();
});

$('#btn-left').click(function() {
if (slider_count <= 0) {
return false;
}
slider_count--;
$slider.animate({left: '+=' + $slider_width + 'px'}, 'fast');
slider_pic();
});
function slider_pic() {
if (slider_count >= $slider_child_l - 5) {
$('#btn-right').css({cursor: 'auto'});
$('#btn-right').addClass("dasabled");
}
else if (slider_count > 0 && slider_count <= $slider_child_l - 5) {
$('#btn-left').css({cursor: 'pointer'});
$('#btn-left').removeClass("dasabled");
$('#btn-right').css({cursor: 'pointer'});
$('#btn-right').removeClass("dasabled");
}
else if (slider_count <= 0) {
$('#btn-left').css({cursor: 'auto'});
$('#btn-left').addClass("dasabled");
}
}

});
</script>

JavaScript

分享到:
[解决办法]


//点击小图切换大图
$("#thumbnail li a").click(function(){
//$(".zoompic img").hide().attr({ "src": $(this).attr("href")});
//<!--大图 想在这里加<A>标签-->
$(".zoompic img").hide().attr({ "src": $(this).attr("href")}).bind('click',function(){
window.location.href=$(this).attr('title');
});

$("#thumbnail li.current").removeClass("current");
$(this).parents("li").addClass("current");
return false;
});

热点排行