jQuery综合应用设计实例——图片轮播特效的设计与实现

最新推荐文章于 2023-06-15 22:00:00 发布

美女吃了

最新推荐文章于 2023-06-15 22:00:00 发布

阅读量455

点赞数

分类专栏： jQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_52955054/article/details/124510168

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

功能要求：使用jQuery实现图片轮播特效，要求间隔固定的时间自动切换播放下一张图片。在图片的左、右两侧带有箭头标识的按钮，也可以手动单击按钮翻回上一张或下一张图片。

通过HTML文件和CSS文件实现。

图片文件层次结构为：

具体代码为：

jQuery图片轮播特效.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery图片轮播特效的设计与实现</title>
		<link rel="stylesheet" href="css/ppt.css">
        <script src="js/jquery-3.6.0.js"></script>
    </head>
    <body>
	    <!--标题-->
        <h3>jQuery图片轮播特效的设计与实现</h3>
		<!--水平线-->
        <hr>
		<!--图片轮播区域-->
        <div class="ppt-container">
            <ul>
                <li>
				    <img src="image/ppt/1.jpg" />
					<p>pink_flower</p>		
                </li>
                <li class="hide">
				    <img src="image/ppt/2.jpg" />
					<p>red_flower</p>
                </li>
                <li class="hide">
				    <img src="image/ppt/3.jpg" />
					<p>colorful_rose</p>
                </li>
				<li class="hide">
				    <img src="image/ppt/4.jpg" />
					<p>holding_fish</p>
				</li>
				<li class="hide">
				    <img src="image/ppt/5.jpg" />
					<p>pink_bicycle</p>
				</li>
				<li class="hide">
				    <img src="image/ppt/6.jpg" />
					<p>microphone</p>
				</li>
            </ul>
			<!--按钮1，用于切换上一张图片-->
            <button id="btn01" onclick="last()">
               <img src="image/ppt/left.png" width="100%" height="100%" />
            </button>
			<!--按钮2，用于切换下一张图片-->
			<button id="btn02" onclick="next()">
                <img src="image/ppt/right.png" width="100%" height="100%" />
            </button>
        </div>
		<script type="text/javascript">
		
		    //当前图片序号
          var index = 0;
		  //8秒后自动切换到下一张
		  $(document).ready(function(){
			  setInterval("next()",8000);
			});

            //切换下一张图片
			function next() {
				//当前图片淡出
				$("li:eq("+index+")").fadeOut(1500);
				//判断当前图片序号是否为最后一张
               if(index == 5)
				    //如果是最后一张，序号跳转到第一张
                   index = 0;
               else
				    //否则图片序号自增1
                   index++; 
				//新图片淡入
               $("li:eq("+index+")").fadeIn(1500);
			}
			//切换上一张图片
			function last() {
				//当前图片淡出
               $("li:eq("+index+")").fadeOut(1500);
				//判断当前图片序号是否为第一张
                if(index == 0)
				    //如果是第一张，序号跳转到最后
                    index = 5;
                else
                    //否则图片序号自减1
					index--;
				//新图片淡入
               $("li:eq("+index+")").fadeIn(1500);
            }
        </script>
	</body>
</html>

ppt.css

/*图片轮播区域样式设置*/
.ppt-container {
    width: 500px;
    height: 270px;
    margin: 20px;
    padding: 0px;
    position: relative;
}
/*隐藏效果设置*/
.hide {
    display: none;
}
/*图片样式设置*/
.ppt-container img {
    width: 100%;
    height: 100%;
}
/*按钮总体样式设置*/
button {
    position: absolute;
    margin: 10px;
    border: none;
    outline: none;
    background-color: transparent;
    width: 50px;
    height: 100px;
}
/*按钮1位置设置*/
#btn01 {
    top: 30%;
    left: 0%;
}
/*按钮2位置设置*/
#btn02 {
    top: 30%;
    left: 85%;
}
/*列表元素样式设置*/
ul {
    list-style: none;
    position: relative;
}
/*列表选项元素样式设置*/
li {
    position: absolute;
    top: 0px;
    left: 0px;
    float: left;
    text-align: center;
}
/*段落元素样式设置*/
p {
    position: absolute;
    top: 75%;
    left: 0%;
    width: 100%;
    background-color: rgba(255,255,255,0.8);
    padding: 10px;
    font-family: "微软雅黑 Light";
}