操作方法
html代码部分： <div id="sp"> <!-- 视频内容开始 --> <div class="Con"> <div class="avi"> </div> </div> <!-- 视频内容结束 --> <!-- 视频列表开始 --> <div class="List"> <ul id="shiping"> <!-- {foreach from=$dedaoo_shiping item=sp} 视频列表 --> <li name="视频单元" data-album="2015-08-05" data-title="{$sp.title|escape:html}" dataSrc="{$sp.url}" > <a href="javascript:void(0)" target="">{$sp.title|escape:html}</a></li> <!--{/foreach}--> </ul> </div> <!-- 视频列表结束 --> </div>
jquery代码部分： <!-- 应用外部jquery文件 --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var _index = 0; $(".List ul li").eq(_index).addClass("current"); var firstaviSrc = $("#sp .List ul li").eq(_index).attr("dataSrc"); setvideo(firstaviSrc); $(".List ul li").click(function(){ _index = $(this).index(); $(this).addClass("current").siblings("li").removeClass("current"); var aviSrc =$(this).attr("dataSrc"); setvideo(aviSrc); }); function setvideo(aviSrc) { $(".avi").html("<embed src='"+aviSrc+"' allowFullScreen='true' quality='high' width='525' height='331' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash' allownetworking='internal'></embed>"); } </script>
效果如图所示：