ここで、私がここにデモをしたコードを投稿して、私の友人のためのすべてのインスピレーションを刺激することを望んでいます。ここで実装するために2つの例を組み合わせました
.focus-item li.item {text-align：center;}。scroll-area .prev、.scroll-area .next {position：absolute;下：590px;幅：29px;高さ：64px;不透明度：0.6;オーバーフロー：隠し;表示：なし;テキストインデント：-999px;ボーダー：ミディアムなし;背景：url（ '/images/arrowlr.png'）繰り返しのスクロール0％0％透明;}。scroll-area .prev {left：0px;バックグラウンドポジション：-50px 0px;}。scroll-area .next {right：0px;}。scroll-area .bdon .prev、.scroll-area .bdon .next {display：block;} .scroll-area .focus-hd { /*width：832px; /*高さ：100px;* / /*オーバーフロー：非表示;* /左：63px;位置：絶対;} .focus-hd .snext、.focus-hd .sprev {float：left;表示：ブロック;幅：14px;高さ：47px;テキストインデント：-9999px;背景：url（ '/images/sprites1008.png'）無修正スクロール0px -3046px透明;}。focus-hd .snext {background-position：0px -2698px;} .focus-hd .show_bottom_nav {float：left;マージン：0px 6px;表示：インライン;幅：832px;オーバーフロー：隠し;}HTMLデモコード：
<div id = "" "> <div> <ul> <li data-bottom-thumb ="/attachments/news_gallery/20140528162328_454.jpg "data-text-id ="＃thumbtxt1 "> <img src ="/attachments/news_gallery data-bottom-thumb = "/attachments/news_gallery/20140528162328_733.jpg" data-text-id = "＃thumbxt2"> <img src = "/news_gallery/20140528162328_733.jpg"/> </li> </ul> < href = "javascript：void（0）"> </a> <a href = "javascript：void（0）"> </a> </div> <div style = "> <a href =" javascript：void（0） ">←</a> <div> <ul> <li li data-bottom-thumb = "/attachments/news_gallery/20140528162328_454.jpg" data-text-id = "＃thumbtxt1" style = "float：left"> <img src = "/attachments/news_gallery/20140528162328_454.jpg"/</</< data-bottom-thumb = "/attachments/news_gallery/20140528162328_733.jpg" data-text-id = "＃thumbtxt2" style = "float：left"> <img src = "/attachments/news_gallery/20140528162328_733.jpg"/</</</</</</</</</</</> href = "javascript：void（0）">→</a> </div> </div>
JSスクリプトコード：
jQuery（ "。スクロールエリア"）。スライド（{titcell： '。Focus-hd li'、maincell： '。フォーカスアイテムUL'、遅延時間：0、トリガー：0、オートプレイ：true}）; jQuery（ "。スクロールエリア.focus-item "）。hover（function（）{jquery（this）.addclass（" bdon "）}、function（）{jquery（this）.removeclass（ 'bdon'）}）; MainCell： "UL"、laytime：100、vis：5、effect： "left"、autopage：true、prevcell： "。sprev"、nextcell： "。snext"}）;