yii2 轮播 样式: <style type="text/css"> *{margin:0;padding:0} body{margin:50px} li{list-style:none; float:left;} .div1{ overflow:hidden; 204px; height:204px; border:2px solid red; position:relative; } .div1 ul{ 1000px; position:absolute; left:0; top:0; } .div1 ol{ position:absolute; bottom:-5px; left:50px; background:#ffffff; } .div1 ol li{ height:30px; line-height:30px; padding:0 6px; border:2px solid #000000; cursor: pointer; } .wrap p{ position:absolute; bottom:0; left:10px; background:#00ff00; opacity:50%;//不透明度 } .current{ background:#ff0033; color:#33ff99; } </style> 代码: <div class="div1"> <div class='img'> <ul> <li><img src="images/1.jpg" alt="逗比1" /></li> <li><img src="images/2.jpg" alt="逗比2" /></li> <li><img src="images/3.jpg" alt="逗比3" /></li> <li><img src="images/4.jpg" alt="逗比4" /></li> <li><img src="images/5.jpg" alt="逗比5" /></li> </ul> </div> <ol> <li class='current'>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <p class="p">逗比1</p> </div> <script src="jQueryvalidate/jquery.js"></script> jQuery代码: <script> $(function(){ //获取对象 var puli = $('.div1 ul li');//图片 li var pul = $('.div1 ul');//图片 ul var poli = $('.div1 ol li');// 数字 li //定义一个计数器 var n = 0; //点击数字 poli.hover(function(){ clearInterval(timer); var _this = $(this); timeout = setTimeout(function(){ //鼠标放到数字上面延迟显示 var index = $(_this).index();//获取索引 //0 1 2 3 4 $(_this).addClass('current').siblings().removeClass();//点击谁,谁改变颜色 $('.p').html($('img').eq(index).attr('alt'));//获取对应的alt内容,显示p标签中 //点击动画 $(pul).animate({ 'left':'-'+index*200+'px' },200); n = index; },300); },function(){ clearTimeout(timeout); timer = setInterval(slider,2000); var index = $(this).index(); n = index; }); //动画轮播 function slider(){ //判断计数器,等于4就从0开始 if(n==4){ n=0; }else{ n++; } $('.p').html($('img').eq(n).attr('alt'));//获取对应的alt内容,显示p标签中 poli.eq(n).addClass('current').siblings().removeClass();//改变对应数字的颜色 //图片的动画 pul.animate({ 'left':'-'+n*200+'px' },200); } //定义计时器,执行动画轮播函数 var timer = setInterval(slider,2000); //鼠标悬浮 $('.img').hover(function(){ //鼠标放上去停止,清除计时器 clearInterval(timer); },function(){ //重新定义计时器 timer = setInterval(slider,2000); }); }); </script>