代码片段 1
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
- <script type="text/javascript">
- $(function() {
- var page = 1; // 当前第一页
- var i = 4; // 一页放 4 个 li
- var $parent = $('.v_show');
- var $v_show = $parent.find('ul.v_content_list');
- var $v_content = $parent.find('div.v_content');
- var $v_width = $v_content.width();
- var len = $v_show.find('li').length;
- var page_count = Math.ceil(len / i); // 计算总共页数
- function nextscroll() {
- if (!$v_show.is(':animated')) { // 如果不在运动中
- if (page == page_count) {
- $v_show.animate({
- left: '0'
- }, 'slow'); // 回到第一页
- page = 1;
- } else {
- $v_show.animate({
- left: '-=' + $v_width
- }, 'slow'); // 按一页的宽度滚动
- page++;
- }
- $parent.find('span').eq((page - 1)).addClass('current') // 圆点一起滚
- .siblings().removeClass('current');
- }
- }
- function prevscroll() {
- if (!$v_show.is(':animated')) { // 如果不在运动中
- if (page == 1) {
- $v_show.animate({
- left: '-=' + $v_width * (page_count - 1)
- }, 'slow'); //
- page = page_count;
- } else {
- $v_show.animate({
- left: '+=' + $v_width
- }, 'slow'); // 按一页的宽度滚动
- page--;
- }
- $parent.find('span').eq((page - 1)).addClass('current') // 圆点一起滚
- .siblings().removeClass('current');
- }
- }
- $('.next').on('click', nextscroll);
- $('.prev').on('click', prevscroll);
- // 定时器
- runscroll();
- var interval = null;
- function runscroll() {
- interval = setInterval(nextscroll, '3000');
- }
- $('.prev,.next,.v_content').hover(function(){
- clearInterval(interval);
- },function() {
- runscroll();
- })
- });
- </script>
- <style>
- body {
- background: #f2f2f4;
- }
- .v_show {
- width: 960px;
- margin: 20px auto;
- padding: 20px;
- background: #FFF;
- }
- .v_captian {
- height: 44px;
- position: relative;
- border-bottom: 1px solid #E5E5E5;
- }
- .v_captian h2 {
- font: bold 24px/32px "微软雅黑", "microsoft yahei", "microsoft sans serif";
- margin: 0 20px 0 0;
- float: left;
- color: #404040;
- }
- .hignlight_tip span {
- float: left;
- width: 8px;
- height: 8px;
- border-radius: 4px;
- background: #CBDAE2;
- margin: 10px 6px 0 0;
- cursor: pointer;
- }
- .hignlight_tip span.current {
- background: #0093C9;
- }
- .change_btn {
- float: left;
- font: 14px/30px "微软雅黑", "microsoft yahei", "microsoft sans serif";
- color: #4CB1FF;
- margin-left: 10px;
- }
- .change_btn span {
- cursor: pointer;
- margin-left: 5px;
- }
- .change_btn span:hover {
- color: #026E92;
- }
- .v_captian em {
- float: right;
- }
- .v_content {
- width: 100%;
- overflow: hidden;
- height: 200px;
- position: relative;
- }
- .v_content_list {
- position: absolute;
- padding: 0;
- margin: 0;
- }
- .v_content_list li {
- float: left;
- margin: 20px 20px 0 0;
- list-style: none;
- }
- .v_content_list li i {
- display: block;
- width: 220px;
- height: 160px;
- background: #67C6FF;
- color: #fff;
- font: 30px/160px arial;
- text-align: center;
- cursor: pointer;
- }
- </style>
- </head>
- <body>
- <div class="v_show">
- <div class="v_captian">
- <h2 class="cartoon" title="卡通动漫"> 卡通动漫 </h2>
- <div class="hignlight_tip">
- <span class="current"></span>
- <span></span>
- <span></span>
- <span></span>
- </div>
- <div class="change_btn">
- <span class="prev"> 上一页 </span>
- <span class="next"> 下一页 </span>
- </div>
- <em><a href="$"> 更多 </a></em>
- </div>
- <div class="v_content">
- <ul class="v_content_list">
- <li><i>1</i><h4></li>
- <li><i>2</i><h4></li>
- <li><i>3</i><h4></li>
- <li><i>4</i><h4></li>
- <li><i>5</i><h4></li>
- <li><i>6</i><h4></li>
- <li><i>7</i><h4></li>
- <li><i>8</i><h4></li>
- <li><i>9</i><h4></li>
- <li><i>10</i><h4></li>
- <li><i>11</i><h4></li>
- <li><i>12</i><h4></li>
- <li><i>13</i><h4></li>
- <div style="clear: both;"></div>
- </ul>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/17144/84c56e3d8a3e3b2bb08d1d58bd283216.html