图片轮播 -

摩天轮图片轮播特效图片从左到右循环轮播的Jquery JS特效

作者：MJ 发布于：2012-10-9 7:54 Tuesday 分类：JQuery

这个摩天轮图片轮播特效是图片从左到右不断循环轮播展示，轮播的时候图片会产生从右向左滑过的效果，请看下面具体演示效果。

<!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=gb2312" />
<title>MJBlog(mj.588cy.com)</title>
<style type="text/css">
* {margin:0;padding:0;font-size:12px;list-style:none;border:0;}
body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;}
a{ text-decoration:none;}
.top{ width:800px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;}
.logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;}
.logo a{ color:#666666;}
.denglu{ height:30px; line-height:30px; float:right; font-size:14px;}
.denglu a{ color:#666666; margin:0px 10px;}
.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}

.box{ width:780px; height:auto; margin:0px auto; border-top:1px solid #f9f9f9; padding:30px 10px;}
.topp{ margin:100px auto; background-color: #009933; width:275px; height:275px; overflow:hidden; position:relative;}
.topp ul{ position:absolute; width:1100px;}
.topp li{ width:275px; height:275px; float:left; color:#FFFFFF;}
.topp li img{ width:275px; height:275px;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 var in_out_time = 800 //渐显时间
 var scroll_Interval_time = 1100 //滚动间隔时间
 var scroll_time = 1000 //滚动动画时间
   
 addli() 
 
 function addli(){
  $("#lunbo li:first").clone().appendTo("#lunbo");
  $("#lunbo").animate({left:-275},scroll_time);
  setTimeout(delLi_last,scroll_Interval_time) 
 }
 
 function delLi_last(){ 
 $("#lunbo li:first").detach();
 $("#lunbo").css("left",0);
 setTimeout(addli,scroll_Interval_time) 
 }

 
});
</script>
</head>

<body>
<div class="top">
<div class="logo"><a href="http://mj.588cy.com">MJBlog</a></div>
<div class="denglu"><a href="#">登录</a><a href="#">注册</a></div>
<div class="clear"></div>
</div>

<div class="box">
<div class="topp">
<ul id="lunbo">
<li>1<a href="http://item.taobao.com/item.htm?id=16115598935" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/002/55/889dc557fc68e818186deea1bd46820b9X980w_468x468.jpg" /></a></li>
<li>2<a href="http://item.taobao.com/item.htm?id=20283876790" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/002/53/0d3035d9244d85f281418ab545bf56ff8llG50_468x468.jpg" /></a></li>
<li>3<a href="http://item.taobao.com/item.htm?id=20282400638" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/002/52/83a008b4bd0a21aa99f4f66adb85f373iK0Ce0_468x468.jpg" /></a></li>
<li>4<a href="http://item.taobao.com/item.htm?id=16118254010" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/002/56/f1b090a7f8cb9197e3c5b7c686a37972jJxJ4X_468x468.jpg" /></a></li>
</ul>
</div>
</div>
</body>
</html>

标签: 图片轮播轮播特效

评论(0) 引用(0) 浏览(365905)

淘宝首页商品广告图片左右轮播 JQuery JS特效

作者：MJ 发布于：2012-9-28 9:53 Friday 分类：JQuery

淘宝首页商品广告图片左右轮播 JQuery JS特效，点击左边向左按钮，广告图片向左滚动。点击右边边向右按钮，广告图片向右滚动。具体效果请查看下面运行代码演示：

<!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=gb2312" />
<title>MJBlog(mj.588cy.com)</title>
<style>
* {margin:0;padding:0;font-size:12px;list-style:none;border:0;}
body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;}
a{ text-decoration:none;}
.top{ width:800px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;}
.logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;}
.logo a{ color:#666666;}
.denglu{ height:30px; line-height:30px; float:right; font-size:14px;}
.denglu a{ color:#666666; margin:0px 10px;}
.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}

.box{ width:780px; height:auto; margin:0px auto; border-top:1px solid #f9f9f9; padding:30px 10px;}
.img_box{ width:450px; height:auto; padding:10px 165px; background-color:#FFFFFF; margin:0px auto;}
.lb{background-color:#ffffff; width:400px; height:200px; overflow:hidden; position:relative; float:left;}
.lb ul{ position:absolute; width:700px;}
.lb li{ width:200px; height:200px; float:left;}
.lb li img{ width:200px; height:200px;}
.xz,.xy{ width:13px; height:200px; cursor:pointer; float:left; padding:0px 6px;}
.xz_bg{background:url(http://mj.588cy.com/img/tb_lb.png) no-repeat -13px 90px #FFFFFF;}
.xz_bgs{background:url(http://mj.588cy.com/img/tb_lb.png) no-repeat -13px -40px #FFFFFF;}
.xy_bg{background:url(http://mj.588cy.com/img/tb_lb.png) no-repeat 12px 90px #FFFFFF;}
.xy_bgs{background:url(http://mj.588cy.com/img/tb_lb.png) no-repeat 12px -40px #FFFFFF;}
</style>
<script type="text/javascript" src="http://mj.588cy.com/img/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var scroll_time = 500; 
 
 $(".xz").click(function(){
  $("#an").css("left",-200);
  $("#an li:last").clone().prependTo("#an");
  $("#an li:last").detach();
 $("#an").animate({left:0},scroll_time);
 });
 
  $(".xy").click(function(){
  $("#an").css("left",0);
  $("#an li:first").clone().appendTo("#an");
 $("#an").animate({left:-200},scroll_time,xy_an);
 });
 
  function xy_an(){ 
 $("#an li:first").detach();
 $("#an").css("left",0);
 };

 $(".xz").hover(function(){
 $(this).removeClass("xz_bg").addClass("xz_bgs");
 },function(){
 $(this).removeClass("xz_bgs").addClass("xz_bg");
 });
 
  $(".xy").hover(function(){
 $(this).removeClass("xy_bg").addClass("xy_bgs");
 },function(){
 $(this).removeClass("xy_bgs").addClass("xy_bg");
 });
});
</script>
</head>
<body>
<div class="top">
<div class="logo"><a href="http://mj.588cy.com">MJBlog</a></div>
<div class="denglu"><a href="#">登录</a><a href="#">注册</a></div>
<div class="clear"></div>
</div>

<div class="box">
<div class="img_box">
<div class="xz xz_bg"></div>
<div class="lb">
<ul id="an">
<li><a href="http://www.chaonanwo.com/note/243/g/213" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/002/43/8dddf6254f72a0c940c3161d7a8b4dfcOQ1VuT_200x999.jpg" /></a></li>
<li><a href="http://www.chaonanwo.com/note/197/g/167" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/001/97/0a2e7a450935c400fd4e4c2a0bd297a6uLq22G_200x999.jpg" /></a></li>
<li><a href="http://www.chaonanwo.com/note/131/g/103" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/001/31/8ba706159850b27253b41814f856de85nHK4hH_200x999.jpg" /></a></li>
<li><a href="http://www.chaonanwo.com/note/194/g/164" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/001/94/9b1751bc26272121498ac3f340f11b0eCO9ZPD_200x999.jpg" /></a></li>
</ul>
</div>
<div class="xy xy_bg"></div>
<div class="clear"></div>
</div>
</div>
</body>
</html>

标签: 图片轮播图片滚动轮播

评论(0) 引用(0) 浏览(326609)

JQuery 广告图片轮播代码幻灯片特效JS代码

作者：MJ 发布于：2012-8-14 8:54 Tuesday 分类：JQuery

这款图片轮播特效是用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>

标签: 图片轮播

评论(0) 引用(0) 浏览(365928)

blogger
分类
- MJ分享(5)
- JQuery(23)
- Css(16)
- Html5(1)
- PHP(20)
- Seo优化(3)
最新碎语
- 佛曰：命由己造，相由心生，世间万物皆是化相，心不动，万物皆不动，心不变，万物皆不变。
  2012-10-24 02:01
- 佛曰：人生有八苦：生、老、病、死，爱别离，怨长久，求不得，放不下！
  2012-10-24 01:59
- 佛曰：笑着面对，不去埋怨。悠然，随心，随性，随缘。注定让一生改变的，只在百年后，那一朵花开的时间。
  2012-10-24 01:56
- 裤子尺码：腰围29（2.23尺/75-76cm）前档24-25cm 大腿48-50cm 小腿32-33cm 裤长95cm
  2012-10-17 15:49
- WEB前端工程师：我们是工程师中的设计师，是设计师中的工程师。
  2012-09-02 15:34
搜索
随机日志
链接

摩天轮图片轮播特效 图片从左到右循环轮播的Jquery JS特效

淘宝首页商品广告图片左右轮播 JQuery JS特效

JQuery 广告图片轮播代码 幻灯片特效JS代码

blogger

分类

最新碎语

搜索

随机日志

链接

摩天轮图片轮播特效图片从左到右循环轮播的Jquery JS特效

JQuery 广告图片轮播代码幻灯片特效JS代码