当前位置： 首页 > news >正文

jqeury轮播图插件 简单教程（适合新手）

news 来源：原创 2024/5/3 18:13:17

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

    下面的实例说明都只是我这几天下载后分析，而且我也是个新手，所以难免会有不少错误，这些都只是我个人的分享，希望有人能指出其中的错误，这样大家可以一起学习一起进步。

    （实例的完整代码会在文章最后分享，图片地址要修改的哦）

    一、第一个先从简单下手，讲渐变轮播图。对了，这个是文字的，不过原理和图片一样。

    这是轮播图部分的html代码：

<div class="newlist br-bg" id="hnews">
	   <h3 class="ti">
			厂房设备
		   <a href="Workshop/" title="厂房设备" class="more">更多>></a>
	   </h3>
	   <div class="newtextlist" id="hnewsitems">
		   <li class='list top'><a href='Workshop/Workshop6.html' title='空气净化器生产厂房' target='_self'>空气净化器生产厂房</a><span class='time'>2013-05-30</span></li>
		   <li class='list '><a href='Workshop/Workshop9.html' title=' 旋风式除尘设备生产厂房' target='_self'> 旋风式除尘设备生产厂房</a><span class='time'>2013-05-29</span></li>
		   <li class='list '><a href='Workshop/Workshop8.html' title='高温带式除尘设备生产厂房' target='_self'>高温带式除尘设备生产厂房</a><span class='time'>2013-05-29</span></li>
		   <li class='list '><a href='Workshop/Workshop7.html' title='脱硫设备生产厂房' target='_self'>脱硫设备生产厂房</a><span class='time'>2013-05-29</span></li>
		   <li class='list '><a href='Workshop/Workshop5.html' title=' 生活污水处理设备生产厂房' target='_self'> 生活污水处理设备生产厂房</a><span class='time'>2013-05-29</span></li>
		   <li class='list '><a href='Workshop/Workshop4.html' title='工业污水处理设备生产厂房' target='_self'>工业污水处理设备生产厂房</a><span class='time'>2013-05-29</span></li>
	   </div>
	   <div id="dians" class="textr">  
			<a num="0" class="dian">&nbsp;</a>  
			<a num="2" class="dian">&nbsp;</a>
			<a num="4" class="dian">&nbsp;</a>
	   </div>			   
	</div>

    这是jquery的代码：    

var time="";//定义全局变量
var index=0;
$(function(){
	showatext(index);
	//鼠标移入图片导航点（即id为dian的部分）时的操作
	$(".dian").hover(
		function(){
			clearTimeout(time);
			var k=$(this).attr("num");
			$("#dians a").removeClass("top");
			$(".newtextlist li").hide().stop().eq(k).fadeIn("slow");
			$(".newtextlist li").eq(k).next().fadeIn("slow");		
			},
		//鼠标移出图片导航点（即id为dian的部分）时的操作
		function(){
			//鼠标移出时，继续向前轮播
			index=parseInt($(this).attr("num"))+2==6?0:parseInt($(this).attr("num"))+2;
			time=setTimeout("showatext("+index+")",3000);
		}
	);
	
});
//定时进行图片的切换
function showatext(num){
	index=num;
	t=index==0?0:(index==2?1:2);
	$("#dians a").removeClass("top").eq(t).addClass("top");//改变图片导航点的样式
	$(".newtextlist li").hide().stop().eq(num).fadeIn("slow");
	$(".newtextlist li").eq(num).next().fadeIn("slow");
	index=index+2>4?0:(index+2);
	time=setTimeout("showatext("+index+")",3000);
}

   这是最后的结果截图：

    000333_08yV_1446867.jpg

    上面的jquery函数和用法都是很基本的，大家可以现看现查，或者之前不太了解的可以找几个简单的基础教程看看，推荐去http://www.w3school.com.cn/看看。


   二、 接下来这个实例是我研究得最久的了，开始是在找简单的来研究，找了好久。因为网上关于滑动的轮播图简单的教程很少，插件倒是有很多。所以今天小弟就献丑了，大胆给大家分享一个。

    这是轮播图部分的html代码：

<div id="banner">
	<div id="ifocus_piclist">
		<ul>
			<li><a href='' title='' target='_blank'> <img src="1369886297.jpg" alt="" width='1440' height='400'> </a></li>

			<li><a href='' title='' target='_blank'> <img src="1369883481.jpg" alt="" width='1440' height='400'> </a></li>

			<li><a href='' title='' target='_blank'> <img src="1369899496.jpg" alt="" width='1440' height='400'> </a></li>
		</ul>
	</div>
	<div id="ifocus_btn">
		<ul>		
			<li class="">&nbsp;</li>	
			<li class="">&nbsp;</li>	
			<li class="">&nbsp;</li>
		</ul>		
	</div>
</div>

    id为ifocus_piclist的是图片部分，id为ifocus_btn是矩形导航部分。

    下面是css样式： 

body{margin:0 auto;}
#banner{width:100%;position:relative; height:400px;overflow:hidden;}		
#banner #ifocus_piclist ul {width: 1440px; height: 400px; position:absolute;padding:0px;margin-top:0px;}
#banner #ifocus_piclist ul li {width: 1440px; height: 400px;  float:left;}
#banner #ifocus_piclist ul li img{width:1440px; height:400px;border:none;}
#banner #ifocus_btn {position: absolute;padding-left: 3px;width: 1440px;bottom: 25px;height:14px;left:75%; zoom:1;}
#banner #ifocus_btn li {display:block; width:25px; height:6px; float:left;margin-right:5px;  border:1px solid #fff; cursor:pointer;text-indent:9999px;}
#banner #ifocus_btn .current {text-align: left;margin-top: 0px;display: block;float: left;background:#fff;filter: alpha(opacity=100);}

    这个就比较可以有意思了，左右滑动。主要还是这个定位position在作怪，id为banner的元素的position为relative，则其子元素中position为absolute的ul以banner这个父元素进行绝对定位，ul实际上就是四张图片并列在一起，宽度为1440px*3的元素。这样利用jquery定时控制ul的css的left属性就可以实现滑动的效果了。（定位这些东西我也是接触不久，而且样式应该也有冗余和不足，希望大家批评指正。）

    下面是jquery：

    

$(function() {
    var sWidth = $("#ifocus_btn").width(); //获取焦点图的宽度（显示面积）
	var len = $("#ifocus_btn ul li").length; //获取焦点图个数
	var index = 0;
	var picTimer;
	
		//为数字按钮添加鼠标滑入事件，以显示相应的内容
	$("#ifocus_btn ul li").mouseenter(function() {
										   
												   
		index = $("#ifocus_btn ul li").index(this);

		showPics(index);
	}).eq(0).trigger("mouseenter");
	
	
	$("#ifocus_piclist ul").css("width",sWidth * (len + 1));
	
	//鼠标滑入某li中的某div里，调整其同辈div元素的透明度，由于li的背景为黑色，所以会有变暗的效果
	$("#ifocus_piclist ul li div").hover(function() {
		$(this).siblings().css("opacity",0.7);
	},function() {
		$("ifocus_piclist ul li div").css("opacity",1);
	});
	
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	$("#ifocus_piclist").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			if(index == len) { //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零
				showFirPic();
				index = 0;
			} else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics()
				showPics(index);
			}
			index++;
		},9000); //此3000代表自动播放的间隔，单位：毫秒
	}).trigger("mouseleave");
	
	
    function showPics(index) { //普通切换

		var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
		$("#ifocus_piclist ul").stop(true,false).animate({"left":nowLeft}); //通过animate()调整ul元素滚动到计算出的position
        $("#ifocus_btn ul li").removeClass("current");
        $("#ifocus_btn ul li").eq(index).addClass("current");
	  }
	  
	  function showFirPic() { //最后一张图自动切换到第一张图时专用
		$("#ifocus_piclist ul").append($("#ifocus_piclist ul li:first").clone());
		var nowLeft = -len*sWidth; //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
		$("#ifocus_piclist ul").stop(true,false).animate({"left":nowLeft},900,function() {
			//通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
			$("#ifocus_piclist ul").css("left","0");
			 $("#ifocus_btn ul li").removeClass("current");
           $("#ifocus_btn ul li").eq(0).addClass("current");
		}); 
		
	}
	
	});

    这里加了注释，如果上面那个简单的会了，相信这个大家应该可以理解的。而且这个滑动的实例难点在于css的定位，jquery本来就是个简单实用强大的好框架。


最后再给大家分享两个实例的代码

实例1：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link media="screen" href="wenzi_css.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<div class="newlist br-bg" id="hnews">
	   <h3 class="ti">
			厂房设备
		   <a href="Workshop/" title="厂房设备" class="more">更多>></a>
	   </h3>
	   <div class="newtextlist" id="hnewsitems">
		   <li class='list top'><a href='Workshop/Workshop6.html' title='空气净化器生产厂房' target='_self'>空气净化器生产厂房</a><span class='time'>2013-05-30</span></li>
		   <li class='list '><a href='Workshop/Workshop9.html' title=' 旋风式除尘设备生产厂房' target='_self'> 旋风式除尘设备生产厂房</a><span class='time'>2013-05-29</span></li>
		   <li class='list '><a href='Workshop/Workshop8.html' title='高温带式除尘设备生产厂房' target='_self'>高温带式除尘设备生产厂房</a><span class='time'>2013-05-29</span></li>
		   <li class='list '><a href='Workshop/Workshop7.html' title='脱硫设备生产厂房' target='_self'>脱硫设备生产厂房</a><span class='time'>2013-05-29</span></li>
		   <li class='list '><a href='Workshop/Workshop5.html' title=' 生活污水处理设备生产厂房' target='_self'> 生活污水处理设备生产厂房</a><span class='time'>2013-05-29</span></li>
		   <li class='list '><a href='Workshop/Workshop4.html' title='工业污水处理设备生产厂房' target='_self'>工业污水处理设备生产厂房</a><span class='time'>2013-05-29</span></li>
	   </div>
	   <div id="dians" class="textr">  
			<a num="0" class="dian">&nbsp;</a>  
			<a num="2" class="dian">&nbsp;</a>
			<a num="4" class="dian">&nbsp;</a>
	   </div>			   
	</div>
<footer>

</footer>
<script type="text/javascript">
var time="";//定义全局变量
var index=0;
$(function(){
	showatext(index);
	//鼠标移入图片导航点（即id为dian的部分）时的操作
	$(".dian").hover(
		function(){
			clearTimeout(time);
			var k=$(this).attr("num");
			$("#dians a").removeClass("top");
			$(".newtextlist li").hide().stop().eq(k).fadeIn("slow");
			$(".newtextlist li").eq(k).next().fadeIn("slow");		
			},
		//鼠标移出图片导航点（即id为dian的部分）时的操作
		function(){
			//鼠标移出时，继续向前轮播
			index=parseInt($(this).attr("num"))+2==6?0:parseInt($(this).attr("num"))+2;
			time=setTimeout("showatext("+index+")",3000);
		}
	);
	
});
//定时进行图片的切换
function showatext(num){
	index=num;
	t=index==0?0:(index==2?1:2);
	$("#dians a").removeClass("top").eq(t).addClass("top");//改变图片导航点的样式
	$(".newtextlist li").hide().stop().eq(num).fadeIn("slow");
	$(".newtextlist li").eq(num).next().fadeIn("slow");
	index=index+2>4?0:(index+2);
	time=setTimeout("showatext("+index+")",3000);
}
</script>
</body>
</html>

wezi_css.css：

a{text-decoration:none;}
a:hover{text-decoration:underline;}
#hnews{border:1px solid #92e0fa;width:400px;margin:0 auto;padding-left:10px;padding-bottom:30px;}
#hnewsitems li{list-style:none;}
.more,.time{float:right;margin-right:10px;}
.time{color:#3c3d3d;}
.list{padding:4px;}
.list a{color:#191a1a;}
.textr{padding:10px;float:right;}
#dians a:hover{
    background-position: -10px 0px;
}
#dians .top{
	background-position: -10px 0px;
}
#dians a {
    width: 10px;
    height: 10px;
    overflow: hidden;
    display: block;
    float: left;
    margin-left: 8px;
    background: url(dian.png) no-repeat scroll 0px 0px transparent;
}

    截个图：

    

161504_Xumf_1446867.jpg

161504_XlZn_1446867.jpg

    161612_ehAS_1446867.jpg

实例二源码：

    

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>包装装横公司网站模板|包装装横企业网站模板-包装装横</title>
<meta name="description" content="模板建站和纯手工建站的区别在于：模板是“成衣”，你只需要去服装店挑选，而所谓的纯手工建站是裁缝师傅给你定制。功能和稳定性模板+成熟的CMS管理后台大大优于“裁缝店”。" />
<meta name="keywords" content="包装装横公司网站模板|包装装横企业网站模板" />
<meta name="generator" content="MetInfo 5.1.7" />
<link href="favicon.ico" rel="shortcut icon" />

<script src="http://www.metinfo.cn/demo/met100/288/public/js/jQuery1.7.2.js" type="text/javascript"></script>
<!--[if IE]>
<script src="http://www.metinfo.cn/demo/met100/288/public/js/html5.js" type="text/javascript"></script>
<![endif]-->
<style>
body{margin:0 auto;}
#banner{width:100%; height:400px;overflow:hidden;position:relative;}		
#banner #ifocus_piclist ul {width: 1440px; height: 400px; position:absolute;padding:0px;margin-top:0px;}
#banner #ifocus_piclist ul li {width:1440px;height:400px;float:left;}
#banner #ifocus_piclist ul li img{width:1440px; height:400px;border:none;}
#banner #ifocus_btn {position: absolute;padding-left: 3px;width: 1440px;bottom: 25px;height:14px;left:75%; zoom:1;}
#banner #ifocus_btn li {display:block; width:25px; height:6px; float:left;margin-right:5px;  border:1px solid #fff; cursor:pointer;text-indent:9999px;}
#banner #ifocus_btn .current {text-align: left;margin-top: 0px;display: block;float: left;background:#fff;filter: alpha(opacity=100);}

</style>
</head>

<script type="text/javascript" src="banner.js"></script>

<body>
<header>
</header>



<div class="bannner">
<div class="indimg">
<div class="banner">
<div id="banner">
<div id="ifocus">
<div style="overflow: hidden" id="ifocus_pic">
		<div style=" left: 0px" id="ifocus_piclist">
			<ul>
				<li><a href='' title='' target='_blank'> <img src="1369886297.jpg" alt="" width='1440' height='400'> </a></li>

			<li><a href='' title='' target='_blank'> <img src="1369883481.jpg" alt="" width='1440' height='400'> </a></li>

			<li><a href='' title='' target='_blank'> <img src="1369899496.jpg" alt="" width='1440' height='400'> </a></li>
			</ul>
		</div>
		<div id="ifocus_btn">
				<ul>
				
						<li class="">&nbsp;</li>
						
				
						<li class="">&nbsp;</li>
						
				
						<li class="">&nbsp;</li>
						
						
				</ul>
				
		</div>
</div>
</div>
</div>
</div>
</div>
</div>

</body></html>


banner.js:

$(function() {
    var sWidth = $("#ifocus_btn").width(); //获取焦点图的宽度（显示面积）
	var len = $("#ifocus_btn ul li").length; //获取焦点图个数
	var index = 0;
	var picTimer;
	
		//为数字按钮添加鼠标滑入事件，以显示相应的内容
	$("#ifocus_btn ul li").mouseenter(function() {
										   
												   
		index = $("#ifocus_btn ul li").index(this);

		showPics(index);
	}).eq(0).trigger("mouseenter");
	
	
	$("#ifocus_piclist ul").css("width",sWidth * (len + 1));
	
	//鼠标滑入某li中的某div里，调整其同辈div元素的透明度，由于li的背景为黑色，所以会有变暗的效果
	$("#ifocus_piclist ul li div").hover(function() {
		$(this).siblings().css("opacity",0.7);
	},function() {
		$("ifocus_piclist ul li div").css("opacity",1);
	});
	
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	$("#ifocus_piclist").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			if(index == len) { //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零
				showFirPic();
				index = 0;
			} else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics()
				showPics(index);
			}
			index++;
		},9000); //此3000代表自动播放的间隔，单位：毫秒
	}).trigger("mouseleave");
	
	
    function showPics(index) { //普通切换

		var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
		$("#ifocus_piclist ul").stop(true,false).animate({"left":nowLeft}); //通过animate()调整ul元素滚动到计算出的position
        $("#ifocus_btn ul li").removeClass("current");
        $("#ifocus_btn ul li").eq(index).addClass("current");
	  }
	  
	  function showFirPic() { //最后一张图自动切换到第一张图时专用
		$("#ifocus_piclist ul").append($("#ifocus_piclist ul li:first").clone());
		var nowLeft = -len*sWidth; //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
		$("#ifocus_piclist ul").stop(true,false).animate({"left":nowLeft},900,function() {
			//通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
			$("#ifocus_piclist ul").css("left","0");
			$("#ifocus_piclist ul li:last").remove();
			 $("#ifocus_btn ul li").removeClass("current");
           $("#ifocus_btn ul li").eq(0).addClass("current");
		}); 
		
	}
	
	});

    截个图：

    

160929_eMeB_1446867.jpg160929_5iU2_1446867.jpg

    161034_CyXJ_1446867.jpg


嗯嗯，这博客确实有些长，而且语言也没有组织好，不好意思呀！我也写得脖子酸了，不过这几天总算没有白白浪费掉，总结了一点东西。今天就到这里，晚安


转载于:https://my.oschina.net/u/1446867/blog/202369

相关文章：

  • android 文件的权限
  • 研磨设计模式之 策略模式--转
  • Android 完美退出 App （Exit）
  • 初识 linux 正则表达式
  • swift - UILabel的用法
  • 抽象类是否可继承实体类的问题
  • CAS客户端票据分发问题
  • 实用 —— PowerCLI (二)
  • Java集合-----java集合框架常见问题
  • 本地通知和推送通知编程指南
  • web.xml文件的作用
  • 计算机网络笔记--绪论（一）
  • 三星GT-S7562i 刷机 完整版
  • .NET中使用Redis (二)
  • 3.整数表达式
  • 【Leetcode】104. 二叉树的最大深度
  • 2017年终总结、随想
  • CSS 专业技巧
  • CSS3 变换
  • iOS 系统授权开发
  • Linux下的乱码问题
  • Mocha测试初探
  • passportjs 源码分析
  • php中curl和soap方式请求服务超时问题
  • SAP云平台里Global Account和Sub Account的关系
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 排序算法学习笔记
  • 前端临床手札——文件上传
  • 使用权重正则化较少模型过拟合
  • 为物联网而生：高性能时间序列数据库HiTSDB商业化首发！
  • 学习Vue.js的五个小例子
  • 鱼骨图 - 如何绘制？
  • NLPIR智能语义技术让大数据挖掘更简单
  • 我们雇佣了一只大猴子...
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • $jQuery 重写Alert样式方法
  • （1）(1.13) SiK无线电高级配置（六）
  • （1）(1.9) MSP (version 4.2)
  • （9）目标检测_SSD的原理
  • (NSDate) 时间 (time )比较
  • （动手学习深度学习）第13章 计算机视觉---微调
  • （机器学习-深度学习快速入门）第三章机器学习-第二节：机器学习模型之线性回归
  • （论文阅读31/100）Stacked hourglass networks for human pose estimation
  • (转)C语言家族扩展收藏 (转)C语言家族扩展
  • （转）机器学习的数学基础（1）--Dirichlet分布
  • .equals()到底是什么意思？
  • .NET 3.0 Framework已经被添加到WindowUpdate
  • .NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试（准备篇）
  • .NET 同步与异步 之 原子操作和自旋锁（Interlocked、SpinLock）（九）
  • .Net 转战 Android 4.4 日常笔记（4）--按钮事件和国际化
  • .NET/C# 中设置当发生某个特定异常时进入断点（不借助 Visual Studio 的纯代码实现）
  • @JSONField或@JsonProperty注解使用
  • @transaction 提交事务_【读源码】剖析TCCTransaction事务提交实现细节
  • @Transactional注解下，循环取序列的值，但得到的值都相同的问题
  • [ C++ ] STL---仿函数与priority_queue