教程集 > 脚本编程 > javascript > 正文 js 仿淘宝首页最新图片幻灯切换效果

js 仿淘宝首页最新图片幻灯切换效果

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供js 仿淘宝首页最新图片幻灯切换效果等资源，欢迎您收藏本站，我们将为您提供最新的js 仿淘宝首页最新图片幻灯切换效果资源

提示：您可以先修改部分代码再运行

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>  <title>js 仿淘宝首页最新图片幻灯切换效果</title>  <meta http-equiv="content-type" content="text/html;charset=gb2312">    <style type="text/css">  body{font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;}  body,div,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}  img{border:none;}  a,a:link,a:visited{color:#333333;text-decoration:none;cursor:pointer;}  a:hover{color:#008b00;text-decoration:underline;}  .hd h3{font-size:14px;color:#444444;padding-left:10px;color:#fff;line-height:30px;}  .loading{background:#f9fdff url('http://www.zzsky.cn/effect/images/201004241815/T16WJqXaXeXXXXXXXX-32-32.gif') no-repeat 50% 50%;}  .j_Slide{margin:30px 50px;border:5px #c2dae5 solid;width:470px;height:150px;overflow:hidden;position:relative;-webkit-border-radius:4px;}  .j_Slide .tb-slide-list{position:absolute;width:99999px;}  .j_Slide .tb-slide-list li{height:150px;}  .j_Slide .tb-slide-list li img{width:470px;height:150px;}  	.lbtn{position:absolute;z-index:3;bottom:3px;right:5px;}  	.lbtn li{float:left;line-height:21px;width:24px;padding:0 2px;}  	.lbtn li a,.lbtn li a:link,.lbtn li a:active,.lbtn li a:visited{display:block;text-align:center;background:url('http://www.zzsky.cn/effect/images/201004241815/lbtnA_bg.gif') no-repeat left 50%;line-height:21px;font-family:"Arial Unicode MS";}  	.lbtn li.hover a,.lbtn li.hover a:link,.lbtn li.hover a:active,.lbtn li.hover a:visited	{color:#fff;font-weight:bold;font-family:Verdana;text-decoration:none;background:url('http://www.zzsky.cn/effect/images/201004241815/lbtnA_bg_hover.gif') no-repeat left top;}  .j_Slide1{width:432px;height:152px;overflow:hidden;margin:30px 50px;}  .j_Slide1 .tb-slide-list{position:absolute;width:99999px;}  .j_Slide1 .bd{overflow:hidden;}  .j_Slide1 .tb-slide-list li img{width:200px;height:100px;padding:8px;overflow:hidden;}  .j_Slide1 .hd{height:30px;position:relative;background:#666;-webkit-border-top-left-radius:4px;-webkit-border-top-right-radius:4px;}  .j_Slide1 .bd{position:relative;border:1px #000 solid;height:116px;}  .j_Slide1 .hd .handel{position:absolute;right:5px;top:6px;}  .j_Slide1 .hd .handel li{float:left;}  .j_Slide1 .hd .handel li a,.j_Slide1 .hd .handel li a:link,.j_Slide1 .hd .handel li a:active,.j_Slide1 .hd .handel li a:visited{text-decoration:none;padding:2px 4px;}  .j_Slide1 .hd .handel li.hover a,.j_Slide1 .hd .handel li.hover a:link,.j_Slide1 .hd .handel li.hover a:active,.j_Slide1 .hd .handel li.hover a:visited{color:#fff;}  .direct-left{width:99999px;}  .direct-left li{float:left;}  .direct-right{}  .direct-right li{float:right;}  </style>  <script src="http://www.zzsky.cn/effect/images/201004241815/<a href="http://www.jiaochengji.com/
" target="_blank" class="inner-link">jquery</a>.min.js" language="javascript" type="text/javascript"></script>  <script src="http://www.zzsky.cn/effect/images/201004241815/oslide.js" language="javascript" type="text/javascript"></script>  <script src="http://www.zzsky.cn/effect/images/201004241815/easing.js" language="javascript" type="text/javascript"></script>  <script language="javascript" type="text/javascript">  $(function() {  var $o = $(".j_Slide");  	var ks = $o.find("ol").Oslide({  		slidetag:$o.find("ol>li"),  		easing:"easeInOutCirc",  		speed:450  	});  var $p = $(".j_Slide1");  	var ks = $p.find("ol").Oslide({  		slidetag:$p.find("ol>li"),  		btntag:$p.find(".handel"),  		direct:'right',  		easing:"easeInOutCirc"  	});  });  </script>  </head>  <body>    <div class="j j_Slide loading">  	<ol class="tb-slide-list">  		<li class="J_ECPM"><img alt="js 仿淘宝首页最新图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/c/3/1474650576_7335.jpg"></li>  		<li class="J_ECPM"><img alt="js 仿淘宝首页最新图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/3/c/1474650709_2649.jpg"></li>  		<li class="J_ECPM"><img alt="js 仿淘宝首页最新图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/a/b/1474650709_5241.jpg"></li>  		<li class="J_ECPM"><img alt="js 仿淘宝首页最新图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/f/b/1474650710_3511.jpg"></li>  	</ol>  </div>  <div class="j j_Slide1">  	<div class="hd">  		<h3>最新商家</h3>  		<ul class="handel clearfix">  			<li>●</li>  			<li>●</li>  			<li>●</li>  		</ul>  	</div>  	<div class="bd">  		<ol class="tb-slide-list clearfix">  			<li class="J_ECPM"><img alt="js 仿淘宝首页最新图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/2/c/1474650710_1549.jpg"><img alt="js 仿淘宝首页最新图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/2/7/1474650710_2601.jpg"></li>  			<li class="J_ECPM"><img alt="js 仿淘宝首页最新图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/f/a/1474650710_6303.jpg"><img alt="js 仿淘宝首页最新图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/4/4/1474650711_2678.jpg"></li>  			<li class="J_ECPM"><img alt="js 仿淘宝首页最新图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/f/a/1474650711_8094.jpg"><img alt="js 仿淘宝首页最新图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/4/4/1474650711_2556.jpg"></li>  		</ol>  	</div>  </div>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jquery幻灯片特效banner切换实例
 基于jquery的15款幻灯片插件
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
 jQuery幻灯片插件 Skitter
基于jquery的网站幻灯片切换效果焦点图代码
 jQuery图片幻灯手风琴效果插件 Slidorion
jquery【插件】图片切换轮播等
 photoshop淘宝化妆品海报设计实例制作教程
 jQuery AnythingSlider滑动效果插件
 8款非常棒的响应式jQuery 幻灯片插件推荐

上一篇：隐去浏览器中当鼠标移到图片上跳出的工具栏下一篇：js图片切换效果代码

[关闭]

js 仿淘宝首页最新图片幻灯切换效果

最近更新

浏览排行