Question

页面banner自动或手动不能切换图片

HTML:
<div class="banner-show-wrap">
<ul class="banner-imgs">

<li data-banid="1" style="display: list-item;">
<a style="background:url(images/2014122201.jpg) no-repeat center"></a>
</li>

<li data-banid="2" style="display: none;">
<a style="background:url(images/2014122208.jpg) no-repeat center"></a>
</li>

<li data-banid="3" style="display: none;">
<a style="background:url(images/2014122206.jpg) no-repeat center"></a>
</li>

</ul>
</div>

<div class="banner-out-wrap">
<div class="banner-in-wrap">

<div class="banner-icon-wrap fn-clear">
<div class="banner-icon cur" data-navid="1"></div>
<div class="banner-icon" data-navid="2"></div>
<div class="banner-icon" data-navid="3"></div>
</div>
</div>
</div>

JS:
$(document).ready(function() {
var timer = null;

var effect = "slide",
effect_t = 500,
effect_time = 1500,
num_images = 3;

function img_next(bool) {
if (bool) {
var num_hide = $('.banner-icon-wrap .cur').attr('data-navid');
var num_show = (num_hide % num_images) + 1;

// 小导航切换
$('.banner-icon-wrap .cur').removeClass("cur");
$("div[data-navid='" + num_show + "']").addClass("cur");

// 大图切换
$('li[data-banid]').hide(effect, effect_t);
$("li[data-banid='" + num_show + "']").show(effect, effect_t);
clearTimeout(timer);
timer = setTimeout(function() {
img_next(true);
}, effect_time);
}
}

img_next(true);

$('.banner-icon').mouseover(function(e) {
clearTimeout(timer);
if (!$(this).h...
$('.banner-icon').mouseover(function(e) {
clearTimeout(timer);
if (!$(this).hasClass('cur')) {
// 小导航切换
$('.banner-icon-wrap .cur').removeClass("cur");
$(this).addClass("cur");

// 切换到相应图片
var num_imgnow = $(this).attr('data-navid');
$('li[data-banid]').hide(effect, effect_t);
$("li[data-banid='" + num_imgnow + "']").show(effect,effect_t);
}
e.preventDefault();
});

$('.banner-icon').mouseout(function(e) {
timer = setTimeout(function() {
img_next(true);
}, effect_time);
});
});

Answer 1

给你个自动也可以手动的效果吧，具体的效果已经很好，也好修改，