diff --git a/themes/beauty/views/list/bydate.php b/themes/beauty/views/list/bydate.php
index 7c37b6e..4001529 100644
--- a/themes/beauty/views/list/bydate.php
+++ b/themes/beauty/views/list/bydate.php
@@ -446,7 +446,7 @@ eof;
     </div><!--im_mainl-->
 </div><!--img_main-->
 
-<div class="text-center">
+<div class="text-center pagination-con">
 <?php
 if ($total > $viewData['pageSize']) {
     $pagination = Html::getPaginationHtmlCode($viewData['page'], $viewData['pageSize'], $total);
diff --git a/themes/beauty/views/site/index.php b/themes/beauty/views/site/index.php
index 0248be3..52f014f 100644
--- a/themes/beauty/views/site/index.php
+++ b/themes/beauty/views/site/index.php
@@ -552,7 +552,7 @@ eof;
     </div>
 </div>
 
-<div class="text-center">
+<div class="text-center pagination-con">
 <?php
 if ($total > $viewData['pageSize']) {
     $pagination = Html::getPaginationHtmlCode($viewData['page'], $viewData['pageSize'], $total);
diff --git a/www/css/beauty.css b/www/css/beauty.css
index 20b39cd..e10c072 100644
--- a/www/css/beauty.css
+++ b/www/css/beauty.css
@@ -69,8 +69,8 @@ a:link{text-decoration:none}
 .navbar-fixed-left .active a{background-color:#e7e7e7;color:#555}
 .lampshow .navbar-fixed-left{background-color:#222}
 .lampshow .navbar-fixed-left a{color:#DDD}
-.lampshow .navbar-fixed-left .active a{background-color:#e7e7e7;color:#555}
-.lampshow .navbar-fixed-left a:hover{background-color:#CCC;color:#444}
+.lampshow .navbar-fixed-left .active a{background-color:#5c5858;color:#CCC}
+.lampshow .navbar-fixed-left a:hover{background-color:#6d5d5d;color:#BBB}
 
 .img_main{min-height:510px;margin-left:160px}
 .im_mainl{margin:0 10px 12px 10px}
diff --git a/www/js/beauty.js b/www/js/beauty.js
index 9997caf..8c8f48d 100644
--- a/www/js/beauty.js
+++ b/www/js/beauty.js
@@ -1006,13 +1006,55 @@ var RC_LEFT = 37;
     RC_BACK = 10009;
     RC_EXIT = 10182;
 
+//support a and button
 var getNextSibling = function(el, way) {
     var next = null;
     var tagName = el.tagName.toLowerCase();
-    if (way == 'right') {
+    if (way == 'right' && $(el).parents('.img_main').length > 0) {
         next = tagName == 'a' ? $(el).parent().next() : $(el).next();
-    }else if (way == 'left') {
+    }else if (way == 'right' && $(el).parents('.navbar-fixed-left').length > 0) {
+        next = $('.img_main li a').first();
+        if (next.length > 0) {
+            next.focus();
+        }
+    }else if (way == 'right' && $(el).parents('.pagination-con').length > 0) {
+        next = $(el).parent().nextAll('li:not(.disabled)').not('.active').first();
+    }else if (way == 'left' && $(el).parents('.pagination-con').length > 0) {
+        next = $(el).parent().prevAll('li:not(.disabled)').not('.active').first();
+    }else if (way == 'up' && $(el).parents('.pagination-con').length > 0) {
+        next = $('.img_main .im_item').last();
+    }else if (way == 'left' && $(el).parents('.img_main').length > 0) {
         next = tagName == 'a' ? $(el).parent().prev() : $(el).prev();
+
+        if (next.length == 0) {
+            next = $('.navbar-fixed-left li.active a').first();
+            if (next.length > 0) {
+                next.focus();
+            }
+        }
+    }else if (way == 'up' && $(el).parents('.navbar-fixed-left').length > 0) {
+        next = tagName == 'a' ? $(el).parent().prevAll('li:not(.menu-title)').first() : $(el).prev();
+    }else if (way == 'up' && $(el).parents('.img_main').length > 0) {
+        if ($(el).parent('li').length > 0) {
+            next = $(el).parents('ul').prevAll('.nav').find('li').first();
+        }else if ($(el).parent('div').length > 0) {
+            next = $(el).parent('div').prevAll('ul').first().find('li').first();
+        }
+    }else if (way == 'down' && $(el).parents('.navbar-fixed-left').length > 0) {
+        next = tagName == 'a' ? $(el).parent().nextAll('li:not(.menu-title)').first() : $(el).next();
+    }else if (way == 'down' && $(el).parents('.img_main').length > 0) {
+        if ($(el).parent('li').length > 0) {
+            next = $(el).parents('ul').nextAll('.nav').find('li').first();
+            if (next.length == 0) {
+                if ($(el).parents('.im_mainl').length > 0) {
+                    next = $(el).parents('ul').first().nextAll('.im_item').first();
+                }else {
+                    next = $(el).parents('ul').first().nextAll('.im_mainl').find('.im_item').first();
+                }
+            }
+        }else if ($(el).parent('.im_item').length > 0) {
+            next = $('div.pagination-con').find('li.active').next();
+        }
     }
 
     if (next && next.length > 0) {
@@ -1024,6 +1066,20 @@ var getNextSibling = function(el, way) {
 
 var keyPress = function(way) {
     var focusedEl = $(':focus');
+    if (focusedEl.length == 0) {
+        //get img el first
+        focusedEl = $('.im_item a').first();
+
+        //get nav item second
+        if (focusedEl.length == 0) {
+            focusedEl = $('.img_main li.active a').first();
+            focusedEl.focus();
+        }else {
+            focusedEl.focus();
+            return;
+        }
+    }
+
     if (focusedEl.length > 0) {
         var next = getNextSibling(focusedEl.get(0), way);
         if (next) {
@@ -1044,5 +1100,12 @@ $(document.body).on('keydown', function(e) {
         keyPress('right');
     }else if (e.keyCode == RC_LEFT) {
         keyPress('left');
+    }else if (e.keyCode == RC_UP) {
+        keyPress('up');
+    }else if (e.keyCode == RC_DOWN) {
+        keyPress('down');
+    }else if (e.keyCode == RC_ENTER) {
+        //play images
+
     }
 });
\ No newline at end of file