實現圖片的輪播效果
阿新 • • 發佈：2018-10-09
parse ice mov ppi oos image black new app 實現圖片的輪播效果
1.顯示頁面：index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ var index = 0 ; var imglength = ${list.size()}; //返回數組長度 $(".imgindex").eq(index).css("background","green"); //初始化第一張圖片的背景 $.each($(".pic"),function(i,n){ $(n).css("left",400*i+"px"); }) setInterval(function(){ $.each($(".pic"),function(i,n){ $(n).animate({"left":parseInt($(n).css("left"))-400+"px"},1000,function(){ //當動畫執行完成後執行的功能 if(i==0){ var $newimg = $(n).clone(); $(n).remove(); $newimg.css("left","800px"); $("#imgDiv").append($newimg); } }); }) index++; if(index>imglength-1){ index=0; } $(".imgindex").css("background","red"); //初始化所有圖片的默認背景 $(".imgindex").eq(index).css("background","green"); //改變指定圖片index的背景色 },1500); }) </script> </head> <body> <div id="imgDiv" style="width:400px; height:200px;border:1px solid black; margin-left:100px; position:absolute;overflow:hidden;"> <c:forEach items="${list}" var="pic"> <img class="pic" src="${pic.path }" width="400" height="200" style="position:absolute;left:0px; top:0px;"/> </c:forEach> </div> <div style=" position:absolute;top:180px;left:300px;"> <c:forEach begin="1" end="${list.size() }" var="step"> <%-- <span class="imgindex" style="background-color:red;">${step }</span> --%> <span class="imgindex" style="background-color:red;"><img src="images/dot.png"></img></span> </c:forEach> </div> </body> </html>
2.後臺返回邏輯:
@Controller
public class PicController {
@Resource
private PicService picServiceImpl;
@RequestMapping("/")
public String welcome(Model model){
model.addAttribute("list",picServiceImpl.show());
return "/index.jsp";
}
}實現圖片的輪播效果