很大气的滑动门图片特效

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>响应式图片切换jQuery选项卡</title>
<style>
html,body,div,img,q,dl,dt,dd,ol,ul,li{margin:0;padding:0;}
img,a img{border-style:none;border-width:0;}
a,a:hover{ text-decoration:none}
html {margin:0 auto;}
ol,ul,li{list-style: none;}:focus{outline: 0;}
body{background-color:#eef9f8; color:#666}
a,a:visited{ color:#666}
a:hover {color:#009966;}
.main{ font-family:宋体; color:#666; width:912px; margin:0 auto}
.slider-scroll{margin-top:12px; overflow:hidden;height:421px;}
#showArea{ width:664px; float:left;height:419px;border:1px solid #bebebe; border-right:none}
#showArea img{ opacity:0; display:none;}
#scrollDiv{float:left; width:246px; height:421px; background:url(//ku.shouce.ren/files/images/201601/56a351b5c1c15.jpg) 0 0 no-repeat}
#scrollDiv ul{ padding:19px 0 0 0}
#scrollDiv li{width:220px;height:57px;padding:10px 0 10px 26px; cursor:pointer; font-family:微软雅黑;}
#scrollDiv li.on{ background:#003030; position:relative;}
#scrollDiv li a{display:block; font-size:16px; height:35px; line-height:35px; color:#fff;}
#scrollDiv li span{display:block; color:#66ffff; font-size:14px; height:15px; line-height:15px; }
#scrollDiv li span.entity-triangle{ display:none; }
#scrollDiv li.on span.entity-triangle{position:absolute; top:31px; left:-6px; display:block; width:6px; height:22px;z-index:99;}
</style>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$.extend({
      manualScroll:function(opt,callback){
          //alert("suc");
          this.defaults = {
              objId:"", // 滚动区域id
              showArea:"", // 大图显示区域id，如果没有就不显示
              showWidth:419, // 大图宽度
              showHeight:664, // 大图高度
              showTitle: false, // 是否在大图下方显示标题
              width:300,  // 每行的宽度
              height:100, // div的高度
              picTimer:0,  // 间隔句柄，不需要设置，只是作为标识使用
		interval:5500
          };
          //参数初始化
          var opts = $.extend(this.defaults,opt);
	var $objId = opts.objId;
	var $showArea = opts.showArea;
	var $showWidth = opts.showWidth;
	var $showHeight = opts.showHeight;
	var $showTitle = opts.showTitle;
	var $width = opts.width;
	var $height = opts.height;
	var $titleopacity = opts.titleopacity;
	var $picTimer = opts.picTimer;
	var index=0;
	var $len = $("#"+$objId).find("ul li").length;
	/*设置显示图片大小*/
	$("#"+$showArea).find("img").css({"height":$showHeight,"width":$showWidth});
          /*鼠标移动事件*/
	$("#"+$objId).find("ul li").hover(function(){
	  index = $(this).index();
	  showimg(index);
	});
       /*自动切换*/
	$(".slider-scroll").hover(function(){
              clearInterval($picTimer);
              },function(){
                  $picTimer = setInterval(function() {
			   if(index==$len-1)
	            {
		         index=0;
	            }
				else
				{
			     index+=1;
				}
                       $("#"+$objId).find("ul li").removeClass("on");
		         $("#"+$objId).find("ul li").eq(index).addClass("on");
				 $("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"});
				 $("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);
                  },opts.interval); // 自动播放的间隔，单位：毫秒
          }).trigger("mouseleave");
	function showimg(index)
	{
		if(index==$len)
	    {
		   index=0;
	    }
		  $("#"+$objId).find("ul li").removeClass("on");
		  $("#"+$objId).find("ul li").eq(index).addClass("on");
		  $("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"});
		  $("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);
		  index+=1;
	}
}
});
</script>
</head>
<body>
<script type="text/javascript">
//home  顶部大图切换
$(document).ready(function(){
$.manualScroll({
objId:"scrollDiv",
showArea:"showArea",
showWidth:664, // 大图宽度
showHeight:419, // 大图高度
showTitle: true,
picTimer:0,
interval:3000
});
});
</script>
<div class="main">
	<div  class="slider-scroll f-c">
		<div id="showArea">
			<a href="/" target="_blank"><img style="display:block; opacity:1;" src="//ku.shouce.ren/files/images/201601/56a34a17e7e03.jpg" width="664px" height="419px"></a>
			<a href="/" target="_blank"><img style="display:block; opacity:1;" src="//ku.shouce.ren/files/images/201601/56a34a1b7ecee.jpg" width="664px" height="419px"></a>
			<a href="/" target="_blank"><img style="display:block; opacity:1;" src="//ku.shouce.ren/files/images/201601/56a34a1d31cfa.jpg" width="664px" height="419px"></a>
			<a href="/" target="_blank"><img style="display:block; opacity:1;" src="//ku.shouce.ren/files/images/201601/56a34a1ed05a6.jpg" width="664px" height="419px"></a>
			<a href="/" target="_blank"><img style="display:block; opacity:1;" src="//ku.shouce.ren/files/images/201601/56a34a21806d6.jpg" width="664px" height="419px"></a>
		</div>
		<div id="scrollDiv">
			<ul>
				<li class="on"><a href="/" target="_blank">斜弱视专家援疆<span>权威治疗疑难斜弱视</span></a><span class="entity-triangle"></span></li>
				<li ><a href="/" target="_blank">IntraLase飞秒激光治近视<span>全程无刀安全治近视首选</span></a><span class="entity-triangle"></span></li>
				<li ><a href="/" target="_blank">青少年近视防控<span>非手术治近视</span></a><span class="entity-triangle"></span></li>
				<li ><a href="/" target="_blank">白内障防治<span>爱让父母看得见</span></a><span class="entity-triangle"></span></li>
				<li ><a href="/" target="_blank">ICL人工晶体植入术<span>无损角膜之高端近视治疗</span></a><span class="entity-triangle"></span></li>
			</ul>
		</div>
	</div>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

很大气的滑动门图片特效

分类

图片代码

描述

很大气美观的滑动门图片特效，右侧显示标题，鼠标滑上去左侧的大图片就切换，可为图片增加描述和标题介绍，支持Alt标签和title标签，示例中可能去掉了这些，若需要的话自己再添加上去。本图片的流畅平滑效果要归功于jquery，欢迎学习前端...