轮播图片

来源：互联网发布：哈扎尔辞典知乎编辑：程序博客网时间：2024/06/08 05:13

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://"
           + request.getServerName() + ":" + request.getServerPort()
           + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播 jq(左右切换)</title>
<style type="text/css">
ul,li {
   list-style: none;
}

#wrapper {
   position: relative;
   margin: 0px auto;
   width: 1100px;
   height: 400px;
}
#banner {
   position: relative;
   width: 1100px;
   height: 400px;
   overflow: hidden;
}
.imgList {
   position: relative;
   width: 5500px;
   height: 400px;
   z-index: 10;
   overflow: hidden;
}
.imgList li {
   float: left;
   display: inline;
}
#prev,#next {
   position: absolute;
   top: 80px;
   z-index: 20;
   cursor: pointer;
   opacity: 0.2;
   filter: alpha(opacity = 20);
}
#prev {
   left: 10px;
}
#next {
   right: 10px;
}
#prev:hover,#next:hover {
   opacity: 0.5;
   filter: alpha(opacity = 50);
}
.infoList {
   position: absolute;
   left: 10px;
   bottom: 10px;
   z-index: 30;
}
.infoList li {
   display: none;
}
.indexList {
   position: absolute;
   right: 10px;
   bottom: 5px;
   z-index: 30;
}
.indexList li {
   float: left;
   margin-right: 5px;
   padding: 2px 4px;
   border: 2px solid black;
   background: grey;
   cursor: pointer;
}
.indexList .indexOn {
   background: red;
   font-weight: bold;
   color: white;
}
</style>
</head>
<body>
   <div id="wrapper">
       
       <div id="banner">
           
           <ul class="imgList">
               
               <li><img src="temp/images/b1.png" alt=""></li>
               <li><img src="temp/images/b3.png" alt=""></li>
               <li><img src="temp/images/b4.png" alt=""></li>
               <li><img src="temp/images/b2.png" alt=""></li>
               <li><img src="temp/images/b5.png" alt=""></li>
           </ul>
           <img src="temp/images/icon-prev.png" id="prev">
           <img src="temp/images/icon-next.png" id="next">
           <ul class="indexList">
               
               <li class="indexOn">1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
           </ul>
       </div>
   </div>
   <script type="text/javascript" src="temp/js/jquery-1.11.0.min.js"></script>
   <script type="text/javascript">
       var curIndex = 0, //当前index
       imgLen = $(".imgList li").length; //图片总数
       // 定时器自动变换2.5秒每次
       var autoChange = setInterval(function() {
           if (curIndex < imgLen - 1) {
               curIndex++;
           } else {
               curIndex = 0;
           }
           //调用变换处理函数
           changeTo(curIndex);
       }, 2000);
       //左箭头滑入滑出事件处理
       $("#prev").hover(function() {
           //滑入清除定时器
           clearInterval(autoChange);
       }, function() {
           //滑出则重置定时器
           autoChangeAgain();
       });
       //左箭头点击处理
       $("#prev").click(function() {
           //根据curIndex进行上一个图片处理
           curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
           changeTo(curIndex);
       });
       //右箭头滑入滑出事件处理
       $("#next").hover(function() {
           //滑入清除定时器
           clearInterval(autoChange);
       }, function() {
           //滑出则重置定时器
           autoChangeAgain();
       });
       //右箭头点击处理
       $("#next").click(function() {
           curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
           changeTo(curIndex);
       });
       //对右下角按钮index进行事件绑定处理等
       $(".indexList").find("li").each(function(item) {
           $(this).hover(function() {
               clearInterval(autoChange);
               changeTo(item);
               curIndex = item;
           }, function() {
               autoChangeAgain();
           });
       });
       //清除定时器时候的重置定时器--封装
       function autoChangeAgain() {
           autoChange = setInterval(function() {
               if (curIndex < imgLen - 1) {
                   curIndex++;
               } else {
                   curIndex = 0;
               }
               //调用变换处理函数
               changeTo(curIndex);
           }, 2500);
       }
       function changeTo(num) {
           var goLeft = num * 1100;
           $(".imgList").animate({
               left : "-" + goLeft + "px"
           }, 1000);
           $(".infoList").find("li").removeClass("infoOn").eq(num).addClass(
                   "infoOn");
           $(".indexList").find("li").removeClass("indexOn").eq(num).addClass(
                   "indexOn");
       }
   </script>
</body>
</html>

阅读全文

0 0