利用jQuery做的轮播图_animated fadeinright-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34633111/article/details/82912293

本文详细介绍了使用HTML、CSS和JavaScript实现轮播图特效的方法，包括图片切换、动态文字显示及鼠标悬停交互效果。通过具体代码示例，展示了如何设置图片动画、定时器控制图片切换、以及响应鼠标事件来改变图片和指示器状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head> 
    <body>		
		<!-- START 轮播图 -->
        <div class="slideBox">
            <ul>
				<li>
					<a href="__URL__/contact">
						<img src="__PUBLIC__/Images/index/indexshow/fiest.jpg" class="animated fadeInLeft" alt="第一张轮播图上动态文字" />
					</a>
                </li>
				<li>
					<img src="__PUBLIC__/Images/index/indexshow/second.jpg" class="animated fadeInRight" alt="第二张轮播图上动态文字" />
				</li>
					<li>
					<img src="__PUBLIC__/Images/index/indexshow/third.jpg" class="animated fadeInUp" alt="第三张轮播图上动态文字" />
				</li>
			</ul>
			<div class="spanBox">
				<span class="active">1</span>
				<span>2</span>
				<span>3</span>
			</div>
			<div class="prev"><img src="__PUBLIC__/Images/index/indexshow/lefticon.png" alt=""/></div>
			<div class="next"><img src="__PUBLIC__/Images/index/indexshow/righticon.png" alt=""/></div>
        </div>
		<!-- End 轮播图 -->
		
        <script type="text/javascript" src="__PUBLIC__/Js/jquery-2.11.1.min.js"></script>
		<script>/*页脚微信悬停显示图标效果*/
			function hideImg(){
				document.getElementById("wxImg").style.display = 'none';
			}
			function showImg(){
				document.getElementById("wxImg").style.display = 'block';
			}			
		</script>
		<script type="text/javascript">
			var slideBox = $(".slideBox");
				var ul = slideBox.find("ul");
				var oneWidth = slideBox.find("ul li").eq(0).width();
				var number = slideBox.find(".spanBox span"); 
				var timer = null;
     			var sw = 0; 
				number.on("click",function (){
					$(this).addClass("active").siblings("span").removeClass("active");
					sw = $(this).index();
					ul.animate({
						"right":oneWidth*sw,
					});
				})
				$(".next").stop(true,true).click(function () {
					sw++;
					if(sw == number.length){ sw = 0 };
					number.eq(sw).trigger("click");
				});
				$(".prev").stop(true,true).click(function () {
					sw--;
					if(sw == -1){ sw = 3 };
					number.eq(sw).trigger("click");
				});
				timer = setInterval(function () {
					sw++;
					if(sw == number.length){ sw = 0 };
					number.eq(sw).trigger("click");
				},2000);
				slideBox.hover(function() {
					$(".next,.prev").animate({
						"opacity":1,
					},2000);
					clearInterval(timer);
				},function(){
					$("next,.prev").animate({
						"opacity":0.5,
					},500);
					timer = setInterval(function () {
						sw++;
						if(sw == number.length){ sw = 0 };
						number.eq(sw).trigger("click");
					},2000);
				})
			})
		</script>
    </body>
</html>