left{float: left;width: 100px;overflow: hidden;}
left li{height: 30px;line-height: 30px;text-align: center;}
right{float: left;width: 100px;height: 400px;}
right li{display: none;color: #f00;}
</style>
<!-- 左侧li -->
<ul class="left">
<li>第1个标题</li>
<li>第2个标题</li>
<li>第3个标题</li>
<li>第4个标题</li>
</ul>
<!-- 右侧li内容 -->
<ul class="right">
<li>1左侧HTML</li>
<li>2左侧HTML</li>
<li>3左侧HTML</li>
<li>4左侧HTML</li>
</ul>
//js代码
<script type="text/javascript">
$(function(){
$("right li")eq(ind)show();
$("left li")click(function(){
var ind = $("left li")index(this);
$("right li")eq(ind)show()siblings()hide();
})
})
</script>//我项目里的一个例子。
//==============================================
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title></title>
t>
<script type="text/javascript" src="js/sliderjs"></script>
<script type="text/javascript" src="js/jquery-191minjs"></script>
<body>
<div id="banner_tabs" class="flexslider">
<ul class="slides">
<li>
<a>
<img width="1920" height="600" style="background: url(images/banner_1jpg) no-repeat center;" src="images/alphapng">
</a>
</li>
<li>
<a>
<img width="1920" height="600" style="background: url(images/banner_2jpg) no-repeat center;" src="images/alphapng">
</a>
</li>
<li>
<a>
<img width="1920" height="600" style="background: url(images/banner_3jpg) no-repeat center;" src="images/alphapng">
</a>
</li>
</ul>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="javascript:;">Previous</a></li>
<li><a class="flex-next" href="javascript:;">Next</a></li>
</ul>
<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
<li class="active"><a>1</a></li>
<li class=""><a>2</a></li>
<li class=""><a>3</a></li>
</ol>
</div>
<script src="js/jqueryjs"></script>
<script type="text/javascript">
$(function() {
var bannerSlider = new Slider($('#banner_tabs'), {
time: 5000,
delay: 400,
event: 'hover',
auto:true,
mode: 'fade',
controller: $('#bannerCtrl'),
activeControllerCls: 'active'
});
$('#banner_tabs flex-prev')click(function() {
bannerSliderprev()
});
$('#banner_tabs flex-next')click(function() {
bannerSlidernext()
});
})
</script>
</body>
</html>
//==========================================
//slider，jq自己下载，相信不用我教。
//顺便可以看看教程，对这些有点了解。建议，在当前轮播图的div添加类active，设置active {display：block；}，ban{display:none;};这样可以通过添加或移除active就可以了；这样以下就比较方便很多，要不然又要做循环，麻烦（swiper插件做轮播效果不错）
$("left")click(function(){
var $index = $("ban")hasClass("active")index();//获取当前轮播图的下标
if($index === 0 ) {//当前为第一张轮播图
$("ban")eq($("ban")length-1)addClass("active)
siblings("ban")removeClass("active");
//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法
}else {
$("ban")eq($index-1)addClass("active)
siblings("ban")removeClass("active");
})
$("right")click(function(){
var $index = $("ban")hasClass("active")index();//获取当前轮播图的下标
if($index === ($("ban")length-1) ) {//当前为最后一张轮播图
$("ban")eq($("ban")length-1)addClass("active)
siblings("ban")removeClass("active");
//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法
}else {
$("ban")eq($index+1)addClass("active)
siblings("ban")removeClass("active");
})
//大体思路是这样了，代码可能有个别字母写得不对，毕竟是手敲的，但是大概思路是这样了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）