实现轮播效果的方法

html界面

 
 
 死兆星礼包
 死兆星皮肤上架
 LSPL11日赛程
 周边上架
 五折促销

css代码

#content6 {
 float: left;
 background: url(img/主页图片/adv_01.jpg);
 width: 533px;
 height: 280px;
 }
 /*.span3 li{clear: both;}*/
 
 .content6-1 {
 width: 533px;
 height: 40px;
 background: #353535;
 position: relative;
 top: 240px;
 /*left: -20px;*/
 }

静态网页效果图

jQuery实现

实现定时器效果

function a() {
//alert(j);
 
 if(j > 4) {
 j = 0;
 }
// alert(j);
 $("#content6").css("background","url(img/主页图片/adv_0" + (j+1) + ".jpg)");//轮播广告，替换当前广告
 t = setTimeout(a, 1000);//定时器
 $(".content6-1 ul li").each(function(i,e){ //遍历每一个并获取下标
 if(i==j)
 {
 $(e).css("background","#D52D02");//改变当前选中项的背景颜色
 }
 else
 {
 $(e).css("background","#353535");
 }
 })
 
 
 
 j++;
 }
 a();//在开始加载时调用代码

实现悬浮效果

$(".content6-1 ul li").mouseenter(function(){
 j=$(this).index();
 
 $("#content6").css("background","url(img/主页图片/adv_0" + (j+1)+ ".jpg)");
 $(this).css("background","#D52D02")
 .siblings().css("background","#353535"); 
 clearTimeout(t);//定时器停止在当前选中的项
// alert(j);
 })

实现移开效果

$(".content6-1 ul li").mouseleave(function(){
 j++; 
 setTimeout(a, 1000); 
 })

JS脚本实现

实现定时器效果

 var menus = document.querySelectorAll(".content6-1 ul li");
 function a() {
 j++;
 if(j > 5) {
 j = 1;
 } // alert(i); 
 // $("#content6").css({ "background": "url(img/主页图片/adv_0" + j + ".jpg)" });
 document.querySelector("#content6").style.background = "url(img/主页图片/adv_0" + j + ".jpg)"; for(var i = 0; i < menus.length; i++) {
 menus[i].onmouseenter = enter;
 menus[i].onmouseleave = leave;
 }
 for(var i = 0; i < menus.length; i++) {
 if(i + 1 == j) {

 menus[i].style.background = "#D52D02";
 } else {
 menus[i].style.background = "#353535";
 }
 }
 t = setTimeout(a, 1000);
 }
 a();

悬浮效果

function enter() {
 for(var i = 0; i < menus.length; i++) {

 if(this == menus[i]) {
 j = i + 1;
 menus[i].style.background = '#D52D02'; document.querySelector("#content6").style.background = "url(img/主页图片/adv_0" + j + ".jpg)";
 } else {
 menus[i].style.background = '#353535'; }

 }
 clearTimeout(t);
 }

移开效果

function leave() {
 j--;
 a();
 }

效果图