用JQ 写的广告图片轮播幻灯片JS特效代码分享

最新推荐文章于 2024-06-17 15:29:34 发布

chaonanwo

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量2.2k

点赞数 2

分类专栏： js 网页特效 JQuery 文章标签： class function float xhtml div jquery

本文链接：https://blog.csdn.net/chaonanwo/article/details/7871128

版权

JQuery 同时被 3 个专栏收录

11 篇文章 1 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

网页特效

6 篇文章 0 订阅

订阅专栏

这款图片轮播特效是用JQuery写的，当网页代码全部加载后自动播放，当鼠标滑过红色按钮停止播放，并显示与之想对应的轮播图片，鼠标移开后继续播放。图片循环播放主要是使用setTimeout() 方法标签来实现，停止播放使用clearTimeout() 方法标签来实现，轮播图片使用.hide()和.fadeIn()来实现淡出淡入效果

<!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>mj.588cy.com</title>
<style type="text/css">
body{ margin:0px; padding:0px; background-color:#f5f5f5;}
ul,li{ list-style:none; margin:0px; padding:0px;}
a{ text-decoration:none;}

.slide{width:240px;height:auto;padding:10px; background-color:#FFFFFF;border:#eeeeee 1px solid; margin:10px auto;}
.pic{overflow:hidden;width:240px; height:340px;}
.pic li{display:none; width:240px; height:340px; position:relative;}
.pic li img{width:240px; border:0px;}
.pic li span{ display:block; width:220px; height:30px; line-height:30px; font-size:12px; color:#FFFFFF; background-color:#000000; padding:0px 10px; FILTER: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; -webkit-opacity: 0.7; position:absolute; left:0px; bottom:0px; z-index:99; overflow:hidden;}
.cur{display:block;}
.thumb{width:240px; height:12px; padding-top:10px;}
.mjblog{ width:95px; height:12px; padding-left:5px; font-size:12px; color: #c3c3c3; float:left; font-family: "Times New Roman", Times, serif;}
.mjblog a{color: #c3c3c3;}
.thnav{ float:right; height:10px;}
.thnav li{ width:10px; height:10px; line-height:0px; font-size:0px; float:left; margin-left:8px; background-image:url(http://mj.588cy.com/img/nav_libg.gif); background-repeat:no-repeat; cursor:pointer;}
.navli{ background-position:-17px 0px;}
.clear{ display:block; height:0px; line-height:0px; font-size:0px;clear:both;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	var xf="";
	var i=0;
	var len="";
	var dq ="";
	  $(document).ready(function(){	
	  len=$(".thnav li").length;
	luenbo(i);
	$(".thnav li").hover(function(){
	  clearTimeout(xf);
	  dq = $(this).index();
	  $(".pic li").hide().eq(dq).fadeIn();
	$(".thnav li").removeClass("navli").eq(dq).addClass("navli");
	},function(){
	i= dq + 1 < len ? dq + 1 : 0;
    xf = setTimeout("luenbo(" + i + ")", 3000);
	});
	}); 
	
	function luenbo(num){
	  i=num;
	  $(".pic li").hide().eq(i).fadeIn();
	$(".thnav li").removeClass("navli").eq(i).addClass("navli"); 
	i = i + 1 < len ? i + 1 : 0;
	xf=setTimeout("luenbo(" + i + ")", 3000);
	}	

</script>
</head>

<body>
<div class="slide">
	<div class="pic">
    <ul>
		<li><a href="http://www.chaonanwo.com/club/detail/4"><img src="http://mj.588cy.com/img/tu001.jpg"></a><span>张根硕时尚韩式潮男发型</span></li>
        <li><a href="http://www.chaonanwo.com/club/detail/3"><img src="http://mj.588cy.com/img/tu002.jpg"></a><span>2012今年夏季最潮的潮男发型</span></li>
		<li><a href="http://www.chaonanwo.com/note/169/g/140"><img src="http://mj.588cy.com/img/tu003.jpg"></a><span>夏季亮色风波点两色休闲衬衣</span></li>
        <li><a href="http://www.chaonanwo.com/note/14/g/7"><img src="http://mj.588cy.com/img/tu004.jpg"></a><span>韩版潮人基本款休闲短袖T恤</span></li>
	</ul>
    </div>
	<div class="thumb">
    <div class="mjblog"><a href="http://mj.588cy.com" target="_blank">MJBlog</a></div>
    <div class="thnav">
      <ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
       <!--也可以放缩略图,需要修改上面的CSS-->
       </ul>
      </div>
      <div class="clear"></div>
	</div>
</div> 
</body>
</html>

chaonanwo

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用JQ 写的广告图片轮播幻灯片JS特效代码分享

这款图片轮播特效是用JQuery写的，当网页代码全部加载后自动播放，当鼠标滑过红色按钮停止播放，并显示与之想对应的轮播图片，鼠标移开后继续播放。图片循环播放主要是使用setTimeout() 方法标签来实现，停止播放使用clearTimeout() 方法标签来实现，轮播图片使用.hide()和.fadeIn()来实现淡出淡入效果mj.588cy.combody{ margin:0
复制链接

扫一扫