jquery鼠标滑动小图大图切换特效_51模板集

51模板集专业软件定制、系统开发以及各种开源CMS教程,织梦教程、帝国cms教程、phpcms教程、.net教程、JS特效等

主页 > 网页特效 > jquery特效 >

jquery鼠标滑动小图大图切换特效

分享到：

来源：51模板集浏览：次发布时间：2014-05-26 08:21

jquery鼠标滑动经过小图然后大图切换特效,使用jquery的特效，可以直接在js里面修改宽，在css样式修改宽和高，维护很方便

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>jquery鼠标滑动小图大图切换特效-51模板集</title>
<script language="javascript" type="text/javascript" src="http://www.51mubanji.com/js/jquery.js" ></script>

<style>
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; margin: 0; padding: 0; }
img { border: 0 none; vertical-align: top; }
ul, li { list-style-type: none; }
h2{font-size:14px;}
i, em, cite { font-style: normal; }
body {   font-family:"宋体"; font-size: 14px; color: #3d3d3d;  }
 .tpqh{float:left; width:1088px; height:470px; padding:6px; }
.slider_box{float:left;width:1088px; overflow: hidden; position:relative;}
.silder_con{float:left;width:1088px;height:454px; overflow: hidden;position: relative; background:#f8f5f7;}
.silder_con li{float:left;width:1088px;height:454px;}
.silder_con img{width:1088px;height:454px;  }
.silder_nav{float:left;width:1088px; height:106px; padding-top:7px; }
.silder_nav li{float:left;width:1088px;height:106px; padding-left:3px; }
.silder_nav li,.silder_nav img{display: block;width:217px;height:106px; overflow: hidden; }

</style>

<script>

$(function(){
	var sWidth = 1088;
	var len = $("#slider_name .silder_panel").length;
	var index = 0;
	var picTimer;
	
	var btn = "";
	$("#slider_name").append(btn);

$("#slider_name .silder_nav li").css({"opacity":"0.6","filter":"alpha(opacity=60)"}).mouseenter(function() {																		
		index = $("#slider_name .silder_nav li").index(this);
		showPics(index);
	}).eq(0).trigger("mouseenter");

$("#slider_name .prev,#slider_name .next").css({"opacity":"0.9","filter":"alpha(opacity=90)"}).hover(function(){
		$(this).stop(true,false).animate({"opacity":"0.9","filter":"alpha(opacity=90)"},300);
	},function() {
		$(this).stop(true,false).animate({"opacity":"0.9","filter":"alpha(opacity=90)"},300);
	});

// Prev
	$("#slider_name .prev").click(function() {
		index -= 1;
		if(index == -1) {index = len - 1;}
		showPics(index);
	});

// Next
	$("#slider_name .next").click(function() {
		index += 1;
		if(index == len) {index = 0;}
		showPics(index);
	});

// 
	$("#slider_name .silder_con").css("width",sWidth * (len));
	
	// mouse 
	$("#slider_name").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			showPics(index);
			index++;
			if(index == len) {index = 0;}
		},3000); 
	}).trigger("mouseleave");
	
	// showPics
	function showPics(index) {
		var nowLeft = -index*sWidth; 
		$("#slider_name .silder_con").stop(true,false).animate({"left":nowLeft},300);
		$("#slider_name .silder_nav li").removeClass("current").eq(index).addClass("current"); 
		$("#slider_name .silder_nav li").stop(true,false).animate({"opacity":"0.5"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);
	}
});

</script>
</head>

<body>

<div class="tpqh" id="slider">
                  <div class="slider_box" id="slider_name">
                    <ul class="silder_con" style="left: 0px; width: 5500px; ">
                      <li class="silder_panel clearfix"> <img src="/uploads/allimg/140526/0R35545Q-0.jpg" rel=nofollow> </li>
                      <li class="silder_panel clearfix"> <img src="/uploads/allimg/140526/0R355G36-1.jpg" rel=nofollow> </li>
                      <li class="silder_panel clearfix"> <img src="/uploads/allimg/140526/0R3552605-2.jpg" rel=nofollow> </li>
                      <li class="silder_panel clearfix"> <img src="/uploads/allimg/140526/0R3553608-3.jpg" rel=nofollow> </li>
                      <li class="silder_panel clearfix"> <img src="/uploads/allimg/140526/0R35515c-4.jpg" rel=nofollow> </li>
                    </ul>
                    <ul class="silder_nav " id="clearfix">
                      <li style="opacity: 1; " class="current"><a href="/wytx/javascripttx/"><img src="/uploads/allimg/140526/0R3551464-5.jpg" rel=nofollow></a></li>
                      <li style="opacity: 0.5; " class=""><a href="/wytx/flashtx/"><img src="/uploads/allimg/140526/0R3551M7-6.jpg" rel=nofollow></a></li>
                      <li style="opacity: 0.5; " class=""><a href="/wytx/jquerytx/"><img src="http://www.ahangels.com/special/2014ahqr/images/s3-1.jpg" rel=nofollow></a></li>
                      <li style="opacity: 0.5; " class=""><a href="/wytx/"><img src="/uploads/allimg/140526/0R3551221-8.jpg" rel=nofollow></a></li>
                      <li style="opacity: 0.5; " class=""><a href="/wzmb/"><img src="/uploads/allimg/140526/0R355MO-9.jpg" rel=nofollow></a></li>
                    </ul>
                   
                  <div class="silderBox"></div>
                </div>
 
       </div>
</body>
</html>

<script src="/js/dashang.js" type="text/javascript" charset="utf-8"></script>
<p>jquery鼠标滑动小图大图切换特效 转载请注明出处 <a target="_blank" href="http://www.51mubanji.com">网页特效</a><p></p>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

上一篇：jQuery鼠标滑动图片文字说明特效
下一篇：jquery可点击左右按钮切换的特效

栏目列表

点击排行

代码实现JQuery图片轮播效果代码

input带输入的下拉菜单效果

漂亮的鼠标经过弹出层jquery特效

带左右按钮jquery图片切换代码

jquery实现鼠标经过改变图片透明度

带左右控制的按钮flash图片特效3D立体动画焦点图片切换

好看的导航二级菜单jquery下拉菜单

带左右按钮的jQuery图片切换特效

简单的jquery选项卡特效

原创右侧可折叠在线客服广告代码

相关文章推荐

你知道如用jq实现简单拖曵原理实例吗

如何实现简单大方Tab菜单选项卡的JS特效

如何设计一款简易伸展显示详情菜单特效

关于鼠标经过时显示详情的JS

网站右侧在线客服公众号返回顶部多功能悬浮菜单栏js插

带左右控制的按钮flash图片特效3D立体动画焦点图片切换

带左右按钮的jQuery图片切换特效

jquery水平滑动图片切换特效

jquery可点击左右按钮切换的特效

jquery鼠标滑动小图大图切换特效

本站部分资源收集整理于互联网，免费供网友参考学习使用，并不用于商业用途，若侵犯了您的版权请来信告知，再次感谢您的分享！

皖公网安备 34010302000133号