使用Jquery类库，步骤：
1、准备好html：
<div class="container"><div class="item-list">
<div class="item active"><img src="0.jpg" alt="第1张图"></div>
<div class="item"><img src="1.jpg" alt="第2张图"></div>
<div class="item"><img src="2.jpg" alt="第3张图"></div>
</div>
<div class="item-control">
<a href='javascript:' class="active">●</a>
<a href='javascript:'>●</a>
<a href='javascript:'>●</a>
</div>
</div>
2、为html设置样式
<style>.container{
width: 500px
height: 300px
text-align: center
background: red
position:relative
}
.container>.item-control{
display: inline-block
width: 100%
left: 0
position: absolute
bottom: 10px
background: rgba(0,0,0,0.2)
}
.container>.item-control>a{
font-size: 20px
color: rgba(255,255,255,0.7)
text-decoration: none
}
.container>.item-control>a.active{
color: #fff
}
.container>.item-list,
.container>.item-list>.item{
width: 100%
height: 100%
}
.container>.item-list>.item{
display: none
}
.container>.item-list>.item.active{
display: block
}
</style>
3、编写Js
<script>(function(){
$(document).on('click','.container .item-control a',function(){
var _index = $(this).index()
$(this).addClass('active').siblings().removeClass('active')
$('.container .item-list .item').eq( _index ).addClass('active').siblings().removeClass('active')
})
})()
</script>
最终效果见图：
首先准备以下的东西：1、图片若干，并规范化图片名字。从1开始。
2、在存放图片的文档中新建一个txt。
3、在txt中输入内容。
4、txt后缀改为html，完成
txt的内容：
<script>
var i
function pre()
{
if(i==1)return
i--
document.getElementById("pic").innerHTML="<img src="+i+".jpg></img>"
}
function next()
{
i++
document.getElementById("pic").innerHTML="<img src="+i+".jpg></img>"
}
</script>
<body>
<div onclick="pre()"><</div>
<div id="pic" ><</div>
<div onclick="next()">></div>
</body>
<tr><td align="center" class="tableHeader3-wn">所属类别</td>
<td class="tableHeader3-wn" align="left">
<table>
<tr>
<td>
<select id="srcList" name="srcList" multiple="multiple" size="12" ondblclick="addSort()">
<option value="1">VALUE1</option>
<option value="2">VALUE2</option>
<option value="3">VALUE3</option>
<option value="4">VALUE4</option>
</select>
</td>
<td>
<a href="#" onclick="addSort()" style="height:20pxborder: 1px solid #99BBE8margin:autopadding:0pxtext-align:center
width:30pxdisplay:blockbackground-image:url(${ctx}/images/button.gif)
text-decoration:nonefont-size:14pxcolor:#282523padding-top:4px">添加</a>
<a href="#" onclick="deleteSort()" style="height:20pxborder: 1px solid #99BBE8margin:autopadding:0pxtext-align:center
width:30pxdisplay:blockbackground-image:url(${ctx}/images/button.gif)
text-decoration:nonefont-size:14pxcolor:#282523padding-top:4px">移除</a>
</td>
<td>
<select id="destList" name="destList" multiple="multiple" size="12" ondblclick="deleteSort()">
</select>
</td>
</tr>
</table>
</td>
</tr>
<script
type="text/javascript">
function addSort(){
var src = document.getElementById('srcList')
var dest = document.getElementById('destList')
for (var i = 0i <src.options.lengthi++)
{
if (src.options[i].selected)
{
var exist = false
for (var j = 0j <dest.options.lengthj++)
{
if (dest.options[j].value == src.options[i].value)
{
exist = true
break
}
}
if (!exist)
{
var opt = document.createElement('OPTION')
opt.value = src.options[i].value
opt.text = src.options[i].text
dest.options.add(opt)
}
}
}
}
/** 删除分类 */
function deleteSort(){
var dest = document.getElementById('destList')
for (var i = dest.options.length - 1i >= 0 i--)
{
if (dest.options[i].selected)
{
dest.options[i] = null
}
}
}
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）