yii2 轮播
样式:
<style type="text/css">
*{margin:0;padding:0}
body{margin:50px}
li{list-style:none; float:left;}
.div1{
overflow:hidden;
width:204px;
height:204px;
border:2px solid red;
position:relative;
}
.div1 ul{
width: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>
