图片自由切换用JS特效怎么做 jquery实现带左右箭头切换图片自动渐隐效果源码求大侠指正

图片自由切换用JS特效怎么做

我建议初学者，一定要有能思考问题的能力。 图片自由切换，那么网页中图片是怎么出来的。 你可能会说通过img标签插入进来的。 但是在具体呢？ 没错通过src 链接图片的地址。

好了，在回到问题，图片自由切换实际上就根据javascript来动态改变图片的src 里面的值。
在jquery中有attr() 方法设置或返回被选元素的属性值。
在原声javascript中setAttribute()这个方法用来设置节点的属性值，getAttribute()方法获取元素节点的属性值。

jquery实现带左右箭头切换图片自动渐隐效果源码求大侠指正

//点击向左按钮

$("#prev").click(function(index){
index--
if(index<0){index=(len-1)}
show(index)
})

//点击向右按钮

$("#next").click(function(index){
index
if(index==len){index=0}
show(index)

})

你的这两个绑定事件里面,function(index) 这个index参数指向的会是一个event对象.
应该直接用$("#prev").click(function(//balabala){})

javascript图片左右切换

使用javascript定时器函数setTimeout()每隔一定的毫秒间隔数执行动作，在执行的动作中循环替换图片的src属性。树立演示如下：
1、HTML结构
2、javascript代码 function change(n){ if(n>5) n=1 // 一共5张图片，所以循环替换 document.getElementById("test").setAttribute("src", n ".png") n setTimeout("change(" n ")",1000)}window.onload = function(){ setTimeout("change(1)", 1000)} 3、效果演示

jquery如何将一个点击左右按钮切换图片的效果封装成可用于在同一个模板中其他块使用

(function (A){
var defaults={
picCourseListId:"pic_course_list",
picCourseListInnerId:"pic_course_list_inner",
prevId:"prev",
nextId:"next",
itemTag:"li"
}
A.a=function tpqh(options){
var option=defaults
if(typeof(option)=="Object"){
for(var k in options){
option[k]=options[k]
}
}
var pic_course_list = document.getElementById(option.picCourseListId)
var pic_course_list_inner = document.getElementById(option.picCourseListInnerId)
var prev = document.getElementById(option.prevId)
var next = document.getElementById(option.nextId)
var imgLen = pic_course_list.getElementsByTagName(option.itemTag).length
pic_course_list_inner.style.width = pic_course_list.offsetWidth * imgLen "px"
function runRight(prev, curBtn, wrap) {
prev.style.cursor = "pointer"
if((imgLen - (wrap.scrollLeft / 442)) > 2) {
wrap.scrollLeft = 442
} else {
wrap.scrollLeft = 442 * (imgLen - (wrap.scrollLeft / 442))
curBtn.style.cursor = "default"
}
}
function runLeft(next, curBtn, wrap) {
next.style.cursor = "pointer"
if((wrap.scrollLeft / 442) > 1) {
wrap.scrollLeft -= 442
} else {
wrap.scrollLeft -= 442 * (wrap.scrollLeft / 442)
curBtn.style.cursor = "default"
}
}
prev.onclick = function() {
runLeft(next, this, pic_course_list)
}
next.onclick = function() {
runRight(prev, this, pic_course_list)
}
}
})(window)
封装成这样就可以在其它地方调用了：a({})