juery实战3：腾讯新闻、腾讯课堂自动轮播
2015-06-06 12:21
716 查看
juery实战3：腾讯新闻、腾讯课堂自动轮播
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style>
*{margin:0px;padding:0px;}
body{background:url("images/bg.png");font-size:12px;font-family:"微软雅黑";color:#888;}
img{border:0;}
{width:690px;height:520px;}
.mini{width:698px;height:500px;margin:22px auto;}
.mini .m-header{width:698px;height:30px;}/*由于下面两个头部的元素用到浮动定位，所以这里必须给出宽高，否则会影响下面元素的布局*/
.mini .m-header a{float:left;}
.m-header span{float:left;line-height:30px;margin-left:20px;}/*line-height:30px控制行高保证和图片水平对齐，margin-left:20px;和图片水平距离20像素*/
.mini .m-nav{width:698px;height:32px;margin-top:13px;}
.mini .m-nav ul li{list-style:none;float:left;line-height:32px;padding:0px 16px;font-size:14px;color:#0b3b8c;cursor:pointer;}
.mini .m-nav ul .sel{background:url("images/icon.png") no-repeat 25px -433px;color:#000;font-weight:bold;}
.mini .m-content{width:394px;height:698px;margin-top:10px;}
.mini .m-content .list{display:none;}
.mini .m-content .show{display:block;}
</style>
<body>
<!--腾讯新闻开始-->
<div id="con">
<div class="mini"> <!---->
<div class="m-header">
<a href="#">
<img src="images/minilogo.png" alt="" width="150px" height="30px" />
</a>
<span>12月11日 周四 六安市 小雨5℃</span>
</div>
<div class="m-nav">
<ul id="m-ul">
<li class="sel">新闻</li><!--刷新页面默认选中的效果-->
<li >视频</li>
<li >财经</li>
<li >娱乐</li>
<li >时尚</li>
<li >体育</li>
<li >科技</li>
<li >汽车</li>
<li >游戏</li>
<li >军事</li>
<li >微视</li>
</ul>
</div>
<div class="m-content">
<div class="list show"><img src="images/1.jpg" alt="" width="674px" height="394px" /></div>
<div class="list"><img src="images/2.jpg" alt="" width="674px" height="394px" /></div>
<div class="list"><img src="images/3.jpg" alt="" width="674px" height="394px" /></div>
</div>
</div>
</div>
<!--腾讯新闻结束-->
<!--自动轮播图开始-->
<script text="text/javascript" src="js/jquery-1.11.1.min.js"> </script>
<script text="text/javascript">
$("#m-ul").find("li").hover(function(){
$(this).addClass("sel").siblings().removeClass("sel");
var _index=$("this").index();
$(".list").hide().eq(_index).show();//联动事件，上面样式改变的同时，先隐藏类名为.list的所有Li标签，再根据索引到索引值来控制this样式的改变。
});
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style>
*{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;height:1500px;}
img{border:0;}
/*banner start*/
.banner{width:100%;height:350px;margin-top:px;}
.banner .b_adv{width:1200px;height:50px;margin:0 auto;position:relative;}
.banner .b_adv a{position:absolute;top:0;left:220px;}
.banner .b_bg{height:300px;background:#4a4d9c;z-index:1;}
.banner .b_bg .b_con{width:1200px;height:300px;margin:0 auto;
position:relative;z-index:2;
}
/*focus start*/
.banner .b_bg .b_con .focus{width:760px;height:300px;
position:absolute;left:220px;top:0;z-index:3;overflow:hidden;}
.banner .b_bg .b_con .focus .f_pic{position:relative;}
.banner .b_bg .b_con .focus .f_pic li{list-style:none;}
.banner .b_bg .b_con .focus .f_btn{height:24px;
position:absolute;bottom:10px;left:330px;
/*left:50%;margin-left:-70px;*/
}
.banner .b_bg .b_con .focus .f_btn ul{background:#000;display:inline-block;padding:7px 28px;opacity:0.4;filter:alpha(opacity=40); border-radius:15px;}
.banner .b_bg .b_con .focus .f_btn ul li{width:8px;height:8px;border-radius:10px;border:1px solid #fff;float:left;list-style:none;margin:0 3px;}
.banner .b_bg .b_con .focus .f_btn ul .no{background:#fff;}
.banner .b_bg .b_con .focus .f_ear{width:46px;height:70px;display:block;background:url("images/icon.png") no-repeat;
position:absolute;display:none;
}
.banner .b_bg .b_con .focus:hover .f_ear{display:block;}
.banner .b_bg .b_con .focus .pre{left:10px;top:110px;background-position:-74px 0;}
.banner .b_bg .b_con .focus .pre:hover{background-position:-172px 0;}
.banner .b_bg .b_con .focus .next{right:10px;top:110px;background-position:-123px 0;}
.banner .b_bg .b_con .focus .next:hover{background-position:0 -57px;}
/*end focus*/
.clear{clear:both;}
</style>
</head>
<body>
<!--banner start-->
<div class="banner">
<div class="b_bg">
<div class="b_con">
<!--focus start-->
<div class="focus">
<ul class="f_pic">
<li>
<a href="#">
<img src="images/banner-3.jpg" alt="潭州学院" width="760" height="300" />
</a>
</li>
<li>
<a href="#">
<img src="images/banner-1.jpg" alt="潭州学院" width="760" height="300" />
</a>
</li>
<li>
<a href="#">
<img src="images/banner-2.jpg" alt="潭州学院" width="760" height="300" />
</a>
</li>
<li>
<a href="#">
<img src="images/banner-4.jpg" alt="潭州学院" width="760" height="300" />
</a>
</li>
<li>
<a href="#">
<img src="images/banner-5.jpg" alt="潭州学院" width="760" height="300" />
</a>
</li>
</ul>
<div class="f_btn">
<ul>
<li class="no" data-color="#4E4D9B"></li>
<li data-color="#A136D2"></li>
<li data-color="#6766CE"></li>
<li data-color="#563481"></li>
<li data-color="#009DE4"></li>
</ul>
</div>
<a href="#" class="f_ear pre"></a>
<a href="#" class="f_ear next"></a>
</div>
<!--end focus-->
</div>
</div>
</div>
<!--end banner-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 焦点图切换
var index = 0;
// 轮展图切换
$(".f_btn").find("li").mouseover(function(){
// 控制小按钮
$(this).addClass("no").siblings().removeClass("no");
var _index = $(this).index(); // 获取当前选中的索引
index = _index; // 重新赋值
$(".f_pic").find("li").eq(_index).fadeIn("slow").siblings().hide(); // 联动切换
// 切换背景颜色
var background = $(this).data("color");
$(this).parents(".b_bg").css("background",background);
});
// 下一张
$(".next").click(function(){
index++;
var length = $(".f_pic").find("li").length;
if(index >= length){
index = 0;
}
// 切换背景颜色
var background = $(".f_btn").find("li").eq(index).data("color");
$(this).parents(".b_bg").css("background",background);
// 联动小按钮
$(".f_btn").find("li").eq(index).addClass("no").siblings().removeClass("no");
$(".f_pic").find("li").eq(index).fadeIn("slow").siblings().hide(); // 联动切换
});
// 上一张
$(".pre").click(function(){
index--;
var length = $(".f_pic").find("li").length;
if(index < 0){
index = length - 1;
}
// 切换背景颜色
var background = $(".f_btn").find("li").eq(index).data("color");
$(this).parents(".b_bg").css("background",background);
// 联动小按钮
$(".f_btn").find("li").eq(index).addClass("no").siblings().removeClass("no");
$(".f_pic").find("li").eq(index).fadeIn("slow").siblings().hide(); // 联动切换
});
// 自动切换,一般不使用setTimeout只执行一次
setInterval(function(){
index++;
var length = $(".f_pic").find("li").length;
if(index >= length){
index = 0;
}
// 切换背景颜色
var background = $(".f_btn").find("li").eq(index).data("color");
$(".b_bg").css("background",background);
// 联动小按钮
$(".f_btn").find("li").eq(index).addClass("no").siblings().removeClass("no");
$(".f_pic").find("li").eq(index).fadeIn("slow").siblings().hide(); // 联动切换
},2000);
});
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style>
*{margin:0px;padding:0px;}
body{background:url("images/bg.png");font-size:12px;font-family:"微软雅黑";color:#888;}
img{border:0;}
{width:690px;height:520px;}
.mini{width:698px;height:500px;margin:22px auto;}
.mini .m-header{width:698px;height:30px;}/*由于下面两个头部的元素用到浮动定位，所以这里必须给出宽高，否则会影响下面元素的布局*/
.mini .m-header a{float:left;}
.m-header span{float:left;line-height:30px;margin-left:20px;}/*line-height:30px控制行高保证和图片水平对齐，margin-left:20px;和图片水平距离20像素*/
.mini .m-nav{width:698px;height:32px;margin-top:13px;}
.mini .m-nav ul li{list-style:none;float:left;line-height:32px;padding:0px 16px;font-size:14px;color:#0b3b8c;cursor:pointer;}
.mini .m-nav ul .sel{background:url("images/icon.png") no-repeat 25px -433px;color:#000;font-weight:bold;}
.mini .m-content{width:394px;height:698px;margin-top:10px;}
.mini .m-content .list{display:none;}
.mini .m-content .show{display:block;}
</style>
<body>
<!--腾讯新闻开始-->
<div id="con">
<div class="mini"> <!---->
<div class="m-header">
<a href="#">
<img src="images/minilogo.png" alt="" width="150px" height="30px" />
</a>
<span>12月11日 周四 六安市 小雨5℃</span>
</div>
<div class="m-nav">
<ul id="m-ul">
<li class="sel">新闻</li><!--刷新页面默认选中的效果-->
<li >视频</li>
<li >财经</li>
<li >娱乐</li>
<li >时尚</li>
<li >体育</li>
<li >科技</li>
<li >汽车</li>
<li >游戏</li>
<li >军事</li>
<li >微视</li>
</ul>
</div>
<div class="m-content">
<div class="list show"><img src="images/1.jpg" alt="" width="674px" height="394px" /></div>
<div class="list"><img src="images/2.jpg" alt="" width="674px" height="394px" /></div>
<div class="list"><img src="images/3.jpg" alt="" width="674px" height="394px" /></div>
</div>
</div>
</div>
<!--腾讯新闻结束-->
<!--自动轮播图开始-->
<script text="text/javascript" src="js/jquery-1.11.1.min.js"> </script>
<script text="text/javascript">
$("#m-ul").find("li").hover(function(){
$(this).addClass("sel").siblings().removeClass("sel");
var _index=$("this").index();
$(".list").hide().eq(_index).show();//联动事件，上面样式改变的同时，先隐藏类名为.list的所有Li标签，再根据索引到索引值来控制this样式的改变。
});
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style>
*{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;height:1500px;}
img{border:0;}
/*banner start*/
.banner{width:100%;height:350px;margin-top:px;}
.banner .b_adv{width:1200px;height:50px;margin:0 auto;position:relative;}
.banner .b_adv a{position:absolute;top:0;left:220px;}
.banner .b_bg{height:300px;background:#4a4d9c;z-index:1;}
.banner .b_bg .b_con{width:1200px;height:300px;margin:0 auto;
position:relative;z-index:2;
}
/*focus start*/
.banner .b_bg .b_con .focus{width:760px;height:300px;
position:absolute;left:220px;top:0;z-index:3;overflow:hidden;}
.banner .b_bg .b_con .focus .f_pic{position:relative;}
.banner .b_bg .b_con .focus .f_pic li{list-style:none;}
.banner .b_bg .b_con .focus .f_btn{height:24px;
position:absolute;bottom:10px;left:330px;
/*left:50%;margin-left:-70px;*/
}
.banner .b_bg .b_con .focus .f_btn ul{background:#000;display:inline-block;padding:7px 28px;opacity:0.4;filter:alpha(opacity=40); border-radius:15px;}
.banner .b_bg .b_con .focus .f_btn ul li{width:8px;height:8px;border-radius:10px;border:1px solid #fff;float:left;list-style:none;margin:0 3px;}
.banner .b_bg .b_con .focus .f_btn ul .no{background:#fff;}
.banner .b_bg .b_con .focus .f_ear{width:46px;height:70px;display:block;background:url("images/icon.png") no-repeat;
position:absolute;display:none;
}
.banner .b_bg .b_con .focus:hover .f_ear{display:block;}
.banner .b_bg .b_con .focus .pre{left:10px;top:110px;background-position:-74px 0;}
.banner .b_bg .b_con .focus .pre:hover{background-position:-172px 0;}
.banner .b_bg .b_con .focus .next{right:10px;top:110px;background-position:-123px 0;}
.banner .b_bg .b_con .focus .next:hover{background-position:0 -57px;}
/*end focus*/
.clear{clear:both;}
</style>
</head>
<body>
<!--banner start-->
<div class="banner">
<div class="b_bg">
<div class="b_con">
<!--focus start-->
<div class="focus">
<ul class="f_pic">
<li>
<a href="#">
<img src="images/banner-3.jpg" alt="潭州学院" width="760" height="300" />
</a>
</li>
<li>
<a href="#">
<img src="images/banner-1.jpg" alt="潭州学院" width="760" height="300" />
</a>
</li>
<li>
<a href="#">
<img src="images/banner-2.jpg" alt="潭州学院" width="760" height="300" />
</a>
</li>
<li>
<a href="#">
<img src="images/banner-4.jpg" alt="潭州学院" width="760" height="300" />
</a>
</li>
<li>
<a href="#">
<img src="images/banner-5.jpg" alt="潭州学院" width="760" height="300" />
</a>
</li>
</ul>
<div class="f_btn">
<ul>
<li class="no" data-color="#4E4D9B"></li>
<li data-color="#A136D2"></li>
<li data-color="#6766CE"></li>
<li data-color="#563481"></li>
<li data-color="#009DE4"></li>
</ul>
</div>
<a href="#" class="f_ear pre"></a>
<a href="#" class="f_ear next"></a>
</div>
<!--end focus-->
</div>
</div>
</div>
<!--end banner-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 焦点图切换
var index = 0;
// 轮展图切换
$(".f_btn").find("li").mouseover(function(){
// 控制小按钮
$(this).addClass("no").siblings().removeClass("no");
var _index = $(this).index(); // 获取当前选中的索引
index = _index; // 重新赋值
$(".f_pic").find("li").eq(_index).fadeIn("slow").siblings().hide(); // 联动切换
// 切换背景颜色
var background = $(this).data("color");
$(this).parents(".b_bg").css("background",background);
});
// 下一张
$(".next").click(function(){
index++;
var length = $(".f_pic").find("li").length;
if(index >= length){
index = 0;
}
// 切换背景颜色
var background = $(".f_btn").find("li").eq(index).data("color");
$(this).parents(".b_bg").css("background",background);
// 联动小按钮
$(".f_btn").find("li").eq(index).addClass("no").siblings().removeClass("no");
$(".f_pic").find("li").eq(index).fadeIn("slow").siblings().hide(); // 联动切换
});
// 上一张
$(".pre").click(function(){
index--;
var length = $(".f_pic").find("li").length;
if(index < 0){
index = length - 1;
}
// 切换背景颜色
var background = $(".f_btn").find("li").eq(index).data("color");
$(this).parents(".b_bg").css("background",background);
// 联动小按钮
$(".f_btn").find("li").eq(index).addClass("no").siblings().removeClass("no");
$(".f_pic").find("li").eq(index).fadeIn("slow").siblings().hide(); // 联动切换
});
// 自动切换,一般不使用setTimeout只执行一次
setInterval(function(){
index++;
var length = $(".f_pic").find("li").length;
if(index >= length){
index = 0;
}
// 切换背景颜色
var background = $(".f_btn").find("li").eq(index).data("color");
$(".b_bg").css("background",background);
// 联动小按钮
$(".f_btn").find("li").eq(index).addClass("no").siblings().removeClass("no");
$(".f_pic").find("li").eq(index).fadeIn("slow").siblings().hide(); // 联动切换
},2000);
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- juery实战4：封装拖拽插件
- juery实战5：封装表单验证插件+正则表达式验证器
- Some Questions about eXtremeDB Log
- C#从基于FTPS的FTP server下载数据 (FtpWebRequest 的使用)SSL 加密
- 浅析extendedLayout, automaticallyAdjustsScrollViewInsets, extendedLayoutIncludesOpaqueBars
- String、StringBuilder、 StringBuffer 深入分析 源码解析
- 设计模式之九：建造者模式(Builder)
- Windows 10 Build 10134安装上手操作体验视频
- itk::InvalidRequestedRegionError
- UIView属性
- 【Java GUI】Java GUI基础
- UITableView基础语法
- UILabel基础语法
- arduino小车马达原理
- UIImage基础语法
- 容器适配器之queue
- UGUI-血条
- arduino小车
- UGUI 获得点击物体
- 我的红外arduino链接，！！！！