需要加入jquery 1.43及以上版本
下面还有个简单版，一个页面只支持一个轮播
同页面多轮播js
<div>
<div class="yt_content">
<ul class="ml_content_main ml_content_main_word ms__div">
<div class="cb"></div>
</ul>
<ul class="ml_content_main ml_content_main_word ms__div" style="display: none;">
<div class="cb"></div>
</ul>
</div>
<a href="javascript:void(0);" class="yt_left" onclick="_ms_active_continue('index','-')" id="yjq_prev">上一页</a>
<a href="javascript:void(0);" class="yt_right" onclick="_ms_active_continue('index','+')" id="yjq_next">下一页</a>
</div> <div class="yl_main">
<ul class="ml_content_main ml_content_main_word ms__div2">
<li><a href="#">连接1</a></li>
</ul>
<ul class="ml_content_main ml_content_main_word ms__div2" style="display: none;">
<li><a href="#">连接1</a></li>
</ul>
<ul class="ml_content_main ml_content_main_word ms__div2" style="display: none;">
<li><a href="#">连接1</a></li>
</ul>
</div>
//执行动画
/*
indexName 轮播ID
className 分组的样式表名称，自定义的不是美工设计的，使用美工的样式名，如果他更新轮播就会失效
time 每次执行的间隔时间
prev_id 上一页按钮ID
next_id 下一页按钮ID
*/
function _ms_run(indexName,className,time,prev_id,next_id) {
if(!window["_ms_"+indexName]||parseInt(window["_ms_"+indexName])<0){//第一次当前显示序号没有值或小于0，则赋值0，
window["_ms_"+indexName]=0;
}
window["_ms_"+indexName] = ""+(parseInt(window["_ms_"+indexName])+1);
var div=$("."+className);//获取要管理的class组，其他可以自己弄
if (window["_ms_"+indexName] > div.length) {//判断如果超过最大序号则调整到第一个
window["_ms_"+indexName] = 1;
}
var index=window["_ms_"+indexName]; for (var i = 1; i <= div.length; i++) {
$(div[i-1]).hide();//隐藏所有容器
}
$(div[index-1]).show();//显示容器
if(index==1&&prev_id){//显示第一个时，隐藏上一页图片
$("#"+prev_id).hide();
}else if(index!=1&&prev_id){
$("#"+prev_id).show();
}
if(index==div.length&&next_id){//显示最后一个时，隐藏下一页图片
$("#"+next_id).hide();
}else if(index!=div.length&&next_id){
$("#"+next_id).show();
}
//执行下次动画
window["_ms_clear_"+indexName] = setTimeout(function () {
_ms_run(indexName,className,time,prev_id,next_id)
}, time);
}
//暂时清除动画效果
function _ms_stop(indexName) {
clearTimeout(window["_ms_clear_"+indexName]);
}
//继续执行动画效果
function _ms_active_continue(indexName,activeType) {
clearTimeout(window["_ms_clear_"+indexName]);
if (activeType) {
if(activeType=="+"){//下一页
//index = num;
}else if(activeType=="-"){//上一页
window["_ms_"+indexName] -= 2;
}
_ms_runset(indexName);
} else {
window["_ms_clear_"+indexName] = setTimeout(function () {
_ms_runset(indexName)
}, time);
}
}
//配置每个轮播属性
function _ms_runset(keyName){
/* _ms_run函数说明
indexName 轮播ID
className 分组的样式表名称,自定义的不是美工设计的，使用美工的样式名，如果他更新轮播就会失效
time 每次执行的间隔时间
prev_id 上一页按钮ID
next_id 下一页按钮ID
*/
switch(keyName){
case "index":
_ms_run('index', 'ms__div',30000,'yjq_prev','yjq_next');
break;
case "index2":
_ms_run('index2','ms__div2',10000,'','');
break;
case "index3":
_ms_run('index3','ms__div3',10000,'','');
break;
}
}
//第一次需要执行的轮播任务
setTimeout(function(){
_ms_runset('index','--');
_ms_runset('index2','--');
_ms_runset('index3','--');
},10000);
简单版，一个页面只能有一个
<div class="bd" onmouseover="stop()" onmouseleave="a_click()">
<div class="img" id="img_1"><a href="#" target="_blank"><img src="css/img/img.jpg" alt=""><span>图片标题呢</span></a></div>
<div class="img" id="img_2"><a href="#" target="_blank"><img src="css/img/img.jpg" alt=""><span>图片标题呢2</span></a></div>
<div class="img" id="img_3"><a href="#" target="_blank"><img src="css/img/img.jpg" alt=""><span>图片标题呢3</span></a></div>
<div class="numbar">
<a href="javascript:void(0)" id="img_a_1" onclick="a_click(1)">1</a>
<a href="javascript:void(0)" id="img_a_2" onclick="a_click(2)">2</a>
<a href="javascript:void(0)" id="img_a_3" onclick="a_click(3)">3</a>
</div>
</div>
<script type="text/javascript">
var index=0;
var _settimeout;
function run(){
for (var i = 1; i < 4; i++) {
$("#img_"+i).hide();
$("#img_a_"+i).removeClass("active");
}
index+=1;
if(index>3){
index=1;
}
$("#img_"+index).show();
$("#img_a_"+index).addClass("active");
_settimeout=setTimeout(function(){run()},3000);
}
function stop(){
clearTimeout(_settimeout);
}
function a_click(num){
if(num){
clearTimeout(_settimeout);
index=num-1;
run();
}else{
_settimeout=setTimeout(function(){run()},3000);
}
}
$(function(){
run();
})
</script>