爱站程序员基地效果图如下：
可以随定时器自动滚动 或者鼠标经过下面的五个超链接（hover）滚动
没找到左右滚动效果 只找到上下（slideDown）最后用了淡出淡入
先上代码
js代码 大体是第this_index个隐藏 第index个显示
定时滚动时index=this_index++；
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" /><title>王者荣耀轮播图</title><script type=\"text/javascript\" src=\"Jq.js\"></script><script type=\"text/javascript\">/*轮播图效果*/var this_index=0;var index;$(function(){$(\'#ul_0 li\').hide();$(\'#ul_1 li\').hover(function(){index =$(this).index();if(index==this_index)return 0;$(\'#ul_0 li\').find(\'image\').eq(this_index).hide();$(\'#ul_0 li\').find(\'image\').eq(this_index).stop().fadeOut(200,function(){$(\'#ul_0 li\').eq(index).show();$(\'#ul_0 li\').find(\'image\').eq(index).stop().fadeIn(200);});console.log(index+\'_\'+this_index);this_index =index;});var Inter_Id =setInterval(function(){console.log(\'giao\');index =this_index+1;if(index==5)index=0;if(index==this_index)return 0;$(\'#ul_0 li\').find(\'image\').eq(this_index).hide();$(\'#ul_0 li\').find(\'image\').eq(this_index).stop().fadeOut(200,function(){$(\'#ul_0 li\').eq(index).show();$(\'#ul_0 li\').find(\'image\').eq(index).stop().fadeIn(200);});console.log(index+\'_\'+this_index);this_index =index;},2200);})</script><style type=\"text/css\">*{margin: 0;padding: 0;}#div_0{width:400px;height:232px;background-color:black;margin:10% auto ;}#div_0 ul{width: 100%;}li{list-style: none;}img{width:100%;height:79%;}#ul_1{width:100%;height:29px;}#ul_1 ul{width:100%;height:100%;}#ul_1 li{height:29px;width:19%;list-style: none;display: inline-block;color: black;text-align: center;}#ul_1 li:hover{background-color: darkgrey;}#ul_1 a{text-decoration: none;font-size:9px;}#ul_1 a:hover{color:coral;}.ndisplay{}</style></head><body><div id=\'div_0\'><div><!--图片栏--><ul id=\'ul_0\'><li class=\'ndisplay\'><a href=\"#\"><img src=\"img/1.png\" alt=\"\" /></a></li></ul><ul id=\'ul_0\'><li class=\'display\'><a href=\"#\"><img src=\"img/3.png\" alt=\"\" /></a></li></ul><ul id=\'ul_0\'><li class=\'ndisplay\'><a href=\"#\"><img src=\"img/4.png\" alt=\"\" /></a></li></ul><ul id=\'ul_0\'><li class=\'ndisplay\'><a href=\"#\"><img src=\"img/2.png\" alt=\"\" /></a></li></ul><ul id=\'ul_0\'><li class=\'ndisplay\'><a href=\"#\"><img src=\"img/5.png\" alt=\"\" /></a></li></ul></div><div><!--按键栏--><ul id=\'ul_1\'><li><a href=\"#\">时之恋人皮肤故事</a></li><li><a href=\"#\">最后门票谁能晋级</a></li><li><a href=\"#\"> CP组队撒狗粮</a></li><li><a href=\"#\">老亚瑟答疑</a></li><li><a href=\"#\">斗鱼碰碰车活动</a></li></ul></div></div></body></html>
