<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="imgLeft">
<div class="area">
<div id="js" class="js" style="width: 599px;height:358px;border: 1px solid red;position: relative;overflow:hidden">
<div class="box01" id="box01" style="position:absolute;">
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var data =[
{name:"全国市场监管工作会议在京召开",img:"151.jpg"},
{name:"中共市场监管总局直属机关第一次代表大会隆重召开",img:"152.jpg"},
{name:"张茅率团访问阿富汗、老挝和蒙古国",img:"153.jpg"},
{name:"总局党组理论学习中心组(扩大)学习《电子商务法》",img:"154.jpg"},
{name:"张茅率团访问阿富汗、老挝和蒙古国",img:"153.jpg"},
]
var str="";
var sspan=`<div style="position: absolute;right:0px;bottom: 0px;background: red;">`;
for(var i=0;i<data.length;i++){
str+=`<div class="imgnew"><div class="imgtext01"><div class="imgtext0101"><a href="" target="_blank">${data[i].name}</a></div></div><a href="" target="_blank"><img src=${data[i].img} ></a><br></div>`
if(i==0){
sspan+=`<span class="sss" style="margin-left:5px;width:50px;height:40PX;border:1px solid red;background:#fff;">${i+1}</span>`
}else{
sspan+=`<span class="sss" style="margin-left:5px;width:50px;height:40PX;border:1px solid red;">${i+1}</span>`
}
}
sspan+=`</div>`
$("#box01").html(str);
$("#js").append(sspan);
$("#js").append("<div id='left' style='width:50px;height:50px;background:black;color:#fff;position: absolute;top: 49%;left:0px;'><</div>");
$("#js").append("<div id='right' style='width:50px;height:50px;background:black;color:#fff;position: absolute;top: 49%;right:0px;'>></div>");
function changeTo(num){
$(".imgnew").eq(num).fadeIn().siblings().fadeOut();
console.info(num);
$(".sss").eq(num).css('background', '#FFF').siblings().css('background', 'red');
}
var index=0;
var autoChange ;
showTime();
function showTime(){
autoChange = setInterval(function () {
if(index<4){
index++
}else {
index=0
}
changeTo(index)
},2000);
}
$(".sss").each(function(){
$(this).mouseover(function(){
index=$(this).index();
clearInterval(autoChange);
changeTo(index);
});
$(this).mouseout(function(){
showTime();
});
})
$("#left").click(function(){
clearInterval(autoChange);
if(index == 0){
index = 5;//注意此时i的值
}
index--;
changeTo(index);
showTime();
})
$("#right").click(function(){
clearInterval(autoChange);
if(index == 4){
index = -1;//注意此时i的值
}
index++;
changeTo(index);
showTime();
})
</script>
</html>
jq轮播 fadeIn fadeout(画面巨丑,主要看js)
猜你喜欢
转载自blog.csdn.net/sugang666/article/details/85392495
今日推荐
周排行