js嵌套轮播图
$(function(){
var navLi = $(".top_nav").find("li"),
conDiv = $(".top_con").find(".t_con"),
resulte = [],
currentId = "";
//Url地址
var url = window.location.href; //获取url地址
getUrl = url.split("/"); //根据"/"分离url
lastUrl = getUrl[getUrl.length-1]; //获取最后一个rul部分
endUrl = lastUrl.split("#")[lastUrl.split("#").length-1]; //再分离
//伪地址
navLi.each(function(){
currentId = $(this).find("a").attr("href").split("#")[$(this).find("a").attr("href").split("#").length-1];
resulte.push(currentId);
})
//主导航的点击
navLi.off().on("click",function(){
var index = $(this).index(".top_nav li");
navLiClick(index);
outerSlider(index);
});
function navLiClick(index){
navLi.eq(index).addClass("active").siblings().removeClass("active");
conDiv.eq(index).show().siblings().hide();
}
//外层滚动
function outerSlider(num){
var smallBox = $(".top_con").find(".t_con").eq(num),
smallBoxUl = smallBox.find(".small_nav_box ul"),
smallBoxLi = smallBox.find(".small_nav_box li"),
smallBoxMoveCon = smallBox.find(".small_con_box .small_con"),
smallBoxCon = smallBoxMoveCon.find(".small_item"),
smallBoxConWidth = smallBoxCon.outerWidth(true),
smallBoxLiWidth = smallBoxLi.outerWidth(true);
smallBoxLiLength = smallBoxLi.length-1,
smallBoxPrev = smallBox.find(".small_prev"),
smallBoxNext = smallBox.find(".small_next"),
smallBoxTish = 0;
// 重置
firstShow(0);
smallBoxUl.css({left:0})
smallBoxMoveCon.css({left:0},300)
smallBoxLi.eq(0).addClass("active").siblings().removeClass("active");
//上一张
smallBoxPrev.off().click(function(){
if(smallBoxTish > 0){
smallBoxTish--;
}else{
smallBoxTish = smallBoxLiLength;
}
firstShow(smallBoxTish);
})
//下一张
smallBoxNext.off().click(function(){
if(smallBoxTish < smallBoxLiLength){
smallBoxTish++;
}else{
smallBoxTish = 0;
}
firstShow(smallBoxTish);
})
//小图标点击
smallBoxLi.off().click(function(){
var k = smallBoxLi.index(this);
firstShow(k);
smallBoxTish = k;
})
function firstShow(j){
if(j == 0 || j == 1){
smallBoxUl.stop().animate({left:0},300)
}else if(j == smallBoxLiLength-1 || j == smallBoxLiLength){
smallBoxUl.stop().animate({left:-smallBoxLiWidth*(smallBoxLiLength-4)},300)
}else{
smallBoxUl.stop().animate({left:-smallBoxLiWidth*(j-2)},300)
}
smallBoxLi.eq(j).addClass("active").siblings().removeClass("active");
smallBoxMoveCon.stop().animate({left:-smallBoxConWidth*j},300)
smallBoxCon.eq(j).addClass("active").siblings().removeClass("active");
innerSlider(j);
}
//内层滚动
function innerSlider(m){
var programBox = smallBoxCon.eq(m),
programBoxItemMove = programBox.find(".item_program ul"),
programBoxItem = programBox.find(".item_program li"),
programBoxItemnNum = programBox.find(".item_num li"),
programBoxItemWidth = programBoxItem.outerWidth(true),
programBoxPrev = programBox.find(".program_prev"),
programBoxNext = programBox.find(".program_next"),
programBoxThis = 0,
programTimer = null,
programBoxItemLength = programBoxItem.length-1;
//重置
programBoxItemMove.css({left:0})
programBoxItemnNum.eq(0).addClass("active").siblings().removeClass("active");
setTimeout(function(){
autoTime();
},10)
programBox.hover(function(){
if(programTimer){
clearInterval(programTimer);
}
},function(){
autoTime();
})
function autoTime(){
programTimer = setInterval(programlRight,3000)
}
programBoxPrev.on("click",programlLeft);
programBoxNext.on("click",programlRight);
function programlLeft(){
if(programBoxThis > 0){
programBoxThis--;
}else{
programBoxThis = programBoxItemLength;
}
secondShow(programBoxThis);
}
function programlRight(){
if(programBoxThis < programBoxItemLength){
programBoxThis++;
}else{
programBoxThis = 0;
}
secondShow(programBoxThis);
}
programBoxItemnNum.click(function(){
var p = programBoxItemnNum.index($(this));
secondShow(p);
programBoxThis = p;
})
function secondShow(l){
programBoxItemMove.stop().animate({left:-programBoxItemWidth*l},300);
programBoxItemnNum.eq(l).addClass("active").siblings().removeClass("active");
}
}
}
//循环Url
for(var e = 0; e < navLi.length; e++){
if(resulte[e] == endUrl){
navLiClick(e);
outerSlider(e);
return false;
}else if(endUrl == "food2.shtml" || endUrl == "menu"){
outerSlider(0);
return false;
}
}
})
<div class="content">
<div class="top_nav">
<ul>
<li class="active"><a href="#web1">1</a></li>
<li><a href="#web2">2</a></li>
</ul>
</div>
<div class="top_con">
<div class="t_con1 t_con" style="display:block;">
<div class="small_nav_box">
<div class="small_nav">
<ul>
<li class="active">1<i></i></li>
<li>2<i></i></li>
<li>3<i></i></li>
<li>4<i></i></li>
<li>5<i></i></li>
<li>6<i></i></li>
<li>7<i></i></li>
</ul>
</div>
<a href="javascript:;" class="small_prev"><</a>
<a href="javascript:;" class="small_next">></a>
</div>
<div class="small_con_box">
<div class="small_con">
<div class="small_item active">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_1.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_2.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_3.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_4.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_5.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_6.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
<div class="small_item">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_2.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_3.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_4.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_5.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_6.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
<div class="small_item">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_3.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_4.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_5.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_6.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
<div class="small_item">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_4.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_5.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_6.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
<div class="small_item">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_5.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_6.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
<div class="small_item">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_6.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
<div class="small_item">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
</div>
</div>
</div>
<div class="t_con2 t_con">
<div class="small_nav_box">
<div class="small_nav">
<ul>
<li class="active">1<i></i></li>
<li>2<i></i></li>
<li>3<i></i></li>
<li>4<i></i></li>
<li>5<i></i></li>
<li>6<i></i></li>
<li>7<i></i></li>
</ul>
</div>
<a href="javascript:;" class="small_prev"><</a>
<a href="javascript:;" class="small_next">></a>
</div>
<div class="small_con_box">
<div class="small_con">
<div class="small_item active">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_1.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_2.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_3.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_4.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_5.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_6.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
<div class="small_item">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_2.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_3.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_4.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_5.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_6.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
<div class="small_item">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_3.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_4.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_5.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_6.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
<div class="small_item">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_4.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_5.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_6.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
<div class="small_item">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_5.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_6.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
<div class="small_item">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_6.jpg" alt=""></li>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
<div class="small_item">
<div class="item_program">
<ul>
<li><img src="data:images/line/family/equip4_7.jpg" alt=""></li>
</ul>
</div>
<div class="item_num">
<ul>
<li class="active"></li>
</ul>
</div>
<a href="javascript:;" class="program_prev"></a>
<a href="javascript:;" class="program_next"></a>
</div>
</div>
</div>
</div>
</div>
</div>
.content{width:800px;height:600px;border:1px solid red;margin:0 auto;}
.content .top_nav{width:800px;height:100px;}
.content .top_nav li{float:left;}
.content .top_nav li a{display:block;width:400px;height:100px;line-height:100px;text-align:center;color:orange;background-color:#fff;font-size:30px;}
.content .top_nav li.active a{color:#fff;background-color:orange;}
.top_con{width:800px;height:500px;background-color:#000;}
.top_con .t_con{display:none;position:relative;overflow: hidden;}
.top_con .t_con1{width:800px;height:500px;background-color:#666;}
.top_con .t_con2{width:800px;height:500px;background-color:#aaa;}
.small_nav_box{width:800px;height:50px;overflow:hidden;position:relative;margin-top:25px;}
.small_nav_box .small_nav{width:700px;height:50px;overflow:hidden;position:absolute;left:50px;}
.small_nav_box ul{width:10000px;height:50px;overflow:hidden;left:0px;position:absolute;}
.small_nav_box ul li{float:left;width:120px;height:50px;margin-right:20px;position:relative;background-color:#fff;cursor:pointer;text-align:center;line-height:50px;font-size:30px;}
.small_nav_box ul li.active i{width:114px;height:44px;border:3px solid red;position:absolute;left:0px;top:0px;}
.small_nav_box .small_prev{position:absolute;left:0px;top:0px;width:50px;height:50px;background-color:blue;color:#fff;text-align:center;line-height:50px;}
.small_nav_box .small_next{position:absolute;right:0px;top:0px;width:50px;height:50px;background-color:blue;color:#fff;text-align:center;line-height:50px;}
.small_con_box{width:800px;height:400px;background-color:red;margin-top:25px;overflow:hidden;position:relative;}
.small_con_box .small_con{width:10000px;height:400px;position:absolute;left:0px;}
.small_con_box .small_con .small_item{float:left;width:800px;height:400px;margin-right:10px;position:relative;text-align:center;}
.small_con_box .small_con .small_item i{width:780px;height:380px;border:10px solid #fff;position:absolute;left:0px;top:0px;}
.item_program {width:800px;height:400px;overflow:hidden;position:relative;}
.item_program ul {width:99999px;left:0px;position:absolute;}
.item_program ul li{float:left;width:800px;height:400px;}
.item_program img{width:800px;height:400px;}
.item_num{width:100%;position:absolute;left:0px;bottom:10px;text-align:center;}
.item_num ul{display:inline-block;*display:inline;zoom:;}
.item_num ul li{float:left;width:15px;height:15px;border-radius:15px;background:orange;margin-right:10px;}
.item_num ul li.active{background:red;}
.small_item .program_prev{position:absolute;left:0px;top:40%;width:60px;height:60px;background-color:#fff;}
.small_item .program_next{position:absolute;right:0px;top:40%;width:60px;height:60px;background-color:#fff;}
js嵌套轮播图的更多相关文章
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- js编写轮播图，广告弹框
1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...
- js实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
随机推荐
- Just Cause系列游戏品鉴
没错, 这又是一个游戏点评, 因为实在没地写了, 想起来我还欠JC系列许多售后评价, 就专门写了这篇blog来总结下JC系列的特色, 以及它最新的游戏引擎apex, JC4月初的时候发布的, 虽然和3 ...
- MongoDB（六）：使用C#代码连接并读取MongoDB数据库
在上篇文章中,讲解了MongoDB的基本操作,包括增.删.改.查,但是这些操作都是在命令行模式下进行的,这篇文章中讲解如何使用C#程序连接到MongoDB数据库,并且读取里面的文档. 一.新建项目 新 ...
- Ajax-ajax实例4-多级联动菜单
项目结构: 项目运行: 技术要点: 1.4.1 技术要点在分析具体的实现代码之前,先介绍一下本例的几个技术要点.1 ．选项的动态创建与删除document 对象的 createElement 方法可以 ...
- Message Code 【27796】 Failed to connect to server 'hostname';port_ld': 'reason'.
Message Code [27796] Failed to connect to server 'hostname';port_ld': 'reason'.Unable to connect to ...
- 【转】 PreTranslateMessage作用和使用方法
PreTranslateMessage作用和使用方法 PreTranslateMessage是消息在送给TranslateMessage函数之前被调用的,绝大多数本窗口的消息都要通过这里,比较常用, ...
- Spring 4 官方文档学习（十一）Web MVC 框架之multipart（文件上传）支持
http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-multipart 1.简 ...
- nodejs基础 -- Stream流
nodejs 的 Stream 是一个抽象接口,node中有很多对象实现了这个接口.例如,对http服务器发起请求的request对象就是一个Stream,还有stdout(标准输出)也是一个Stre ...
- R语言绘图边框的单位
在R语言中指定画图边框时,通常使用两种单位, lines 和 inches 当然,这两个单位之间是可以相互转换的,那么 1 inch = ? line 答案是1 inches = 5 lines 下面 ...
- ceRNA 调控机制
ceRNA 不同于mRNA, lncRNA, ncRNA 等概念,其指的既不是某一种类型的RNA(比如mRNA, lncRNA), 也不是某一类的RNA(如ncRNA); ceRNA 其实指的是不同种 ...
- pushlet 之 Pushlet使用手把手实例
Pushlet(一种comet 架构的实现)是基于Servlet 机制,数据从server端的Java 对象直接推送(push) 到客户端浏览器的(动态)HTML 页面,而无需任何Java app ...