jQuery仿途牛网站焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿途牛网站焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿途牛网站焦点图代码</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="lubotu.js"></script>

<style type="text/css">
  *{ margin:0; padding:0; }
  img{ display: block; border:none;}
  ul,li{ list-style: none;}
  .lubo{ width: 100%; min-width:1000px;clear: both; position: relative; height:368px;}
  .lubo_box{ position: relative; width: 100%; height:368px; }
  .lubo_box li{ float: left;position: absolute; top: 0; left: 0; width: 100%; height:368px; opacity: 0;filter:alpha(opacity=0);}
  .lubo_box li a{ display: block;width: 100%;  height: 100%;}

  .lubo_box li img{ width: 100%; height: 368px;}

  /*圆点*/
  .cir_box{ overflow: hidden; position: absolute; z-index: 100;}
  .cir_box li{ float: left; width: 30px; height: 5px; margin:0 5px; cursor: pointer; background: #fff; opacity: 0.8;filter:alpha(opacity=80);}
  .cir_on{ background: #000 !important;}

  /*按钮*/
  .lubo_btn{ position: absolute; width: 100%; top: 140px;}
  .left_btn, .right_btn{ width: 30px; height: 80px; background: #000;opacity: 0.8;filter:alpha(opacity=80); cursor: pointer; color: #fff; line-height: 80px; font-size: 30px; text-align: center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
  .left_btn{ float: left;}
  .right_btn{ float: right;}
</style>
</head>
<body>
<div class="lubo">
  <ul class="lubo_box">
    <li style=" opacity: 1;filter:alpha(opacity=100);"><a href="" style="background:url(1.jpeg) center top no-repeat"></a></li>
    <li><a href="" style="background:url(2.jpeg) center top no-repeat"></a></li>
    <li><a href="" style="background:url(3.jpeg) center top no-repeat"></a></li>
    <li><a href="" style="background:url(4.jpeg) center top no-repeat"></a></li>
    <li><a href="" style="background:url(5.jpeg) center top no-repeat"></a></li>
    <li><a href="" style="background:url(1.jpeg) center top no-repeat"></a></li>
    <li><a href="" style="background:url(2.jpeg) center top no-repeat"></a></li>
    <li><a href="" style="background:url(3.jpeg) center top no-repeat"></a></li>
    <li><a href="" style="background:url(4.jpeg) center top no-repeat"></a></li>
    <li><a href="" style="background:url(5.jpeg) center top no-repeat"></a></li>
  </ul>
</div>

<script type="text/javascript">

$(function(){

    $(".lubo").lubo({

    });

})
</script>
</body>
</html>

JS代码(lubotu.js):

;
	(function($){
	$.fn.lubo=function(options){
	// var defaults={
	//}
// //通过覆盖来传参数// var options=$.extend(defaults,options);
	return this.each(function(){
	var _lubo=jQuery('.lubo');
	var _box=jQuery('.lubo_box');
	var _this=jQuery(this);
	//var luboHei=_box.height();
	var Over='mouseover';
	var Out='mouseout';
	var Click='click';
	var Li="li";
	var _cirBox='.cir_box';
	var cirOn='cir_on';
	var _cirOn='.cir_on';
	var cirlen=_box.children(Li).length;
	//圆点的数量 图片的数量var luboTime=2000;
	//轮播时间var switchTime=400;
	//图片切换时间cir();
	Btn();
	//根据图片的数量来生成圆点function cir(){
	_lubo.append('<ul class="cir_box"></ul>');
	var cir_box=jQuery('.cir_box');
	for(var i=0;
	i<cirlen;
	i++){
	cir_box.append('<li style="" value="'+i+'"></li>');
}
var cir_dss=cir_box.width();
	cir_box.css({
	left:'50%',marginLeft:-cir_dss/2,bottom:'10%'}
);
	cir_box.children(Li).eq(0).addClass(cirOn);
}
//生成左右按钮function Btn(){
	_lubo.append('<div class="lubo_btn"></div>');
	var _btn=jQuery('.lubo_btn');
	_btn.append('<div class="left_btn"><</div><div class="right_btn">></div>');
	var leftBtn=jQuery('.left_btn');
	var rightBtn=jQuery('.right_btn');
	//点击左面按钮leftBtn.bind(Click,function(){
	var cir_box=jQuery(_cirBox);
	var onLen=jQuery(_cirOn).val();
	_box.children(Li).eq(onLen).stop(false,false).animate({
	opacity:0}
,switchTime);
	if(onLen==0){
	onLen=cirlen;
}
_box.children(Li).eq(onLen-1).stop(false,false).animate({
	opacity:1}
,switchTime);
	cir_box.children(Li).eq(onLen-1).addClass(cirOn).siblings().removeClass(cirOn);
}
)//点击右面按钮rightBtn.bind(Click,function(){
	var cir_box=jQuery(_cirBox);
	var onLen=jQuery(_cirOn).val();
	_box.children(Li).eq(onLen).stop(false,false).animate({
	opacity:0}
,switchTime);
	if(onLen==cirlen-1){
	onLen=-1;
}
_box.children(Li).eq(onLen+1).stop(false,false).animate({
	opacity:1}
,switchTime);
	cir_box.children(Li).eq(onLen+1).addClass(cirOn).siblings().removeClass(cirOn);
}
)}
//定时器 int=setInterval(clock,luboTime);
	function clock(){
	var cir_box=jQuery(_cirBox);
	var onLen=jQuery(_cirOn).val();
	_box.children(Li).eq(onLen).stop(false,false).animate({
	opacity:0}
,switchTime);
	if(onLen==cirlen-1){
	onLen=-1;
}
_box.children(Li).eq(onLen+1).stop(false,false).animate({
	opacity:1}
,switchTime);
	cir_box.children(Li).eq(onLen+1).addClass(cirOn).siblings().removeClass(cirOn);
}
// 鼠标在图片上 关闭定时器_lubo.bind(Over,function(){
	clearTimeout(int);
}
);
	_lubo.bind(Out,function(){
	int=setInterval(clock,luboTime);
}
);
	//鼠标划过圆点 切换图片jQuery(_cirBox).children(Li).bind(Over,function(){
	var inde = jQuery(this).index();
	jQuery(this).addClass(cirOn).siblings().removeClass(cirOn);
	_box.children(Li).stop(false,false).animate({
	opacity:0}
,switchTime);
	_box.children(Li).eq(inde).stop(false,false).animate({
	opacity:1}
,switchTime);
}
);
}
);
}
}
)(jQuery);
	/*调用*/
// <script type="text/javascript">// $(function(){
	// $(".lubo").lubo({
	//}
);
	//}
)// </script>/*css样式*/
// <style type="text/css">// *{
	margin:0;
	padding:0;
}
// img{
	display:block;
	border:none;
}
// ul,li{
	list-style:none;
}
// .lubo{
	width:100%;
	clear:both;
	position:relative;
	height:368px;
}
// .lubo_box{
	position:relative;
	width:100%;
	height:368px;
}
// .lubo_box li{
	float:left;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:368px;
	opacity:0;
	filter:alpha(opacity=0);
}
// .lubo_box li img{
	width:100%;
	height:368px;
}
// /*圆点*/
// .cir_box{
	overflow:hidden;
	position:absolute;
	z-index:100;
}
// .cir_box li{
	float:left;
	width:30px;
	height:5px;
	margin:0 5px;
	cursor:pointer;
	background:#fff;
	opacity:0.8;
	filter:alpha(opacity=80);
}
// .cir_on{
	background:#000 !important;
}
// /*按钮*/
// .lubo_btn{
	position:absolute;
	width:100%;
	top:140px;
}
// .left_btn,.right_btn{
	width:30px;
	height:80px;
	background:#000;
	opacity:0.8;
	filter:alpha(opacity=80);
	cursor:pointer;
	color:#fff;
	line-height:80px;
	font-size:30px;
	text-align:center;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
// .left_btn{
	float:left;
}
// .right_btn{
	float:right;
}
// </style>/*html*/
// <div class="lubo">// <ul class="lubo_box">// <li style=" opacity:1;
	filter:alpha(opacity=100);
	"><a href=""><img src="1.jpeg"></a></li>// <li><a href=""><img src="2.jpeg"></a></li>// <li><a href=""><img src="3.jpeg"></a></li>// <li><a href=""><img src="4.jpeg"></a></li>// <li><a href=""><img src="5.jpeg"></a></li>// <li><a href=""><img src="2.jpeg"></a></li>// <li><a href=""><img src="3.jpeg"></a></li>// <li><a href=""><img src="4.jpeg"></a></li>// <li><a href=""><img src="5.jpeg"></a></li>// </ul>// </div>

附件:下载该文件资源,减少时间成本(增值服务)