jQuery ul li实现动态广告_用ul li做广告跳转-CSDN博客

本文链接：https://blog.csdn.net/wendll/article/details/27078507

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Slide Test</title>
<style type="text/css">
   ul,li{
       list-style:none;
   }

   *{
       padding:0;
       margin:0;
   }
   .ad{
       height: 150px;
       width: 586px;
        margin-bottom: 10px;
        overflow: hidden;
        position: relative;

   }

   .ad .slider,.ad .triggers{
       position:absolute;
   }
   .slider li{
       display:inline;
       float: left;
   }

   .slider li img{
       display:block;
       height: 150px;
       width: 586px;
   }

   .triggers{
       bottom:10px;
       right:10px;
   }
   .triggers li{
       background-color: #FFFFFF;
        border: 1px solid #FF7300;
        color: #FF7300;
        cursor: pointer;
        float: left;
        font-family: Arial;
        font-size: 12px;
        height: 16px;
        line-height: 16px;
        margin: 3px 1px;
        overflow: hidden;
        text-align: center;
        width: 16px;
   }
   .triggers .on{
       background-color: #FF7300;
        border: 0 none;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: bold;
        height: 21px;
        line-height: 21px;
        margin: 0 1px;
        width: 21px;
   }

</style>

<script type="text/javascript">
   $(document).ready(function(){

       var len = $(".slider li").length;
       var index=0;
       var adTimer;

       $(".slider li").mouseover(function(){
           index = $(".slider li").index(this);
           showImage(index);
       }).eq(0).mouseover();

       $(".slider").hover(function(){
           clearInterval(adTimer);
       },function(){
           adTimer = setInterval(function(){
               showImage(index);
               index++;
               if(index==len){
                   index = 0;
               }
           },3000);

       }).trigger("mouseleave");

       $(".triggers li").click(function(){
           var liindex = $(".triggers li").index(this);
           if(liindex != index){
               showImage(liindex);
               index = liindex;
           }
       });

   });

   function showImage(index){
       var adHeight = $(".ad").height();
       $(".slider").stop(true,false).animate({top:-adHeight*index},1000);

       //var adWidth = $(".ad").width();
       //$(".slider").stop(true,false).animate({left:-adWidth*index},1000);
       $(".triggers li").removeClass("on").eq(index).addClass("on");
   }
</script>
</head>
<body>
   <div class="ad">
       <ul class="slider">
           <li>
               <a> <img src="img/1.gif"/></a>
           </li>
           <li>
               <a> <img src="img/2.gif"/></a>
           </li>
           <li>
               <a> <img src="img/3.gif"/></a>
           </li>
           <li>
               <a> <img src="img/4.gif"/></a>
           </li>
           <li>
               <a> <img src="img/5.gif"/></a>
           </li>
       </ul>

       <ul class="triggers">
           <li class="on">1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
       </ul>
   </div>
</body>
</html>