jquery代码,点击图片中左侧或者右侧一个箭头图片,怎样实现图片切换 100
2017-12-28 · 知道合伙人互联网行家
关注
展开全部
<style>
.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>
.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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
给图片设置点击事件onclcik,点击时获取图片在页面的位置,然后在图片的位置上显示浮动的箭头图片。这一系列事件稍微有点复杂,没有现成的代码。需要把事件和位置搞清楚。
追问
不是js代码,不用设置onclick事件吧。。。jquery代码中直接设置就行了吧
追答
你说的这功能必须用JavaScript去实现,jQuery是JavaScript的扩展。你可以网站查找基于jQuery的插件实现这个功能。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询