ワンクリックしかできないクリックカウンター

前へ 次へ
このQ&Aのポイント
  • ログイン式掲示板にクリック数をカウントするカウンター機能を追加したい
  • jQueryとjavascriptとphpを使用して、カウンター機能を実装しましたが、一回しかクリックできないようにする方法が分からない
  • クリックカウンターにランダムな数字を生成してパラメータとして付け、ユニークな状態にしています
回答を見る
  • ベストアンサー

ワンクリックしかできないクリックカウンター

現在、ログイン式掲示板を作成中です。 その掲示板で、投稿に対してログイン中のみ、一人一回しかクリックできない「いいねボタン」のようなものを設置したいのですが、（mixiつぶやきのようなものです）どのようにすればよいのかわからずこまっております。 ネットにのっているものを参考にさせていただいて、クリック数をカウントする機能は、jQueryとjavascriptとphpでできたのですが、一回しかクリックできないようにするにはどうすればよいかわからないので、教えていただけませんか？ どうぞよろしくお願いいたします。 javascript jQuery(document).ready(function(){ //初期時のカウンターファイル読み込み //同じファイル名だと正常に読み込めないので、ランダムな数字を生成し、パラメータとして付けることで、ユニークな状態にしている。 var randnum1 = Math.floor( Math.random() * 10000 ); jQuery("#btn01 span").load("./count01.txt?r=" + randnum1); //カウンター追加後の読み込み関数 function func01(data){ var randnum1 = Math.floor( Math.random() * 10000 ); jQuery("#btn01 span").load("./count01.txt?r=" + randnum1); } //カウンター＋1追加処理 jQuery('#btn01 p').click(function(e){ //「param1」変数の値と書き込みファイル名の情報をもってpost.phpへ。その後、関数func01を実行 jQuery.post("post.php" , {"param1": 'count01.txt'} , func01); jQuery("#btn01 span").load("./count01.txt"); }); }); index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>カウントサンプル</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/count.js"></script> </head> <body> <div id="btn01"><p><a href="javascript:void(0);">いいね！</a></p><span></span></div> </body> </html> post.php <?php $file = $_REQUEST['param1']; $c = file_get_contents($file); $c++; $fp = fopen($file, "r+"); @fputs($fp,$c); fclose($fp);

  • PHP
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.2

こんにちは。 どの程度PHPやmySQLを扱えるのかわからないのですが環境等はある前提でサンプルを提示します。 動きをわかりやすくする為に一度クリックした投稿については選択できないようにしています。 (これをクリック時にチェックするようにしてもOKです。) エラー処理やレスポンス、セキュリティについては端折っていますのでそこはきちんと実装してください。 あくまでサンプルです。 動作について 既にクリックしたボタンは押せない。各投稿のボタンをクリックするとカウントがアップされる。 他のユーザでログインしなおして試すと、そのユーザがクリックしたボタンについては押せないことが確認できる。 JavaScript部分はこのサンプル用になっていますが、ユーザに対してクリック済みかどうかのチェックやカウントについてはこのcount.phpベースになると思います。 レスポンスについては、このサンプルですと投稿ごとにデータを取得しているため、画面に表示する件数分count.phpへリクエストします。 最初に表示分のクリック情報やカウントを全て取得してくる方法や、最初に回答したクリックした時にチェックする動作にする方法もあります。 === index.php <html> <head> <title>テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $().ready ( function() { var obj = $('#bbs > input:button'); obj.each ( function(index) { $(this).click(function() { var bbsId = $(this).get(0).id.split('-')[1]; var userId = $('#userid').val(); $.post ( 'count.php', { mode : 'click', bbsid : bbsId, userid : userId }, function ( data, b ) { if ( !data.clicked ) { $('#c-' + data.bbsid).html ( data.count ); $('#b-' + data.bbsid).attr ( 'disabled', 'disabled' ); } } ); }); }); }); function login() { var userId = $('#userid').val(); if ( userId == '' ) { alert ( 'ユーザIDを入れてね。' ); return; } var cntObj = $('#bbs > input:button').next(); cntObj.each ( function(index) { var obj = $(this).get(0); $.post ( 'count.php', { mode : 'read', bbsid : obj.id.split('-')[1], userid : userId }, function ( data ) { obj.innerHTML = data.count; if ( data.clicked ) { $('#b-' + data.bbsid).attr ( 'disabled', 'disabled' ); } else { $('#b-' + data.bbsid).removeAttr ( 'disabled', 'disabled' ); } } ); }); } </script> </head> <body> ユーザID：<input type="text" id="userid"><input type="button" value="ログイン(擬似)" onclick="login();"> <hr> <form id="bbs"> <?php for ( $i = 0; $i < 10; $i ++ ) { ?> <input type="button" value="投稿ID[000<?= $i ?>]" disabled id="b-000<?= $i ?>">カウント[<span id="c-000<?= $i ?>">-</span>]<br> <?php } ?> </form> </body> </html> === count.php <?php require_once 'DB.php'; $db = DB :: connect ( "mysql://root:password@localhost/test" ); if ( PEAR :: isError($db) ) { die ( $db -> getMessage() ); } $result = $db -> query ( 'SET NAMES utf8' ); $mode = $_POST['mode']; $bbsId = $_POST['bbsid']; $userId = $_POST['userid']; // ユーザのクリック状況（投稿IDとユーザIDで取得) $sql = "select USERID from CLICKMANAGER where BBSID='$bbsId' and USERID='$userId'"; $result = $db->query ( $sql ); // レコードが取得できた場合はクリック済みとする $isClicked = $result->numRows() == 1; if ( $mode == 'click' && !$isClick ) { // ボタンクリック時の処理 // まだクリックしていなかった場合はデータを追加 $sql = "insert into CLICKMANAGER (BBSID,USERID) values ( '$bbsId', '$userId' )"; $result = $db->query ( $sql ); } // カウントを取得 $sql = "select count(*) as CNT from CLICKMANAGER where BBSID='$bbsId'"; $result = $db->query ( $sql ); $r=$result->fetchRow(DB_FETCHMODE_ASSOC); $count = $r['CNT']; // 返すJSONデータを生成 $array = array(); $array['clicked'] = $isClicked; // クリック済フラグ $array['bbsid'] = $bbsId; // 投稿ID $array['count'] = $count; // カウント数 header ( "Content-Type: application/json; charset=UTF-8" ); print json_encode ( $array ); ?> === DB create table CLICKMANAGER ( BBSID VARCHAR(12), USERID VARCHAR(12), REGDATE TIMESTAMP, PRIMARY KEY (BBSID,USERID) );

mic818
質問者

補足

お返事ありがとうございます。 教えていただいたのを参考に、勉強しながら作っていこうと思います。 詳しく教えていただいて本当にありがとうございました。

その他の回答 (1)

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 ログインしてユーザがわかっているのであれば、どの投稿についてクリックしたかを保持しておき、ボタンを表示する際に判断すれば良いと思います。 (またはクリックした時に「クリック済みだよ」というエラーを返す) 手っ取り早いのはユーザ毎にファイルを作って、そこにどの投稿についてクリックしたか書き込んでいく。 もしくは1ファイルにユーザID,投稿ID,投稿ID,・・・・という具合にCSVっぽく管理する。 もっと簡単なのはデータベースが何か使えればその投稿IDのレコードが取れるかどうかで判別できます。 ユーザの管理体系やどのようにログインを判断しているか等わからないので大まかな方法の回答となります。 あと、現在のコードはあまりよろしくないです。 param1=xxx.xxxと何か渡されたらそのファイルを読みに行って処理されてしまう可能性があります。

mic818
質問者

補足

はじめまして。 ご丁寧に教えていただきありがとうございます。 説明不足で申し訳ありませんでした。 Twitterアカウントでログインさせて、Mysqlをつかっております。 クリックしたユーザーに関して、データベースに投稿IDとユーザー情報をかきこんで、クリックする際にデータベースにその人の投稿があったか判別すればいいということでしょうか？ 大変申し訳ないのですが、php初心者でまだよくわかっていないので、データベースにその人の投稿があったかどうかの判別が、どういうコードになるのか教えていただけませんか？ >あと、現在のコードはあまりよろしくないです。 >param1=xxx.xxxと何か渡されたらそのファイルを読みに行って処理されてしまう可能性があります。 ご指摘ありがとうございます。 ほんとですね＞＜ セキュリティ面も初心者なので、このコードを使わずにカウント数も、データベースに書き込まれた投稿IDの数で表示しようと思ったのですが、それで大丈夫でしょうか？ どうぞよろしくお願いいたします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. PHP

関連するQ&A

  • クリックカウンターの挙動がおかしい

    jQueryとPHPを使い、画面遷移せずに回すクリックカウンター http://1bit.mobi/20110112164331.html こちらのカウンターを設置してみたのですが少し動作がおかしいです。 http://olo.sakura.ne.jp/test/test1.html 連続でクリックすると古い数字が出た後に正しい数字が表示されます。 何故か2回数字が更新されてしまうのです。 ブラウザにより挙動が異なりIE,Firefox,Chromeでは上記のように iPodtouch,3DSのブラウザでは正常に動作しました。 解決策はありますでしょうか？よろしくお願いします。 jQuery(document).ready(function(){ //初期時のカウンターファイル読み込み //ランダムな数字を生成し、パラメータとして付けることで、ユニークな状態にする。 var randnum1 = Math.floor( Math.random() * 10000 ); jQuery("#btn01 span").load("./count01.txt?r=" + randnum1); //カウンター追加後の読み込み関数 function func01(data){ var randnum1 = Math.floor( Math.random() * 10000 ); jQuery("#btn01 span").load("./count01.txt?r=" + randnum1); } //カウンター＋1追加処理 jQuery('#btn01 p').click(function(e){ //「param1」変数の値と書き込みファイル名の情報をもってpost.phpへ。その後、関数func01を実行 jQuery.post("post.php" , {"param1": 'count01.txt'} , func01); jQuery("#btn01 span").load("./count01.txt"); }); });

  • コードをスマートにさせたい。

    jQueryとPHPを使い、画面遷移せずに回すクリックカウンター http://1bit.mobi/20110112164331.html 現在、上記のカウンターを2つ並べています。 この01,02の数字を変数にして指定回数ループで回してコードがスッキリさせたいのですが、 うまくいきませんでした。どのように修正したらよいでしょうか？ http://olo.sakura.ne.jp/test/test.html jQuery(document).ready(function(){ //初期時のカウンターファイル読み込み var randnum1 = Math.floor( Math.random() * 10000 ); jQuery("#btn01 span").load("count/count01.txt?r=" + randnum1); jQuery("#btn02 span").load("count/count02.txt?r=" + randnum1); //カウンター追加後の読み込み関数 function func01(data){ var randnum1 = Math.floor( Math.random() * 10000 ); jQuery("#btn01 span").load("count/count01.txt?r=" + randnum1); } function func02(data){ var randnum1 = Math.floor( Math.random() * 10000 ); jQuery("#btn02 span").load("count/count02.txt?r=" + randnum1); } //カウンター＋1追加処理 jQuery('#btn01 p').click(function(e){ //「param1」変数の値と書き込みファイル名の情報をもってpost.phpへ。その後、関数func01を実行 jQuery.post("count/post.php" , {"param1": 'count01.txt'} , func01); }); jQuery('#btn02 p').click(function(e){ //「param1」変数の値と書き込みファイル名の情報をもってpost.phpへ。その後、関数func02を実行 jQuery.post("count/post.php" , {"param1": 'count02.txt'} , func02); }); });

  • クリック数を１日ごとにカウントしたいです。

    どうか教えてください。 画像やボタンなどをクリックした時に、その（トータルの累計の）数を画像やボタンの横に表示する方法については、次のように「教えて！goo」にあります。 http://okwave.jp/qa/q6858457.html カウントサンプルページ http://olo.sakura.ne.jp/test/test.html これを累計の数ではなく、１日ごとにカウントするには、以下のコードをどのように変えたらよいでしょうか？ 例えば、3月3日００：００～２４：００の24時間以内にクリックされた数を表示し、3月4日００：００になったら、表示される数が「０」にもどるような場合を想定しています。 言い換えれば、（例えば）毎日００：００になったらカウント数がリフレッシュされるような表示方法です。 //　カウンター読込み（表示） function load(n){ 　var uri = "count/count0" + n + ".txt?r=" + Math.floor(Math.random() * 10000); 　jQuery("#btn0" + n + " span").load(uri); } //　初期表示＋イベント設定 for(var n=0; ++n<3;){ 　load(n); 　jQuery("#btn0" + n + " p").click( 　　(function(m){ 　　　return function(){ 　　　　jQuery.post("count/post.php", {"param1":"count0" + m + ".txt"}, function(){load(m);}); 　　　}; 　　})(n) 　); }

  • jquery ulのtab切り替えについて

    昨日からjqueryを使ってみたのですが、どうしてもうまく表現できません。 書籍のwebcreators６月号を参考にしてほぼそのままのソースを打ち込んだのですが、CSSとJavascriptが機能していません。 ソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <link href="../js/jquery.ui/themes/flora/flora.all.css" rel="stylesheet" type="text/css" title="Flora(Default)" /> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/ui/ui.tabs.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/jquery-1.2.6.js"></script> <script type"text/javascript"> $(window) .bind ('load',function(){ $('#container-1>ul').tabs(); }); </script> <title>無題ドキュメント</title> </head> <body> <div id="container-1" > <ul> <li><a href="#fragment-1"><span>ホワイト</span></a> </li> <li><a href="#fragment-2"><span>ブラック</span></a></li> </ul> <div id="fragment-1"> <p>ページ１</p> <p>ダミー</p> </div> <div id="fragment-2" style="margin-top:150px;"> <p>ページ２</p> <p>ダミー</p> </div> </div> </body> </html> となっています。 javascriptについてはあまり知識がないので、どの部分が悪いのか教えて頂けないでしょうか？ 皆様お忙しい中ご迷惑をおかけしますが、よろしくお願いいたします。

  • js 引用符

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <div id="a"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="moment.js"></script> <script src="fastclick.js"></script> <script> $(function(){ var retinaSwitch = window.<span class="searchword">devicePixelRatio</span>; if(retinaSwitch == 1) { $('#container').html('Retinaディスプレイではありません'); } else if(retinaSwitch == 2) { $('#container').html('Retinaディスプレイです'); } }); </script> </body> </html> javascriptのコードなのですがWebサイトからコピペした文章が上手く反映されません。引用符関係のイージーミスだとは思うのですが、ちょっとドツボに嵌っているので、ご指摘頂ければと思います。

  • PHPでレイティングバーの値を取得

    下記のようなJQuery　スクリプトにおいて、 レイティングバーの値を、PHP変数に取得するには どうすればいいのでしょうか。ご指導お願い致します。 ちなみに、 $manzokudo = $_POST['rating']; var_dump($manzokudo); で、ダンプしたところ、中身がNULLでした。 【detail.php】 <link rel="stylesheet" type="text/css" href="jquery.rating.css"> <script type="text/javascript" src="jquery-2.1.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script> <script type="text/javascript" src="jquery.rating.js"></script> <script type="text/javascript"> $(function () { // レーティングバーを有効化 $('.starbar').rating({ cancel: '消去', // 「キャンセル」ボタンのテキスト // ★アイコンをクリックした時の処理 callback: function(value){ // detail.phpに対してレイティングバーの値を送信 $.post( 'detail.php', { rating: value }, function(){ window.alert('「' + value + '」をつけました。'); } ); } }); }); </script> </head> <body> <?php $_POST[] ?> </body> </html>

  • jqueryを使ったスクロール画面が正しく作動しません。

    jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span>&nbsp;&nbsp;&nbsp;&nbsp; テスト</span> </div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • jquery-colorboxが反応しません・・・

    Wordpressのプラグインでjquery-colorboxってのを使いたいのですが上手く動いてくれません・・・ ネットで調べたらheader部分になにか追加したら動くとあったのですがよくわかりませんでした・・・ 今ヘッダー部分は <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title> <?php if ( is_home() ) { ?> <? bloginfo('name'); ?> | <?php bloginfo('description'); ?> <?php } ?> <?php if ( is_search() ) { ?> Search Results for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' &mdash; '); echo $count . ' '; _e('articles'); wp_reset_query(); ?> <?php } ?> <?php if ( is_404() ) { ?> <? bloginfo('name'); ?> | 404 Nothing Found <?php } ?> <?php if ( is_author() ) { ?> <? bloginfo('name'); ?> | Author Archives <?php } ?> <?php if ( is_single() ) { ?> <?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; ?> | <? bloginfo('name'); ?> <?php } ?> <?php if ( is_page() ) { ?> <? bloginfo('name'); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; ?> | <?php wp_title(''); ?> <?php } ?> <?php if ( is_category() ) { ?> <?php $category = get_the_category(); echo $category[0]->category_description; ?> | <? bloginfo('name'); ?> <?php } ?> <?php if ( is_month() ) { ?> <? bloginfo('name'); ?> | Archive | <?php the_time('F, Y'); ?> <?php } ?> <?php if ( is_day() ) { ?> <? bloginfo('name'); ?> | Archive | <?php the_time('F j, Y'); ?> <?php } ?> <?php if (function_exists('is_tag')) { if ( is_tag() ) { ?> <?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?> </title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/sprinkle.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/script.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/colortip-1.0-jquery.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/contact-form.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/blogger.js"></script> <!--[if IE 6]> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styleie6.css" type="text/css" media="screen" /> <![endif]--> </head> ってなってます。どうすれば動きますか？？ サイトURLはhttp://mooommm.com/ 添付画像はプラグインの設定部分の画像です！

  • JQuery の CrossSlideを設置したのですが IEでだけ表示できません。

    JQuery の CrossSlideを設置したのですが IEでだけ表示できません。 FireFoxでもSafariでも表示できています。 ブラウザのエラーでは 「メッセージ: 'plan[...].src' は Null またはオブジェクトではありません。」 とでています。 phpファイルに設置しているのですが、それが原因なのでしょうか? IEはバージョン8です。 javascriptがまったく分からない為、設置されている方のソースをそのままコピペで使用しているのですが... 原因が分かる方おられましたら、アドバイスおねがいします。 ソース -head- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>○○</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.cross-slide.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> -body- <script type="text/javascript"> $(function(){ $("#topimgbox").crossSlide({ sleep : 15, fade : 2 },[ { src : '1.jpg' }, { src : '2.jpg' }, ]); }); </script> <div id="topimgbox">Loading...</div> 設置されている方々のサンプルはIEで見ましたので、自分の設置の仕方が原因だと思うのですが...

  • bxsliderが動かない

    Javascript初心者なのですが、自分のサイトにbxsliderを置きたいと思っています。 試しに白紙のHTMLファイルに以下のように記述してみました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.bxslider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxslider({ auto: true, }); }); </script> </head> <body> <ul class="bxslider"> <li><img src="images/pic1.jpg"></li> <li><img src="images/pic2.jpg"></li> <li><img src="images/pic3.jpg"></li> <li><img src="images/pic4.jpg"></li> </ul> </body> </html> jsやcssの場所は正しいです。 しかし、表示してみると画像が4枚縦に並んで表示されるだけとなってしまいます。 Firefox, Chrome、IEの各最新版で試しましたが同様でした。 どの部分が間違っているのでしょうか？ご教授お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する