jq轮播 fadeIn fadeout(画面巨丑，主要看js)

<!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)

猜你喜欢
