图片轮播
1、样式
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<style> #banner { padding: 0px; width: 404px; height: 260px; } .slides { width: 404px; height: 260px; overflow: hidden; position: relative; } .slide-pic { margin: 0px; padding: 0px; width: 404px; overflow: hidden; } .slide-pic img { width: 404px; height: 260px; } .slide-pic li { display: none; } .slide-pic li.cur { display: block; } .slide-li { z-index: 1; margin: 0px; padding: 0px; left: 40%; bottom: 30px; position: absolute; } .slide-li li { width: 111.5px; height: 10px; float: left; /*margin-right: 3px;*/ border-radius: 50%; overflow: hidden; list-style: none; } .slide-li a { height: 15px; color: #000; font-size: 12px; display: block; } .slide-li a:hover { color: #d7d7d7; text-decoration: none; } .op li { border: 2px solid transparent; background: #d7d7d7; filter: alpha(opacity=100); opacity: 1; width: 10px; margin-right: 5px; } .op li.cur { border-color: #48b2e2; } .slide-txt { z-index: 0; width: 100%; background: rgba(0, 0, 0,0.5); height: 47px; bottom: 0px; left: 0px; } .slide-txt li { text-align: center; padding-top: 25px; height: 20px; width: 100%; } .slide-txt li a { font-size: 14px; color: white; text-decoration: none; } .slide-txt span { /*display: none;*/ } .news_img .wenhuaBG { position: absolute; top: 0px; } .wenhua_cont { width: 680px; height: 150px; overflow: hidden; line-height: 29px; position: absolute; left: 125px; top: 83px; color: #735440; } .cont_box3 .tit_border { border-top: solid #530b00 7px; height: 11px; border-bottom: dotted #530b00 1px; margin-bottom: 10px; } .titcont { height: 65px; } .cont_box3 { height: 390px; width: 1200px; padding-top: 35px; } .product_cont { width: 915px; } .cont_box3 .news_what { width: 252px; float: right; } .cont_box3 .news_what .imgps { margin-bottom: 10px; } .cont_box3 .news_what p a { color: #735440; background: url("../images/home_33.jpg") no-repeat left; padding-left: 15px; line-height: 28px; } .cont_box3 .news_what .imgps a { background: none; padding: 0px; } .box { width: 100%; margin: 0 auto; position: relative; overflow: hidden; _height: 100%; } .picbox { width: 100%; height: 285px; overflow: hidden; position: relative; } .piclist { height: 285px; position: absolute; left: 0px; top: 0px; } .piclist li { /*margin-right:40px;*/ padding: 5px; float: left; width: 212px; overflow: hidden; } .piclist img { width: 211px; height: 194px; } .piclist li h4 { font-size: 14px; line-height: 35px; padding-top: 10px; } .piclist li h4 a { color: #530b00; } .piclist li img:hover { box-shadow: 5px 5px 5px #ccc; } .piclist li p { color: #735440; font-size: 12px; } .swaplist { position: absolute; left: -3000px; top: 0px; } .og_prev, .og_next { width: 30px; height: 50px; background: url(../images/icon.png) no-repeat; background: url(../images/icon_ie6.png) no-repeat\9; position: absolute; top: 75px; z-index: 99; cursor: pointer; filter: alpha(opacity=70); opacity: 0.7; } .og_prev { background-position: 0 -60px; left: 4px; } .og_next { background-position: 0 0; right: 4px; } </style>
2、html
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div class="slides"> <ul class="slide-pic"> <li class="" style="display: none;"> <a href="" target="_blank"> <img alt="" src="./明蜀王陵_files/201507211707196638.jpg"> </a> </li> <li class="" style="display: none;"> <a href="" target="_blank"> <img alt="" src="./明蜀王陵_files/201508262121384035.png"> </a> </li> <li class="cur" style="display: list-item;"> <a href="" target="_blank"> <img alt="" src="./明蜀王陵_files/201507211706431326.jpg"> </a> </li> <li class="" style="display: none;"> <a href="" target="_blank"> <img alt="" src="./明蜀王陵_files/201507211706385076.jpg"> </a> </li> <li class="" style="display: none;"> <a href="" target="_blank"> <img alt="" src="./明蜀王陵_files/201507211706310076.jpg"> </a> </li> </ul> <ul class="slide-li op"> <li class=""></li> <li class=""></li> <li class="cur"></li> <li class=""></li> <li class=""></li> </ul> <ul class="slide-li slide-txt"> <li class=""><a href="http://shu.everythingnewell.com/main.aspx#">ddd</a></li> <li class=""><a href="http://shu.everythingnewell.com/main.aspx#">fdfd</a></li> <li class="cur"><a href="http://shu.everythingnewell.com/main.aspx#">fdf</a></li> <li class=""><a href="http://shu.everythingnewell.com/main.aspx#">fd</a></li> <li class=""><a href="http://shu.everythingnewell.com/main.aspx#">fdf</a></li> </ul> </div>
3、js
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
jQuery(function ($) { $(".slide-pic li:first").addClass("cur").show(); $(".slide-li li:first").addClass("cur").show(); if ($(".slide-pic").length > 0) { var defaultOpts = { interval: 3000, fadeInTime: 300, fadeOutTime: 200 }; var _titles = $("ul.slide-txt li"); var _titles_bg = $("ul.op li"); //ol var _bodies = $("ul.slide-pic li"); var _count = _titles.length; var _current = 0; var _intervalID = null; var stop = function () { window.clearInterval(_intervalID); }; var slide = function (opts) { if (opts) { _current = opts.current || 0; } else { _current = (_current >= (_count - 1)) ? 0 : (++_current); }; _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function () { _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime); _bodies.removeClass("cur").eq(_current).addClass("cur"); }); _titles_bg.removeClass("cur").eq(_current).addClass("cur"); //_titles.removeClass("cur").eq(_current).addClass("cur"); _titles.hide().eq(_current).show(); }; var go = function () { stop(); _intervalID = window.setInterval(function () { slide(); }, defaultOpts.interval); }; var itemMouseOver = function (target, items) { stop(); var i = $.inArray(target, items); slide({ current: i }); }; _titles_bg.hover(function () { if ($(this).attr('class') != 'cur') { itemMouseOver(this, _titles_bg); } else { stop(); } }, go); _bodies.hover(stop, go); go(); } });
新闻上下滚动
1、样式
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<style type="text/css"> .renav { width: 200px; height: 40px; line-height: 40px; overflow: hidden; } .renav ul { padding: 0px; } .renav ul li { list-style: none; color: white; } .renav ul li a { font-size: 14px; list-style: none; color: white; } .renav ul li a:hover { color: #48b2e2; } .renav li { height: 40px; } </style>
2、html
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div class="renav"> <ul style="margin-top: 0px;"> <li><a>你好</a></li> <li><a>成都</a></li> <li><a>四川</a></li> <li><a>眉山</a></li> <li><a>乐山</a></li> <li><a>资阳</a></li> <li><a>简阳</a></li> <li><a>水库</a></li> </ul> </div>
3、js
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<script> $(function () { var $this = $(".renav"); var scrollTimer; $this.hover(function () { clearInterval(scrollTimer); }, function () { scrollTimer = setInterval(function () { scrollNews($this); }, 2000); }).trigger("mouseout"); }); function scrollNews(obj) { var $self = obj.find("ul:first"); var lineHeight = $self.find("li:first").height(); $self.animate({ "margin-top": -lineHeight + "px" }, 600, function () { $self.css({ "margin-top": "0px" }).find("li:first").appendTo($self); }) } </script>