<script type="text/javascript">
var li_num;
var total_li;
var current = 0;
var dots;
$(document).ready(function () {
$('.buttonfix').hover(
function () {
$('.buttonfix').css('background-position', 'top left');
},
function () {
$('.buttonfix').css('background-position', 'bottom left');
}
);
total_li = $('.mediawindow div.item').size() - 1;
dots = draw_dots($('.media'), $('.mediawindow div.item'));
update_dots(dots, current);
ArrowHide(current);
$('a.media_left, a.media_right').click(function () {
if ($(this).html() == 'right') {
//alert('left');
current++;
if (current >= total_li) {
current = total_li;
}
} else {
//alert('right');
current--;
if (current < 0) {
current = 0;
}
}
//alert(current);
item_goto = $('.mediawindow div.item:eq(' + current + ')');
window_slide($('.mediawindow'));
update_dots(dots, current);
ArrowHide(current);
return false;
});
$('ul.dots li').click(function () {
current = $(this).html() - 1;
item_goto = $('.mediawindow div.item:eq(' + current + ')');
window_slide($('.mediawindow'));
update_dots(dots, current);
ArrowHide(current);
return false;
});
});
function ArrowHide(current) {
$('.mediapanel a.media_right').css('display', 'block');
$('.mediapanel a.media_left').css('display', 'block');
if (current == total_li) {
$('.mediapanel a.media_right').css('display', 'none');
}
if (current == 0) {
$('.mediapanel a.media_left').css('display', 'none');
}
}
function window_slide(window) {
window.stop().scrollTo(item_goto, 600, { easing: 'easeInOutQuad' });
}
function draw_dots(container, items) {
var out = "";
var i = 1;
out += '<ul class="dots">';
items.each(function () {
out += "<li>" + i + "</li>";
i++;
});
out += '</ul>';
container.append(out);
return container.find('ul.dots');
}
function update_dots(dots, currentposition) {
dots.find('li').css({ backgroundPosition: 'left bottom' });
dots.find('li:eq(' + currentposition + ')').css({ backgroundPosition: 'left top' });
}
</script>
你可以添加一个函数块,在除了点击之外,实现自动轮播 $(document).ready(function () {
//这里就可以添加一个循环的函数,比如
setinterval(function(){//这里可以相关代码}, time)
);
题主可以参考这个思路
可以研究下,不会写也没事,可以网上找到各种案例
用计时器执行你的轮换代码。
var lis = $('ul.dots li'),liLength=lis.length;
lis.click(function () {
current = $(this).html() - 1;
item_goto = $('.mediawindow div.item:eq(' + current + ')');
window_slide($('.mediawindow'));
update_dots(dots, current);
ArrowHide(current);
return false;
});
setInterval(function () {
current++;
if (current >= liLength) current = 0; //重头开始
lis.eq(current).trigger('click');//触发点击事件进行切换
}, 6000); //6s换一次,要改其他事件修改这个参数
这种东西为什么要自己写呢? 网上一抓一大把
$(function(){
PicEve();
})
var i,sum,text;
function PicEve(){
var $pic_li = $("#pic li");
var $btn = $("#btn");
sum = $pic_li.length;
text="";
for( b=0; b text += ""
}
$btn.html(text)
$btn.find("a").each(function(b,n){
$(n).attr("index",b)
$(n).html(b+1)
})
$btn.find("a").eq(0).addClass("cur");
var Play = setInterval(PlayEve, 2000);
$btn.find("a").click(function(){
$(this).attr("name",1)
i=parseInt($(this).attr("index"));
c=parseInt($("#btn a[class='cur']").attr("index"));
if( i!=c ){
$btn.find("a").removeClass("cur");
$(this).addClass("cur");
}
clearInterval(Play);
})
$btn.find("a").mouseout(function(){
b=parseInt($(this).attr("name"));
i=parseInt($(this).attr("index"));
c=parseInt($("#btn a[class='cur']").attr("index"));
if( i==c && b==1 ){
Play = setInterval(PlayEve, 2000);
$(this).attr("name",0)
}
})
}
function PlayEve(){
var $pic_li = $("#pic li");
var $btn = $("#btn");
i=parseInt($("#btn a[class='cur']").attr("index"))
sum = $pic_li.length;
if( i < sum - 1){
$btn.find("a").eq(i).removeClass("cur");
$btn.find("a").eq(i+1).addClass("cur");
i++
}else if(i==sum-1){
$btn.find("a").eq(sum-1).removeClass("cur");
$btn.find("a").eq(0).addClass("cur");
i=0
}
}