JavaScript实现图片轮播效果

最新推荐文章于 2023-03-05 10:42:31 发布

小蝌蚪找玛玛

最新推荐文章于 2023-03-05 10:42:31 发布

阅读量493

点赞数

分类专栏： JavaScript学习笔记

本文链接：https://blog.csdn.net/weixin_44679832/article/details/96786913

版权

图片轮播效果图如下：

具有以下功能：1.自动播放图片（鼠标进入显示区时停止播放） 2.点击小圆形按钮可以切换图片

autoplay.jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>首页轮播图</title>
    <%--导入轮播图css和js脚本 --%>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/client/css/autoplay.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/client/js/autoplay.js"></script>
  </head>
  
  <body>
    <!-- 轮播图 start -->
    <div id="box_autoplay">
    	<div class="list">
    	    <ul>
                <li><img src="${pageContext.request.contextPath }/client/ad/index_ad1.jpg" width&#

最低0.47元/天解锁文章

小蝌蚪找玛玛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript实现图片轮播效果

图片轮播效果图如下：具有以下功能：1.自动播放图片（鼠标进入显示区时停止播放） 2.点击小圆形按钮可以切换图片autoplay.jsp代码如下：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
复制链接

扫一扫